@coinbase/cds-mobile 8.25.0 → 8.26.0

package/esm/illustrations/__stories__/SpotRectangle.stories.js

@@ -1,2 +1,68 @@
-import { getIllustrationSheet } from './getIllustrationSheet';
-export default getIllustrationSheet('spotRectangle');
+import React from 'react';
+import { illustrationDimensions, illustrationSizes } from '@coinbase/cds-common/tokens/illustrations';
+import spotRectangleVersionMap from '@coinbase/cds-illustrations/__generated__/spotRectangle/data/versionMap';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { HStack, VStack } from '../../layout';
+import { ThemeProvider } from '../../system/ThemeProvider';
+import { defaultTheme } from '../../themes/defaultTheme';
+import { Text } from '../../typography/Text';
+import { SpotRectangle } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const COLOR_SCHEMES = ['light', 'dark'];
+const ITEMS_PER_EXAMPLE = 12;
+const SPOT_RECTANGLE_SCALE = 0.3;
+const spotRectangleDimension = illustrationDimensions.spotRectangle[0];
+const [spotRectangleWidth] = illustrationSizes[spotRectangleDimension];
+const PREVIEW_WIDTH = spotRectangleWidth * SPOT_RECTANGLE_SCALE;
+const spotRectangleNames = Object.keys(spotRectangleVersionMap);
+const spotRectangleGroups = [];
+for (let i = 0; i < spotRectangleNames.length; i += ITEMS_PER_EXAMPLE) {
+  spotRectangleGroups.push(spotRectangleNames.slice(i, i + ITEMS_PER_EXAMPLE));
+}
+const SpotRectanglePreview = _ref => {
+  let {
+    name
+  } = _ref;
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 0,
+    style: {
+      width: PREVIEW_WIDTH * COLOR_SCHEMES.length
+    },
+    children: [/*#__PURE__*/_jsx(Text, {
+      ellipsize: "tail",
+      font: "legal",
+      numberOfLines: 1,
+      children: name
+    }), /*#__PURE__*/_jsx(HStack, {
+      gap: 0,
+      children: COLOR_SCHEMES.map(scheme => /*#__PURE__*/_jsx(ThemeProvider, {
+        activeColorScheme: scheme,
+        theme: defaultTheme,
+        children: /*#__PURE__*/_jsx(VStack, {
+          background: "bg",
+          overflow: "hidden",
+          width: PREVIEW_WIDTH,
+          children: /*#__PURE__*/_jsx(SpotRectangle, {
+            name: name,
+            scaleMultiplier: SPOT_RECTANGLE_SCALE
+          })
+        })
+      }, name + "-" + scheme))
+    })]
+  });
+};
+const SpotRectangleStory = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: spotRectangleGroups.map((group, index, arr) => /*#__PURE__*/_jsx(Example, {
+      title: "Spot Rectangles " + (index + 1) + " of " + arr.length,
+      children: /*#__PURE__*/_jsx(HStack, {
+        flexWrap: "wrap",
+        gap: 1,
+        children: group.map(name => /*#__PURE__*/_jsx(SpotRectanglePreview, {
+          name: name
+        }, name))
+      })
+    }, "spot-rectangles-" + index))
+  });
+};
+export default SpotRectangleStory;

package/esm/illustrations/__stories__/SpotSquare.stories.js

