@ledgerhq/lumen-ui-rnative 0.1.9 → 0.1.11

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',
-      });
-    });
-  });
 });

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

@@ -1,25 +1,20 @@
 import {
-  createSafeContext,
+  DisabledProvider,
   isTextChildren,
+  useDisabledContext,
 } from '@ledgerhq/lumen-utils-shared';
 import { ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
-import { Spot } from '../Spot';
 import { Box, Pressable, Text } from '../Utility';
 import {
   TileContentProps,
-  TileContextValue,
   TileDescriptionProps,
   TileProps,
-  TileSpotProps,
   TileTitleProps,
   TileTrailingContentProps,
 } from './types';
 
-const [TileProvider, useTileContext] =
-  createSafeContext<TileContextValue>('Tile');
-
 type Appearance = NonNullable<TileProps['appearance']>;
 
 const useRootStyles = ({
@@ -85,12 +80,13 @@ const useRootStyles = ({
  * Do not use it to modify the tile's core appearance (colors, padding, etc). Use the `appearance` prop instead.
  *
  * @example
- * // Basic tile with spot and content
- * import { Tile, TileSpot, TileContent, TileTitle, TileDescription } from '@ledgerhq/lumen-ui-rnative';
+ * // Basic tile with icon and content
+ * import { Tile, TileContent, TileTitle, TileDescription } from '@ledgerhq/lumen-ui-rnative';
+ * import { Spot } from '@ledgerhq/lumen-ui-rnative';
  * import { Wallet } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
  * <Tile appearance="card" onPress={() => console.log('Pressed!')}>
- *   <TileSpot appearance="icon" icon={Wallet} />
+ *   <Spot appearance="icon" icon={Wallet} />
  *   <TileContent>
  *     <TileTitle>My Wallet</TileTitle>
  *     <TileDescription>Description</TileDescription>
@@ -98,30 +94,37 @@ const useRootStyles = ({
  * </Tile>
  *
  * @example
- * // With custom content and long press
- * import { Tile, TileSpot, TileContent, TileTitle, Tag } from '@ledgerhq/lumen-ui-rnative';
+ * // With trailing content (Tags)
+ * import { Tile, TileContent, TileTitle, TileTrailingContent, Tag } from '@ledgerhq/lumen-ui-rnative';
  * import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
  * <Tile appearance="card" onLongPress={() => console.log('Long pressed')}>
- *   <TileSpot appearance="icon" icon={Bitcoin} />
+ *   <Spot appearance="icon" icon={Bitcoin} />
  *   <TileContent>
  *     <TileTitle>Bitcoin</TileTitle>
+ *     <TileTrailingContent>
+ *       <Tag label="Active" />
+ *     </TileTrailingContent>
  *   </TileContent>
- *   <Tag label="Active" />
  * </Tile>
  */
 export const Tile = ({
   lx = {},
   style,
   appearance = 'no-background',
-  disabled = false,
+  disabled: disabledProp = false,
   centered = false,
   children,
   ref,
   ...props
 }: TileProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'Tile',
+    mergeWith: { disabled: disabledProp },
+  });
+
   return (
-    <TileProvider value={{ disabled }}>
+    <DisabledProvider value={{ disabled }}>
       <Pressable
         ref={ref}
         lx={lx}
@@ -137,7 +140,7 @@ export const Tile = ({
         {({ pressed }) => (
           <TilePressableContent
             appearance={appearance}
-            disabled={disabled}
+            disabled={!!disabled}
             pressed={pressed}
             centered={centered}
           >
@@ -145,7 +148,7 @@ export const Tile = ({
           </TilePressableContent>
         )}
       </Pressable>
-    </TileProvider>
+    </DisabledProvider>
   );
 };
 
@@ -168,22 +171,6 @@ const TilePressableContent = ({
   return <View style={styles.container}>{children}</View>;
 };
 
-/**
- * A spot adapter for use within Tile. Automatically inherits the disabled state from the parent Tile.
- *
- * @example
- * <Tile>
- *   <TileSpot appearance="icon" icon={Settings} />
- * </Tile>
- */
-export const TileSpot = ({ size = 48, ...props }: TileSpotProps) => {
-  const { disabled } = useTileContext({
-    consumerName: 'TileSpot',
-    contextRequired: true,
-  });
-  return <Spot {...props} size={size} disabled={disabled} />;
-};
-
 const useContentStyles = () => {
   return useStyleSheet(
     (t) => ({
@@ -195,17 +182,18 @@ const useContentStyles = () => {
     [],
   );
 };
-TileSpot.displayName = 'TileSpot';
-
 /**
- * A container for grouping TileTitle and TileDescription with consistent spacing.
+ * A container for grouping TileTitle, TileDescription and TileTrailingContent with consistent spacing.
  * Use this to wrap text content within a Tile.
  *
  * @example
  * <Tile>
  *   <TileContent>
  *     <TileTitle>My Title</TileTitle>
- *     <TileDescription>My Description</TileDescription>
+ *     <TileDescription>Description</TileDescription>
+ *     <TileTrailingContent>
+ *       <Tag label="Active" />
+ *     </TileTrailingContent>
  *   </TileContent>
  * </Tile>
  */
@@ -250,7 +238,7 @@ const useTitleStyles = ({ disabled }: { disabled: boolean }) => {
  * If children is a string, it will be automatically wrapped in a Text component.
  */
 export const TileTitle = ({ children, lx, style }: TileTitleProps) => {
-  const { disabled } = useTileContext({
+  const disabled = useDisabledContext({
     consumerName: 'TileTitle',
     contextRequired: true,
   });
@@ -320,7 +308,7 @@ export const TileDescription = ({
   lx,
   style,
 }: TileDescriptionProps) => {
-  const { disabled } = useTileContext({
+  const disabled = useDisabledContext({
     consumerName: 'TileDescription',
     contextRequired: true,
   });

package/src/lib/Components/Tile/index.ts

@@ -1,6 +1,5 @@
 export {
   Tile,
-  TileSpot,
   TileContent,
   TileTitle,
   TileDescription,

package/src/lib/Components/Tile/types.ts

@@ -4,14 +4,11 @@ import {
   StyledTextProps,
   StyledViewProps,
 } from '../../../styles';
-import { DiscriminatedSpotProps, SpotSize } from '../Spot/types';
 
 export type TileContextValue = {
   disabled: boolean;
 };
 
-export type TileSpotSize = Extract<SpotSize, 40 | 48>;
-
 export type TileProps = {
   /**
    * The visual style of the tile.
@@ -47,14 +44,6 @@ export type TileProps = {
   children: ReactNode;
 } & Omit<StyledPressableProps, 'onPress' | 'onLongPress' | 'disabled'>;
 
-export type TileSpotProps = {
-  /**
-   * The size of the spot.
-   * @default 48
-   */
-  size?: 40 | 48;
-} & DiscriminatedSpotProps;
-
 export type TileContentProps = {
   /**
    * The children to display inside the tile content area.