@coinbase/cds-mobile 8.25.1 → 8.27.0

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

@@ -1,2 +1,70 @@
-import { getIllustrationSheet } from './getIllustrationSheet';
-export default getIllustrationSheet('pictogram');
+import React from 'react';
+import { illustrationDimensions, illustrationSizes } from '@coinbase/cds-common/tokens/illustrations';
+import pictogramVersionMap from '@coinbase/cds-illustrations/__generated__/pictogram/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 { Pictogram } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const COLOR_SCHEMES = ['light', 'dark'];
+const ITEMS_PER_EXAMPLE = 12;
+const PICTOGRAM_SCALE = 1;
+const pictogramDimensionKey = illustrationDimensions.pictogram[0];
+const [pictogramWidth, pictogramHeight] = illustrationSizes[pictogramDimensionKey];
+const PICTOGRAM_DIMENSION = pictogramWidth + "x" + pictogramHeight;
+const PREVIEW_WIDTH = pictogramWidth * PICTOGRAM_SCALE;
+const pictogramNames = Object.keys(pictogramVersionMap);
+const pictogramGroups = [];
+for (let i = 0; i < pictogramNames.length; i += ITEMS_PER_EXAMPLE) {
+  pictogramGroups.push(pictogramNames.slice(i, i + ITEMS_PER_EXAMPLE));
+}
+const PictogramPreview = _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(Pictogram, {
+            dimension: PICTOGRAM_DIMENSION,
+            name: name,
+            scaleMultiplier: PICTOGRAM_SCALE
+          })
+        })
+      }, name + "-" + scheme))
+    })]
+  });
+};
+const PictogramStory = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: pictogramGroups.map((group, index, arr) => /*#__PURE__*/_jsx(Example, {
+      title: "Pictograms " + (index + 1) + " of " + arr.length,
+      children: /*#__PURE__*/_jsx(HStack, {
+        flexWrap: "wrap",
+        gap: 1,
+        children: group.map(name => /*#__PURE__*/_jsx(PictogramPreview, {
+          name: name
+        }, name))
+      })
+    }, "pictogram-" + index))
+  });
+};
+export default PictogramStory;

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

@@ -1,2 +1,70 @@
-import { getIllustrationSheet } from './getIllustrationSheet';
-export default getIllustrationSheet('spotIcon');
+import React from 'react';
+import { illustrationDimensions, illustrationSizes } from '@coinbase/cds-common/tokens/illustrations';
+import spotIconVersionMap from '@coinbase/cds-illustrations/__generated__/spotIcon/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 { SpotIcon } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const COLOR_SCHEMES = ['light', 'dark'];
+const ITEMS_PER_EXAMPLE = 20;
+const SPOT_ICON_SCALE = 1;
+const spotIconDimensionKey = illustrationDimensions.spotIcon[0];
+const [spotIconWidth, spotIconHeight] = illustrationSizes[spotIconDimensionKey];
+const SPOT_ICON_DIMENSION = spotIconWidth + "x" + spotIconHeight;
+const PREVIEW_WIDTH = spotIconWidth * SPOT_ICON_SCALE;
+const spotIconNames = Object.keys(spotIconVersionMap);
+const spotIconGroups = [];
+for (let i = 0; i < spotIconNames.length; i += ITEMS_PER_EXAMPLE) {
+  spotIconGroups.push(spotIconNames.slice(i, i + ITEMS_PER_EXAMPLE));
+}
+const SpotIconPreview = _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(SpotIcon, {
+            dimension: SPOT_ICON_DIMENSION,
+            name: name,
+            scaleMultiplier: SPOT_ICON_SCALE
+          })
+        })
+      }, name + "-" + scheme))
+    })]
+  });
+};
+const SpotIconStory = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: spotIconGroups.map((group, index, arr) => /*#__PURE__*/_jsx(Example, {
+      title: "Spot Icons " + (index + 1) + " of " + arr.length,
+      children: /*#__PURE__*/_jsx(HStack, {
+        flexWrap: "wrap",
+        gap: 1,
+        children: group.map(name => /*#__PURE__*/_jsx(SpotIconPreview, {
+          name: name
+        }, name))
+      })
+    }, "spot-icon-" + index))
+  });
+};
+export default SpotIconStory;

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: {