@@ -1,2 +1,68 @@
-import { getIllustrationSheet } from './getIllustrationSheet';
-export default getIllustrationSheet('spotSquare');
+import React from 'react';
+import { illustrationDimensions, illustrationSizes } from '@coinbase/cds-common/tokens/illustrations';
+import spotSquareVersionMap from '@coinbase/cds-illustrations/__generated__/spotSquare/data/versionMap';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { HStack, VStack } from '../../layout';
+import { ThemeProvider } from '../../system/ThemeProvider';
+import { defaultTheme } from '../../themes/defaultTheme';
+import { Text } from '../../typography/Text';
+import { SpotSquare } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const COLOR_SCHEMES = ['light', 'dark'];
+const ITEMS_PER_EXAMPLE = 16;
+const SPOT_SQUARE_SCALE = 0.4;
+const spotSquareDimensionKey = illustrationDimensions.spotSquare[0];
+const [spotSquareWidth] = illustrationSizes[spotSquareDimensionKey];
+const PREVIEW_WIDTH = spotSquareWidth * SPOT_SQUARE_SCALE;
+const spotSquareNames = Object.keys(spotSquareVersionMap);
+const spotSquareGroups = [];
+for (let i = 0; i < spotSquareNames.length; i += ITEMS_PER_EXAMPLE) {
+  spotSquareGroups.push(spotSquareNames.slice(i, i + ITEMS_PER_EXAMPLE));
+}
+const SpotSquarePreview = _ref => {
+  let {
+    name
+  } = _ref;
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 0,
+    style: {
+      width: PREVIEW_WIDTH * COLOR_SCHEMES.length
+    },
+    children: [/*#__PURE__*/_jsx(Text, {
+      ellipsize: "tail",
+      font: "legal",
+      numberOfLines: 1,
+      children: name
+    }), /*#__PURE__*/_jsx(HStack, {
+      gap: 0,
+      children: COLOR_SCHEMES.map(scheme => /*#__PURE__*/_jsx(ThemeProvider, {
+        activeColorScheme: scheme,
+        theme: defaultTheme,
+        children: /*#__PURE__*/_jsx(VStack, {
+          background: "bg",
+          overflow: "hidden",
+          width: PREVIEW_WIDTH,
+          children: /*#__PURE__*/_jsx(SpotSquare, {
+            name: name,
+            scaleMultiplier: SPOT_SQUARE_SCALE
+          })
+        })
+      }, name + "-" + scheme))
+    })]
+  });
+};
+const SpotSquareStory = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: spotSquareGroups.map((group, index, arr) => /*#__PURE__*/_jsx(Example, {
+      title: "Spot Squares " + (index + 1) + " of " + arr.length,
+      children: /*#__PURE__*/_jsx(HStack, {
+        flexWrap: "wrap",
+        gap: 1,
+        children: group.map(name => /*#__PURE__*/_jsx(SpotSquarePreview, {
+          name: name
+        }, name))
+      })
+    }, "spot-square-" + index))
+  });
+};
+export default SpotSquareStory;

package/esm/media/__stories__/CarouselMedia.stories.js

@@ -1,5 +1,4 @@
 import React, { memo, useCallback, useMemo, useRef } from 'react';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { useIndexCounter } from '@coinbase/cds-common/hooks/useIndexCounter';
 import { svgs } from '@coinbase/cds-common/internal/data/assets';
 import { Button } from '../../buttons';
@@ -173,10 +172,8 @@ const DynamicItemsExample = () => {
   });
 };
 const CarouselScreen = () => {
-  return /*#__PURE__*/_jsx(SafeAreaProvider, {
-    children: /*#__PURE__*/_jsxs(ExampleScreen, {
-      children: [/*#__PURE__*/_jsx(ProgressBarsExample, {}), /*#__PURE__*/_jsx(DynamicItemsExample, {}), /*#__PURE__*/_jsx(SimpleExample, {}), /*#__PURE__*/_jsx(UpdateOnMountExample, {}), /*#__PURE__*/_jsx(TriggerViaButton, {})]
-    })
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(ProgressBarsExample, {}), /*#__PURE__*/_jsx(DynamicItemsExample, {}), /*#__PURE__*/_jsx(SimpleExample, {}), /*#__PURE__*/_jsx(UpdateOnMountExample, {}), /*#__PURE__*/_jsx(TriggerViaButton, {})]
   });
 };
 export default CarouselScreen;

package/esm/numpad/__stories__/Numpad.stories.js

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import { Banner } from '../../banner/Banner';
 import { Button, ButtonGroup } from '../../buttons';
 import { TextInput } from '../../controls';
-import { ExampleScreen } from '../../examples/ExampleScreen';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { useSafeBottomPadding } from '../../hooks/useSafeBottomPadding';
 import { useTheme } from '../../hooks/useTheme';
 import { Box, HStack, VStack } from '../../layout';
