@ledgerhq/lumen-ui-rnative 0.1.10 → 0.1.12

package/src/lib/Components/Tile/Tile.mdx

@@ -26,11 +26,11 @@ Tile components are compact, card-like interactive elements designed for horizon
 
 ## Anatomy
 
-- **TileSpot**: Visual icon or element at the top
-- **TileContent**: Container for title, description, and trailing content
+- **Tile**: Root container; direct children are laid out vertically (e.g. Spot, TileContent)
+- **TileContent**: Container for title, description and trailing content
   - **TileTitle**: The main label of the item (required)
   - **TileDescription (optional)**: Provides additional context
-  - **TileTrailingContent (optional)**: Container for trailing content like Tags, Text, etc.
+  - **TileTrailingContent (optional)**: Container for Tags, labels, or other supplementary content
 
 ## Properties
 
@@ -94,10 +94,10 @@ Install and set up the library with our [Setup Guide →](?path=/docs/getting-st
 ```tsx
 import {
   Tile,
-  TileSpot,
   TileContent,
   TileTitle,
   TileDescription,
+  Spot,
 } from '@ledgerhq/lumen-ui-rnative';
 import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
 
@@ -108,7 +108,7 @@ function MyComponent() {
       onPress={() => console.log('Primary action')}
       onLongPress={() => console.log('Secondary action')}
     >
-      <TileSpot appearance='icon' icon={Settings} />
+      <Spot appearance='icon' icon={Settings} />
       <TileContent>
         <TileTitle>Settings</TileTitle>
         <TileDescription>Manage preferences</TileDescription>
@@ -122,20 +122,22 @@ function MyComponent() {
 
 ### With Trailing Content (Tags, etc.)
 
+Use TileTrailingContent inside TileContent to wrap Tags or other supplementary content.
+
 ```tsx
 import {
   Tile,
-  TileSpot,
   TileContent,
   TileTitle,
   TileDescription,
   TileTrailingContent,
   Tag,
+  Spot,
 } from '@ledgerhq/lumen-ui-rnative';
 import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
 
 <Tile appearance='card'>
-  <TileSpot appearance='icon' icon={Bitcoin} />
+  <Spot appearance='icon' icon={Bitcoin} />
   <TileContent>
     <TileTitle>Bitcoin</TileTitle>
     <TileDescription>BTC</TileDescription>
@@ -150,7 +152,7 @@ import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
 
 ```tsx
 <Tile disabled>
-  <TileSpot appearance='icon' icon={Settings} />
+  <Spot appearance='icon' icon={Settings} />
   <TileContent>
     <TileTitle>Settings</TileTitle>
     <TileDescription>Unavailable</TileDescription>
@@ -163,13 +165,14 @@ import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
 Use the `centered` prop to vertically center the tile content. This is useful when a tile has less content than its neighbors in a grid, like a "Show more" tile that needs to align with richer tiles.
 
 ```tsx
-import { ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
+import { ChevronRight, CryptoBitcoinCoin } from '@ledgerhq/lumen-ui-rnative/symbols';
+import { Spot, Tile, TileContent, TileTitle, TileDescription, TileTrailingContent, Tag } from '@ledgerhq/lumen-ui-rnative';
 import { View } from 'react-native';
 
 // In a grid where other tiles have more content
 <View style={{ flexDirection: 'row', gap: 8 }}>
   <Tile appearance='card'>
-    <TileSpot appearance='coin' icon='btc' />
+    <Spot appearance='icon' icon={CryptoBitcoinCoin} />
     <TileContent>
       <TileTitle>Title</TileTitle>
       <TileDescription>Description</TileDescription>
@@ -181,7 +184,7 @@ import { View } from 'react-native';
 
   {/* Show more tile with centered content */}
   <Tile appearance='card' centered>
-    <TileSpot appearance='icon' icon={ChevronRight} />
+    <Spot appearance='icon' icon={ChevronRight} />
     <TileContent>
       <TileTitle>Show more</TileTitle>
     </TileContent>
@@ -194,14 +197,15 @@ import { View } from 'react-native';
 ```tsx
 import {
   Tile,
-  TileSpot,
   TileContent,
   TileTitle,
   TileDescription,
+  Spot,
 } from '@ledgerhq/lumen-ui-rnative';
+import { CryptoBitcoinCoin } from '@ledgerhq/lumen-ui-rnative/symbols';
 
 <Tile onPress={() => console.log('Clicked!')}>
-  <TileSpot appearance='coin' icon='btc' />
+  <Spot appearance='icon' icon={CryptoBitcoinCoin} />
   <TileContent>
     <TileTitle>Bitcoin</TileTitle>
     <TileDescription>BTC</TileDescription>
@@ -213,17 +217,21 @@ import {
 
 ```tsx
 import { ScrollView } from 'react-native';
+import { Tile, TileContent, TileTitle, TileDescription, Spot } from '@ledgerhq/lumen-ui-rnative';
 
 <ScrollView horizontal>
-  {items.map((item) => (
-    <Tile key={item.id} lx={{ width: 's128', flexShrink: 0 }}>
-      <TileSpot appearance='icon' icon={item.icon} />
-      <TileContent>
-        <TileTitle>{item.title}</TileTitle>
-        <TileDescription>{item.description}</TileDescription>
-      </TileContent>
-    </Tile>
-  ))}
+  {items.map((item) => {
+    const Icon = item.icon;
+    return (
+      <Tile key={item.id} lx={{ width: 's128', flexShrink: 0 }}>
+        <Spot appearance='icon' icon={Icon} />
+        <TileContent>
+          <TileTitle>{item.title}</TileTitle>
+          <TileDescription>{item.description}</TileDescription>
+        </TileContent>
+      </Tile>
+    );
+  })}
 </ScrollView>;
 ```
 
@@ -234,7 +242,7 @@ import { ScrollView } from 'react-native';
   onPress={() => console.log('Primary action')}
   onLongPress={() => console.log('Secondary action - show menu')}
 >
-  <TileSpot appearance='icon' icon={Settings} />
+  <Spot appearance='icon' icon={Settings} />
   <TileContent>
     <TileTitle>Settings</TileTitle>
     <TileDescription>Long press for options</TileDescription>
@@ -251,13 +259,13 @@ import { ScrollView } from 'react-native';
 <DoVsDontRow>
   <DoBlockItem
     title='Use TileTrailingContent for additional elements'
-    description='Wrap Tags, labels, or supplementary content inside TileTrailingContent within TileContent for proper 4px spacing.'
+    description='Wrap Tags, labels, or supplementary content inside TileTrailingContent within TileContent for proper spacing.'
   >
 
 ```tsx
 {/* prettier-ignore */}
 <Tile>
-  <TileSpot appearance="icon" icon={Settings} />
+  <Spot appearance="icon" icon={Settings} />
   <TileContent>
     <TileTitle>Title</TileTitle>
     <TileDescription>Description</TileDescription>
@@ -277,7 +285,7 @@ import { ScrollView } from 'react-native';
 ```tsx
 {/* prettier-ignore */}
 <Tile>
-  <TileSpot appearance="icon" icon={Settings} />
+  <Spot appearance="icon" icon={Settings} />
   <TileContent>
     <TileTitle>Title</TileTitle>
     <TileDescription>Description</TileDescription>

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

@@ -1,10 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import React from 'react';
 import { Settings, Plus, User, Apps, ChevronRight } from '../../Symbols';
+import { Spot } from '../Spot';
 import { Tag } from '../Tag/Tag';
 import { Box, Text } from '../Utility';
 import {
   Tile,
-  TileSpot,
   TileContent,
   TileTitle,
   TileDescription,
@@ -14,7 +15,6 @@ import {
 const meta: Meta<typeof Tile> = {
   component: Tile,
   subcomponents: {
-    TileSpot,
     TileContent,
     TileTitle,
     TileDescription,
@@ -61,7 +61,7 @@ export const Base: Story = {
   },
   render: (args) => (
     <Tile {...args} lx={{ maxWidth: 's112' }}>
-      <TileSpot appearance='icon' icon={Settings} />
+      <Spot appearance='icon' icon={Settings} />
       <TileContent>
         <TileTitle>Item with Spot and Description</TileTitle>
         <TileDescription>Additional information</TileDescription>
@@ -73,7 +73,7 @@ export const Base: Story = {
       source: {
         code: `
 <Tile lx={{ maxWidth: 's112' }}>
-  <TileSpot appearance="icon" icon={Settings} />
+  <Spot appearance="icon" icon={Settings} />
   <TileContent>
     <TileTitle>Item with Spot and Description</TileTitle>
     <TileDescription>Additional information</TileDescription>
@@ -89,20 +89,20 @@ export const VariantsShowcase: Story = {
   render: () => (
     <Box lx={{ flexDirection: 'column', gap: 's16' }}>
       <Tile lx={{ maxWidth: 's176' }}>
-        <TileSpot appearance='icon' icon={User} />
+        <Spot appearance='icon' icon={User} />
         <TileContent>
           <TileTitle>User</TileTitle>
           <TileDescription>With description</TileDescription>
         </TileContent>
       </Tile>
       <Tile lx={{ maxWidth: 's176' }}>
-        <TileSpot appearance='icon' icon={Plus} />
+        <Spot appearance='icon' icon={Plus} />
         <TileContent>
           <TileTitle>Without Description</TileTitle>
         </TileContent>
       </Tile>
       <Tile lx={{ maxWidth: 's176' }}>
-        <TileSpot appearance='icon' icon={Settings} />
+        <Spot appearance='icon' icon={Settings} />
         <TileContent>
           <TileTitle>With Trailing Content</TileTitle>
           <TileDescription>Additional information</TileDescription>
@@ -112,7 +112,7 @@ export const VariantsShowcase: Story = {
         </TileContent>
       </Tile>
       <Tile lx={{ maxWidth: 's176' }}>
-        <TileSpot appearance='icon' icon={Settings} />
+        <Spot appearance='icon' icon={Settings} />
         <TileContent>
           <TileTitle>With Trailing Content</TileTitle>
           <TileDescription>Additional information</TileDescription>
@@ -133,7 +133,7 @@ export const WithSecondaryAction: Story = {
       onLongPress={() => alert('Long press - secondary action triggered!')}
       lx={{ maxWidth: 's176' }}
     >
-      <TileSpot appearance='icon' icon={Settings} />
+      <Spot appearance='icon' icon={Settings} />
       <TileContent>
         <TileTitle>Long Press Me</TileTitle>
         <TileDescription>Try long pressing this tile</TileDescription>
@@ -148,7 +148,7 @@ export const WithSecondaryAction: Story = {
   onLongPress={() => alert('Long press - secondary action triggered!')}
   lx={{ maxWidth: 's160' }}
 >
-  <TileSpot appearance="icon" icon={Settings} />
+  <Spot appearance="icon" icon={Settings} />
   <TileContent>
     <TileTitle>Long Press Me</TileTitle>
     <TileDescription>Try long pressing this tile</TileDescription>
@@ -173,7 +173,7 @@ export const HorizontalList: Story = {
       >
         {Array.from({ length: 3 }).map((_, i) => (
           <Tile key={`list-1-${i}`}>
-            <TileSpot appearance='icon' icon={Apps} />
+            <Spot appearance='icon' icon={Apps} />
             <TileContent>
               <TileTitle>Item {i + 1}</TileTitle>
               <TileDescription>Description {i + 1}</TileDescription>
@@ -192,7 +192,7 @@ export const HorizontalList: Story = {
       >
         {Array.from({ length: 5 }).map((_, i) => (
           <Tile key={`list-2-${i}`} lx={{ width: 's128', flexShrink: 0 }}>
-            <TileSpot appearance='icon' icon={Apps} />
+            <Spot appearance='icon' icon={Apps} />
             <TileContent>
               <TileTitle>Item {i + 1}</TileTitle>
               <TileDescription>
@@ -211,7 +211,7 @@ export const ResponsiveLayout: Story = {
     <Box lx={{ width: 'full', flexDirection: 'column', gap: 's16' }}>
       <Box>
         <Tile>
-          <TileSpot appearance='icon' icon={Apps} />
+          <Spot appearance='icon' icon={Apps} />
           <TileContent>
             <TileTitle>Item fill width</TileTitle>
             <TileDescription>Description fill width</TileDescription>
@@ -220,7 +220,7 @@ export const ResponsiveLayout: Story = {
       </Box>
       <Box lx={{ alignItems: 'center', justifyContent: 'center' }}>
         <Tile lx={{ width: 's224' }}>
-          <TileSpot appearance='icon' icon={Plus} />
+          <Spot appearance='icon' icon={Plus} />
           <TileContent>
             <TileTitle>Long Item with fixed width</TileTitle>
             <TileDescription>
@@ -243,14 +243,14 @@ export const AppearanceShowcase: Story = {
         </Box>
         <Box lx={{ flexDirection: 'row', gap: 's16' }}>
           <Tile appearance='no-background' lx={{ width: 's112' }}>
-            <TileSpot appearance='icon' icon={Settings} />
+            <Spot appearance='icon' icon={Settings} />
             <TileContent>
               <TileTitle>Press me</TileTitle>
               <TileDescription>Press state</TileDescription>
             </TileContent>
           </Tile>
           <Tile appearance='no-background' disabled lx={{ width: 's112' }}>
-            <TileSpot appearance='icon' icon={Settings} />
+            <Spot appearance='icon' icon={Settings} disabled />
             <TileContent>
               <TileTitle>Disabled</TileTitle>
               <TileDescription>Disabled state</TileDescription>
@@ -264,14 +264,14 @@ export const AppearanceShowcase: Story = {
         </Box>
         <Box lx={{ flexDirection: 'row', gap: 's16' }}>
           <Tile appearance='card' lx={{ width: 's112' }}>
-            <TileSpot appearance='icon' icon={User} />
+            <Spot appearance='icon' icon={User} />
             <TileContent>
               <TileTitle>Press me</TileTitle>
               <TileDescription>Press state</TileDescription>
             </TileContent>
           </Tile>
           <Tile appearance='card' disabled lx={{ width: 's112' }}>
-            <TileSpot appearance='icon' icon={User} />
+            <Spot appearance='icon' icon={User} disabled />
             <TileContent>
               <TileTitle>Disabled</TileTitle>
               <TileDescription>Disabled state</TileDescription>
@@ -287,7 +287,7 @@ export const CenteredShowcase: Story = {
   render: () => (
     <Box lx={{ flexDirection: 'row', gap: 's8' }}>
       <Tile appearance='card' lx={{ width: 's128' }}>
-        <TileSpot appearance='icon' icon={Apps} />
+        <Spot appearance='icon' icon={Apps} />
         <TileContent>
           <TileTitle>Title</TileTitle>
           <TileDescription>Description</TileDescription>
@@ -297,7 +297,7 @@ export const CenteredShowcase: Story = {
         </TileContent>
       </Tile>
       <Tile appearance='card' lx={{ width: 's128' }}>
-        <TileSpot appearance='icon' icon={Apps} />
+        <Spot appearance='icon' icon={Apps} />
         <TileContent>
           <TileTitle>Title</TileTitle>
           <TileDescription>Description</TileDescription>
@@ -307,7 +307,7 @@ export const CenteredShowcase: Story = {
         </TileContent>
       </Tile>
       <Tile appearance='card' lx={{ width: 's128' }}>
-        <TileSpot appearance='icon' icon={Apps} />
+        <Spot appearance='icon' icon={Apps} />
         <TileContent>
           <TileTitle>Title</TileTitle>
           <TileDescription>Description</TileDescription>
@@ -317,7 +317,7 @@ export const CenteredShowcase: Story = {
         </TileContent>
       </Tile>
       <Tile appearance='card' centered lx={{ width: 's128' }}>
-        <TileSpot appearance='icon' icon={ChevronRight} />
+        <Spot appearance='icon' icon={ChevronRight} />
         <TileContent>
           <TileTitle>Show more</TileTitle>
         </TileContent>
@@ -335,14 +335,14 @@ export const SizeShowcase: Story = {
         </Box>
         <Box lx={{ flexDirection: 'row', gap: 's16' }}>
           <Tile appearance='card' lx={{ width: 's112' }}>
-            <TileSpot appearance='icon' icon={Settings} size={48} />
+            <Spot appearance='icon' icon={Settings} size={48} />
             <TileContent>
               <TileTitle>Settings</TileTitle>
               <TileDescription>Size 48</TileDescription>
             </TileContent>
           </Tile>
           <Tile appearance='card' lx={{ width: 's112' }}>
-            <TileSpot appearance='check' size={48} />
+            <Spot appearance='check' size={48} />
             <TileContent>
               <TileTitle>Check</TileTitle>
               <TileDescription>Size 48</TileDescription>
@@ -356,14 +356,14 @@ export const SizeShowcase: Story = {
         </Box>
         <Box lx={{ flexDirection: 'row', gap: 's16' }}>
           <Tile appearance='card' lx={{ width: 's112' }}>
-            <TileSpot appearance='icon' icon={Settings} size={40} />
+            <Spot appearance='icon' icon={Settings} size={40} />
             <TileContent>
               <TileTitle>Settings</TileTitle>
               <TileDescription>Size 40</TileDescription>
             </TileContent>
           </Tile>
           <Tile appearance='card' lx={{ width: 's112' }}>
-            <TileSpot appearance='check' size={40} />
+            <Spot appearance='check' size={40} />
             <TileContent>
               <TileTitle>Check</TileTitle>
               <TileDescription>Size 40</TileDescription>

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

@@ -8,7 +8,6 @@ import { Tag } from '../Tag';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import {
   Tile,
-  TileSpot,
   TileContent,
   TileTitle,
   TileDescription,
@@ -27,7 +26,7 @@ describe('Tile Component', () => {
       const { getByText, getByTestId } = render(
         <TestWrapper>
           <Tile testID='tile'>
-            <TileSpot appearance='icon' icon={Settings} />
+            <Settings size={24} />
             <TileContent>
               <TileTitle>Test Title</TileTitle>
             </TileContent>
@@ -44,11 +43,13 @@ describe('Tile Component', () => {
       const { getByText } = render(
         <TestWrapper>
           <Tile testID='tile'>
-            <TileSpot appearance='icon' icon={Settings} />
+            <Settings size={24} />
             <TileContent>
               <TileTitle>Test Title</TileTitle>
+              <TileTrailingContent>
+                <Tag label={tagText} />
+              </TileTrailingContent>
             </TileContent>
-            <Tag label={tagText} />
           </Tile>
         </TestWrapper>,
       );
@@ -64,7 +65,7 @@ describe('Tile Component', () => {
       const { getByTestId } = render(
         <TestWrapper>
           <Tile onPress={handlePress} testID='tile'>
-            <TileSpot appearance='icon' icon={Settings} />
+            <Settings size={24} />
             <TileContent>
               <TileTitle>Test Title</TileTitle>
             </TileContent>
@@ -82,7 +83,7 @@ describe('Tile Component', () => {
       const { getByTestId } = render(
         <TestWrapper>
           <Tile onLongPress={handleLongPress} testID='tile'>
-            <TileSpot appearance='icon' icon={Settings} />
+            <Settings size={24} />
             <TileContent>
               <TileTitle>Test Title</TileTitle>
             </TileContent>
@@ -105,7 +106,7 @@ describe('Tile Component', () => {
             onLongPress={handleLongPress}
             testID='tile'
           >
-            <TileSpot appearance='icon' icon={Settings} />
+            <Settings size={24} />
             <TileContent>
               <TileTitle>Test Title</TileTitle>
             </TileContent>
@@ -124,11 +125,11 @@ describe('Tile Component', () => {
   });
 
   describe('Context Propagation', () => {
-    it('should propagate disabled state to TileSpot', () => {
+    it('should propagate disabled state to pressable', () => {
       const { getByTestId } = render(
         <TestWrapper>
           <Tile disabled testID='tile'>
-            <TileSpot appearance='icon' icon={Settings} />
+            <Settings size={24} />
             <TileContent>
               <TileTitle>Test Title</TileTitle>
             </TileContent>
@@ -144,7 +145,7 @@ describe('Tile Component', () => {
       const { getByText } = render(
         <TestWrapper>
           <Tile disabled testID='tile'>
-            <TileSpot appearance='icon' icon={Settings} />
+            <Settings size={24} />
             <TileContent>
               <TileTitle>Test Title</TileTitle>
               <TileDescription>Test Description</TileDescription>
@@ -164,7 +165,7 @@ describe('Tile Component', () => {
       const { getByTestId } = render(
         <TestWrapper>
           <Tile testID='tile' accessibilityLabel={customLabel}>
-            <TileSpot appearance='icon' icon={Settings} />
+            <Settings size={24} />
             <TileContent>
               <TileTitle>Test Title</TileTitle>
             </TileContent>
@@ -180,7 +181,7 @@ describe('Tile Component', () => {
       const { getByTestId } = render(
         <TestWrapper>
           <Tile testID='tile'>
-            <TileSpot appearance='icon' icon={Settings} />
+            <Settings size={24} />
             <TileContent>
               <TileTitle>Test Title</TileTitle>
             </TileContent>
@@ -206,12 +207,14 @@ describe('Tile Component', () => {
             onLongPress={jest.fn()}
             testID='tile'
           >
-            <TileSpot appearance='icon' icon={Settings} />
+            <Settings size={24} />
             <TileContent>
               <TileTitle>Test Title</TileTitle>
               <TileDescription>{description}</TileDescription>
+              <TileTrailingContent>
+                <Tag label={tagText} />
+              </TileTrailingContent>
             </TileContent>
-            <Tag label={tagText} />
           </Tile>
         </TestWrapper>,
       );
@@ -222,127 +225,4 @@ describe('Tile Component', () => {
       expect(getByText(tagText)).toBeTruthy();
     });
   });
-
-  describe('TileTrailingContent', () => {
-    it('should render children correctly', () => {
-      const { getByText } = render(
-        <TestWrapper>
-          <Tile testID='tile'>
-            <TileSpot appearance='icon' icon={Settings} />
-            <TileContent>
-              <TileTitle>Test Title</TileTitle>
-              <TileTrailingContent>
-                <Tag label='Active' />
-              </TileTrailingContent>
-            </TileContent>
-          </Tile>
-        </TestWrapper>,
-      );
-
-      expect(getByText('Active')).toBeTruthy();
-    });
-
-    it('should render with testID', () => {
-      const { getByTestId } = render(
-        <TestWrapper>
-          <Tile testID='tile'>
-            <TileSpot appearance='icon' icon={Settings} />
-            <TileContent>
-              <TileTitle>Test Title</TileTitle>
-              <TileTrailingContent>
-                <Tag label='Active' />
-              </TileTrailingContent>
-            </TileContent>
-          </Tile>
-        </TestWrapper>,
-      );
-
-      expect(getByTestId('tile-trailing-content')).toBeTruthy();
-    });
-
-    it('should have correct styling (4px margin-top and 8px gap)', () => {
-      const { getByTestId } = render(
-        <TestWrapper>
-          <Tile testID='tile'>
-            <TileSpot appearance='icon' icon={Settings} />
-            <TileContent>
-              <TileTitle>Test Title</TileTitle>
-              <TileTrailingContent>
-                <Tag label='First' />
-                <Tag label='Second' />
-              </TileTrailingContent>
-            </TileContent>
-          </Tile>
-        </TestWrapper>,
-      );
-
-      const trailingContent = getByTestId('tile-trailing-content');
-      expect(trailingContent.props.style).toMatchObject({
-        marginTop: 4,
-        gap: 8,
-      });
-    });
-
-    it('should render multiple children', () => {
-      const { getByText } = render(
-        <TestWrapper>
-          <Tile testID='tile'>
-            <TileSpot appearance='icon' icon={Settings} />
-            <TileContent>
-              <TileTitle>Test Title</TileTitle>
-              <TileTrailingContent>
-                <Tag label='First' />
-                <Tag label='Second' />
-              </TileTrailingContent>
-            </TileContent>
-          </Tile>
-        </TestWrapper>,
-      );
-
-      expect(getByText('First')).toBeTruthy();
-      expect(getByText('Second')).toBeTruthy();
-    });
-
-    it('should have full width', () => {
-      const { getByTestId } = render(
-        <TestWrapper>
-          <Tile testID='tile'>
-            <TileSpot appearance='icon' icon={Settings} />
-            <TileContent>
-              <TileTitle>Test Title</TileTitle>
-              <TileTrailingContent>
-                <Tag label='Active' />
-              </TileTrailingContent>
-            </TileContent>
-          </Tile>
-        </TestWrapper>,
-      );
-
-      const trailingContent = getByTestId('tile-trailing-content');
-      expect(trailingContent.props.style).toMatchObject({
-        width: '100%',
-      });
-    });
-
-    it('should center items horizontally', () => {
-      const { getByTestId } = render(
-        <TestWrapper>
-          <Tile testID='tile'>
-            <TileSpot appearance='icon' icon={Settings} />
-            <TileContent>
-              <TileTitle>Test Title</TileTitle>
-              <TileTrailingContent>
-                <Tag label='Active' />
-              </TileTrailingContent>
-            </TileContent>
-          </Tile>
-        </TestWrapper>,
-      );
-
-      const trailingContent = getByTestId('tile-trailing-content');
-      expect(trailingContent.props.style).toMatchObject({
-        alignItems: 'center',
-      });
-    });
-  });
 });