@@ -220,10 +220,13 @@ const NumpadExample2 = () => {
 };
 const NumpadScreen = () => {
   return /*#__PURE__*/_jsx(ExampleScreen, {
-    children: /*#__PURE__*/_jsxs(VStack, {
-      gap: 2,
-      padding: 2,
-      children: [/*#__PURE__*/_jsx(NumpadExample1, {}), /*#__PURE__*/_jsx(NumpadExample2, {})]
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Numpad Examples",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        padding: 2,
+        children: [/*#__PURE__*/_jsx(NumpadExample1, {}), /*#__PURE__*/_jsx(NumpadExample2, {})]
+      })
     })
   });
 };

package/esm/page/__stories__/PageFooter.stories.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import { View } from 'react-native';
 import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
 import { Button, ButtonGroup } from '../../buttons';
-import { ExampleScreen } from '../../examples/ExampleScreen';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Icon } from '../../icons';
 import { Divider } from '../../layout';
 import { PageFooter } from '../PageFooter';
@@ -41,8 +40,10 @@ const exampleProps = {
   })
 };
 const PageFooterScreen = () => {
-  return /*#__PURE__*/_jsx(View, {
-    children: /*#__PURE__*/_jsxs(ExampleScreen, {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    paddingX: 0,
+    children: /*#__PURE__*/_jsxs(Example, {
+      gap: 0,
       children: [/*#__PURE__*/_jsx(PageFooter, {
         action: exampleProps.endButton,
         background: "bgPrimaryWash"

package/esm/page/__stories__/PageFooterInPage.stories.js

@@ -1,11 +1,10 @@
 import React from 'react';
-import { View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
 import { Button, ButtonGroup } from '../../buttons';
-import { ExampleScreen } from '../../examples/ExampleScreen';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Icon } from '../../icons';
-import { VStack } from '../../layout';
+import { Box, VStack } from '../../layout';
 import { Text } from '../../typography/Text';
 import { PageFooter } from '../PageFooter';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -50,13 +49,15 @@ const exampleProps = {
 };
 const PageFooterInPageScreen = () => {
   const inset = useSafeAreaInsets();
-  return /*#__PURE__*/_jsxs(View, {
-    children: [/*#__PURE__*/_jsx(ExampleScreen, {
-      children: /*#__PURE__*/_jsx(VStack, {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    paddingX: 0,
+    children: /*#__PURE__*/_jsxs(Example, {
+      hideDivider: true,
+      height: "100%",
+      children: [/*#__PURE__*/_jsx(VStack, {
         alignContent: "center",
         alignItems: "center",
         dangerouslySetBackground: "#FADADD",
-        flexGrow: 1,
         gap: 0,
         justifyContent: "center",
         left: 0,
@@ -65,18 +66,18 @@ const PageFooterInPageScreen = () => {
           font: "title1",
           children: "Primary Content"
         })
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: {
-        position: 'absolute',
-        bottom: inset.bottom / 2,
-        left: 0,
-        right: 0
-      },
-      children: /*#__PURE__*/_jsx(PageFooter, {
-        action: exampleProps.endButtons2
-      })
-    })]
+      }), /*#__PURE__*/_jsx(Box, {
+        style: {
+          position: 'absolute',
+          bottom: inset.bottom / 2,
+          left: 0,
+          right: 0
+        },
+        children: /*#__PURE__*/_jsx(PageFooter, {
+          action: exampleProps.endButtons2
+        })
+      })]
+    })
   });
 };
 export default PageFooterInPageScreen;

package/esm/page/__stories__/PageHeader.stories.js

@@ -1,10 +1,9 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
-import { View } from 'react-native';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
 import { Button, ButtonGroup, IconButton } from '../../buttons';
-import { ExampleScreen } from '../../examples/ExampleScreen';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { useTheme } from '../../hooks/useTheme';
 import { LogoMark } from '../../icons';
 import { Box, Divider, HStack, VStack } from '../../layout';
@@ -137,8 +136,9 @@ const PageHeaderScreen = () => {
       paddingStart: theme.space[1.5]
     }
   };
-  return /*#__PURE__*/_jsx(View, {
-    children: /*#__PURE__*/_jsx(ExampleScreen, {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "PageHeader Variants",
       children: /*#__PURE__*/_jsxs(VStack, {
         gap: 3,
         children: [/*#__PURE__*/_jsx(PageHeader, {

package/esm/page/__stories__/PageHeaderInErrorEmptyState.stories.js

@@ -1,9 +1,8 @@
 import React from 'react';
-import { View } from 'react-native';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
 import { IconButton } from '../../buttons';
-import { ExampleScreen } from '../../examples/ExampleScreen';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { LogoMark } from '../../icons';
 import { SpotSquare } from '../../illustrations';
 import { Box, VStack } from '../../layout';
@@ -31,8 +30,11 @@ const exampleProps = {
   })
 };
 const PageHeaderInErrorEmptyState = () => {
-  return /*#__PURE__*/_jsx(View, {
-    children: /*#__PURE__*/_jsx(ExampleScreen, {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      hideDivider: true,
+      height: "100%",
+      title: "Error/Empty State",
       children: /*#__PURE__*/_jsxs(VStack, {
         gap: 0,
         width: "100%",

package/esm/page/__stories__/PageHeaderInPage.stories.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import { View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
 import { Button, ButtonGroup, IconButton } from '../../buttons';
-import { ExampleScreen } from '../../examples/ExampleScreen';
-import { VStack } from '../../layout';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Box, VStack } from '../../layout';
 import { Text } from '../../typography/Text';
 import { PageFooter } from '../PageFooter';
 import { PageHeader } from '../PageHeader';
@@ -33,9 +32,12 @@ const exampleProps = {
 };
 const PageHeaderInPage = () => {
   const inset = useSafeAreaInsets();
-  return /*#__PURE__*/_jsxs(View, {
-    children: [/*#__PURE__*/_jsx(ExampleScreen, {
-      children: /*#__PURE__*/_jsxs(VStack, {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    paddingX: 0,
+    children: /*#__PURE__*/_jsxs(Example, {
+      hideDivider: true,
+      height: "100%",
+      children: [/*#__PURE__*/_jsxs(VStack, {
         gap: 0,
         width: "100%",
         children: [/*#__PURE__*/_jsx(PageHeader, {
@@ -62,18 +64,18 @@ const PageHeaderInPage = () => {
             children: "Primary Content"
           })
         })]
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: {
-        position: 'absolute',
-        bottom: inset.bottom / 2,
-        left: 0,
-        right: 0
-      },
-      children: /*#__PURE__*/_jsx(PageFooter, {
-        action: exampleProps.endButtons
-      })
-    })]
+      }), /*#__PURE__*/_jsx(Box, {
+        style: {
+          position: 'absolute',
+          bottom: inset.bottom / 2,
+          left: 0,
+          right: 0
+        },
+        children: /*#__PURE__*/_jsx(PageFooter, {
+          action: exampleProps.endButtons
+        })
+      })]
+    })
   });
 };
 export default PageHeaderInPage;

package/esm/section-header/__stories__/SectionHeader.stories.js

@@ -1,12 +1,11 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useState } from 'react';
-import { View } from 'react-native';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
 import { Button, IconButton } from '../../buttons';
 import { SelectChip } from '../../chips/SelectChip';
 import { SearchInput, SelectOption } from '../../controls';
-import { ExampleScreen } from '../../examples/ExampleScreen';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Icon } from '../../icons';
 import { Divider, HStack } from '../../layout';
 import { RemoteImage } from '../../media';
@@ -62,8 +61,9 @@ const SelectChipDropdown = () => {
   });
 };
 const SectionHeaderScreen = () => {
-  return /*#__PURE__*/_jsx(View, {
-    children: /*#__PURE__*/_jsxs(ExampleScreen, {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsxs(Example, {
+      title: "SectionHeader Variants",
       children: [/*#__PURE__*/_jsx(SectionHeader, {
         title: "SectionHeader"
       }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(SectionHeader, _extends({}, defaultProps, {

package/esm/sticky-footer/__stories__/StickyFooter.stories.js

@@ -12,14 +12,12 @@ const StickyFooterScreen = () => {
     setShowStickyFooter(!showStickyFooter);
   }, [showStickyFooter]);
   const inset = useSafeAreaInsets();
-  return /*#__PURE__*/_jsxs(View, {
-    children: [/*#__PURE__*/_jsx(ExampleScreen, {
-      children: /*#__PURE__*/_jsx(Example, {
-        title: "StickyFooter with Screen",
-        children: /*#__PURE__*/_jsx(Button, {
-          onPress: handleButtonPress,
-          children: showStickyFooter ? 'Close' : 'Open'
-        })
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "StickyFooter with Screen",
+      children: /*#__PURE__*/_jsx(Button, {
+        onPress: handleButtonPress,
+        children: showStickyFooter ? 'Close' : 'Open'
       })
     }), showStickyFooter && /*#__PURE__*/_jsx(View, {
       style: {

package/esm/tour/__stories__/Tour.stories.js

@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { Button as NativeButton, Image } from 'react-native';
-import { ScrollView } from 'react-native-gesture-handler';
 import { ethBackground } from '@coinbase/cds-common/internal/data/assets';
 import { useTourContext } from '@coinbase/cds-common/tour/TourContext';
 import { Button } from '../../buttons';
@@ -250,171 +249,19 @@ const TourStory = () => {
       });
     }
   }], []);
-  return /*#__PURE__*/_jsx(Tour, {
-    activeTourStep: activeTourStep,
-    onChange: setActiveTourStep,
-    steps: tourSteps,
-    children: /*#__PURE__*/_jsx(ScrollView, {
-      ref: scrollViewRef,
-      style: {
-        flex: 1
-      },
-      children: /*#__PURE__*/_jsx(ExampleScreen, {
-        children: /*#__PURE__*/_jsx(Example, {
-          children: /*#__PURE__*/_jsx(TourExamples, {
-            ids: ['step1', 'step2', 'step3', 'step4'],
-            step2Ref: step2Ref,
-            step3Ref: step3Ref,
-            step4Ref: step4Ref
-          })
-        })
-      })
-    })
-  });
-};
-export const TourWithStringLiteralIdStory = () => {
-  const [activeTourStep, setActiveTourStep] = useState(null);
-  const scrollViewRef = useRef(null);
-  const step2Ref = useRef(null);
-  const step3Ref = useRef(null);
-  const step4Ref = useRef(null);
-  const complexIdTourSteps = useMemo(() => [{
-    id: 'step-id-1',
-    onBeforeActive: () => console.log('step1 before'),
-    Component: StepOne
-  }, {
-    id: 'step-id-2',
-    arrowColor: 'yellow',
-    onBeforeActive: async () => {
-      console.log('step2 before');
-      await scrollIntoView(scrollViewRef, step2Ref);
-    },
-    Component: () => {
-      const {
-        goNextTourStep,
-        stopTour
-      } = useTourContext();
-      return /*#__PURE__*/_jsx(Coachmark, {
-        action: /*#__PURE__*/_jsx(Button, {
-          compact: true,
-          onPress: goNextTourStep,
-          variant: "secondary",
-          children: "Next"
-        }),
-        closeButtonAccessibilityLabel: "Close",
-        content: /*#__PURE__*/_jsxs(VStack, {
-          gap: 2,
-          children: [/*#__PURE__*/_jsx(Text, {
-            color: "fgMuted",
-            font: "caption",
-            children: "50%"
-          }), /*#__PURE__*/_jsx(ProgressBar, {
-            progress: 0.5
-          }), /*#__PURE__*/_jsx(Text, {
-            font: "body",
-            children: "Add up to 3 lines of body copy. Deliver your message with clarity and impact"
-          })]
-        }),
-        media: /*#__PURE__*/_jsx(Image, {
-          accessibilityIgnoresInvertColors: true,
-          source: {
-            uri: ethBackground
-          },
-          style: {
-            width: '100%',
-            height: 150
-          }
-        }),
-        onClose: stopTour,
-        title: "My second step"
-      });
-    }
-  }, {
-    id: 'step-id-3',
-    onBeforeActive: async () => {
-      console.log('step3 before');
-      await scrollIntoView(scrollViewRef, step3Ref);
-    },
-    Component: () => {
-      const {
-        stopTour,
-        goNextTourStep,
-        goPreviousTourStep
-      } = useTourContext();
-      return /*#__PURE__*/_jsx(Coachmark, {
-        action: /*#__PURE__*/_jsxs(HStack, {
-          gap: 1,
-          children: [/*#__PURE__*/_jsx(Button, {
-            compact: true,
-            onPress: goPreviousTourStep,
-            variant: "secondary",
-            children: "Back"
-          }), /*#__PURE__*/_jsx(Button, {
-            compact: true,
-            onPress: goNextTourStep,
-            variant: "secondary",
-            children: "Next"
-          }), /*#__PURE__*/_jsx(Button, {
-            compact: true,
-            onPress: stopTour,
-            variant: "secondary",
-            children: "Done"
-          })]
-        }),
-        content: "Add up to 3 lines of body copy. Deliver your message with clarity and impact",
-        title: "My third step",
-        width: 350
-      });
-    }
-  }, {
-    id: 'step-id-4',
-    onBeforeActive: async () => {
-      console.log('step4 before');
-      await scrollIntoView(scrollViewRef, step4Ref);
-    },
-    Component: () => {
-      const {
-        stopTour,
-        goPreviousTourStep
-      } = useTourContext();
-      return /*#__PURE__*/_jsx(Coachmark, {
-        action: /*#__PURE__*/_jsxs(HStack, {
-          gap: 1,
-          children: [/*#__PURE__*/_jsx(Button, {
-            compact: true,
-            onPress: goPreviousTourStep,
-            variant: "secondary",
-            children: "Back"
-          }), /*#__PURE__*/_jsx(Button, {
-            compact: true,
-            onPress: stopTour,
-            variant: "secondary",
-            children: "Done"
-          })]
-        }),
-        content: "Add up to 3 lines of body copy. Deliver your message with clarity and impact",
-        title: "My last step",
-        width: 250
-      });
-    }
-  }], []);
-  return /*#__PURE__*/_jsx(Tour, {
-    activeTourStep: activeTourStep,
-    onChange: setActiveTourStep,
-    steps: complexIdTourSteps,
-    children: /*#__PURE__*/_jsx(ScrollView, {
-      ref: scrollViewRef,
-      style: {
-        flex: 1
-      },
-      children: /*#__PURE__*/_jsx(ExampleScreen, {
-        children: /*#__PURE__*/_jsx(Example, {
-          children: /*#__PURE__*/_jsx(TourExamples, {
-            ids: complexIdTourSteps.map(s => s.id),
-            step2Ref: step2Ref,
-            step3Ref: step3Ref,
-            step4Ref: step4Ref
-          })
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    ref: scrollViewRef,
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Tour Example",
+      children: /*#__PURE__*/_jsx(Tour, {
+        activeTourStep: activeTourStep,
+        onChange: setActiveTourStep,
+        steps: tourSteps,
+        children: /*#__PURE__*/_jsx(TourExamples, {
+          ids: ['step1', 'step2', 'step3', 'step4'],
+          step2Ref: step2Ref,
+          step3Ref: step3Ref,
+          step4Ref: step4Ref
         })
       })
     })

package/esm/typography/__stories__/TextBody.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextBody } from '../TextBody';
 import TextExamplesScreen from './TextExamples';
+
+// eslint-disable-next-line internal/example-screen-default
 import { jsx as _jsx } from "react/jsx-runtime";
 export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
   component: TextBody

package/esm/typography/__stories__/TextCaption.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextCaption } from '../TextCaption';
 import TextExamplesScreen from './TextExamples';
+
+// eslint-disable-next-line internal/example-screen-default
 import { jsx as _jsx } from "react/jsx-runtime";
 export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
   component: TextCaption

package/esm/typography/__stories__/TextCore.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Text } from '../Text';
 import TextExamplesScreen from './TextExamples';
+
+// eslint-disable-next-line internal/example-screen-default
 import { jsx as _jsx } from "react/jsx-runtime";
 export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
   component: Text