@coinbase/cds-mobile 8.25.1 → 8.26.0

package/esm/cells/__stories__/ListCell.stories.js

@@ -1291,105 +1291,89 @@ const UseCaseShowcase = () => {
 };
 const ListCellScreen = () => {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
+    paddingX: 0,
     children: [/*#__PURE__*/_jsx(Example, {
       inline: true,
-      paddingX: 0,
       title: "Content",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(Content, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
-      paddingX: 0,
       title: "CustomNodes",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(CustomNodes, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
-      paddingX: 0,
       title: "CompactContent(deprecated)",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(CompactContent, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
-      paddingX: 0,
       title: "PressableContent",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(PressableContent, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
-      paddingX: 0,
       title: "CompactPressableContent(deprecated)",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(CompactPressableContent, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
-      paddingX: 0,
       title: "LongContent",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(LongContent, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
-      paddingX: 0,
       title: "PriorityContent",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(PriorityContent, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
-      paddingX: 0,
       title: "WithAccessory",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(WithAccessory, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
-      paddingX: 0,
       title: "WithMedia",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(WithMedia, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
-      paddingX: 0,
       title: "WithActions",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(WithActions, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
-      paddingX: 0,
       title: "Fallback",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(Fallback, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
-      paddingX: 0,
       title: "WithIntermediary",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(WithIntermediary, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
-      paddingX: 0,
       title: "WithHelperText",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(WithHelperText, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
-      paddingX: 0,
       title: "CustomSpacing",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(CustomSpacing, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
-      paddingX: 0,
       title: "CondensedListCell",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(CondensedListCell, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
-      paddingX: 0,
       title: "SpacingVariant",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(SpacingVariant, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
-      paddingX: 0,
       title: "UseCaseShowcase",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(UseCaseShowcase, {})

package/esm/cells/__stories__/ListCellFallback.stories.js

@@ -255,6 +255,7 @@ const Fallbacks = () => {
 };
 const ListCellFallbackScreen = () => {
   return /*#__PURE__*/_jsx(ExampleScreen, {
+    paddingX: 0,
     children: /*#__PURE__*/_jsx(Example, {
       children: /*#__PURE__*/_jsx(Fallbacks, {})
     })

package/esm/chips/Chip.js

@@ -1,4 +1,4 @@
-const _excluded = ["alignSelf", "children", "start", "end", "invertColorScheme", "inverted", "maxWidth", "compact", "gap", "paddingX", "paddingY", "alignItems", "justifyContent", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "styles", "onPress", "font"];
+const _excluded = ["alignSelf", "children", "start", "end", "invertColorScheme", "inverted", "maxWidth", "compact", "gap", "paddingX", "paddingY", "alignItems", "justifyContent", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "styles", "onPress", "color", "font"];
 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, Fragment, memo } from 'react';
@@ -38,6 +38,7 @@ export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_ref
       style,
       styles,
       onPress,
+      color = 'fg',
       font = compact ? 'label1' : 'headline'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -64,11 +65,13 @@ export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_ref
     paddingY: paddingY,
     style: [contentStyle, styles == null ? void 0 : styles.content],
     children: [start, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+      color: color,
       flexShrink: 1,
       font: font,
       numberOfLines: numberOfLines,
       children: children
     }) : children ? /*#__PURE__*/_jsx(Box, {
+      color: color,
       flexShrink: 1,
       children: children
     }) : null, end]

package/esm/chips/SelectChip.js

@@ -11,7 +11,16 @@ import { useA11y } from '../hooks/useA11y';
 import { Icon } from '../icons';
 import { Tray } from '../overlays';
 import { MediaChip } from './MediaChip';
+
+/**
+ * @deprecated This component is deprecated. Please use the new SelectChip alpha component instead.
+ * @see {@link @coinbase/cds-mobile/alpha/select-chip/SelectChip}
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @deprecated This component is deprecated. Please use the new SelectChip alpha component instead.
+ * @see {@link @coinbase/cds-mobile/alpha/select-chip/SelectChip}
+ */
 export const SelectChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   var _ref2;
   let {

package/esm/examples/ExampleScreen.js

@@ -1,76 +1,97 @@
-const _excluded = ["children", "inline", "title", "titlePadding"];
+const _excluded = ["children", "inline", "title", "titlePadding", "hideDivider"],
+  _excluded2 = ["children"];
 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useMemo } from 'react';
-import { ScrollView, View } from 'react-native';
+import React, { createContext, useCallback, useContext, useMemo, useRef } from 'react';
+import { ScrollView } from 'react-native';
+import { gutter } from '@coinbase/cds-common/tokens/sizing';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';
 import { Divider } from '../layout/Divider';
 import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ExampleContext = /*#__PURE__*/createContext({
+  registerExample: () => 0
+});
 export const Example = _ref => {
   let {
       children,
       inline,
       title,
-      titlePadding
+      titlePadding,
+      hideDivider
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const childStyles = useMemo(() => {
-    const style = {
-      paddingTop: 12
-    };
-    if (inline) {
-      style.alignItems = 'flex-start';
-    }
-    return style;
-  }, [inline]);
-  const content = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(Box, _extends({
-      background: "bg",
-      padding: 2,
-      paddingBottom: 3
-    }, props, {
-      children: [!!title && /*#__PURE__*/_jsx(Text, _extends({
-        font: "title3"
-      }, titlePadding, {
-        children: title
-      })), typeof children === 'function' ? children() : React.Children.map(children, (item, index) => /*#__PURE__*/_jsx(View, {
-        style: childStyles,
-        children: item
-      }, index))]
-    })), /*#__PURE__*/_jsx(Divider, {})]
-  });
-  return content;
-};
-const Screen = _ref2 => {
-  let {
-    children
-  } = _ref2;
-  const theme = useTheme();
-  return /*#__PURE__*/_jsxs(ScrollView, {
-    keyboardShouldPersistTaps: "always",
-    persistentScrollbar: false,
-    showsVerticalScrollIndicator: false,
-    style: {
-      backgroundColor: theme.color.bg,
-      height: '100%'
-    },
-    testID: "mobile-playground-scrollview",
-    children: [children, /*#__PURE__*/_jsx(Divider, {
-      testID: "mobile-playground-scrollview-end"
+  const {
+    registerExample
+  } = useContext(ExampleContext);
+
+  // Register exactly once during first render
+  const exampleNumberRef = useRef();
+  if (exampleNumberRef.current === undefined) {
+    exampleNumberRef.current = registerExample();
+  }
+  const exampleLabel = "Example " + exampleNumberRef.current;
+  return /*#__PURE__*/_jsxs(VStack, _extends({
+    accessibilityLabel: exampleLabel,
+    alignItems: inline ? 'flex-start' : undefined,
+    background: "bg",
+    gap: 2,
+    paddingBottom: 3
+  }, props, {
+    children: [!!title && /*#__PURE__*/_jsx(Text, _extends({
+      color: "fgPrimary",
+      font: "title3"
+    }, titlePadding, {
+      children: title
+    })), typeof children === 'function' ? children() : children, !hideDivider && /*#__PURE__*/_jsx(Divider, {
+      background: "bgLine"
     })]
-  });
+  }));
 };
-export const ExampleScreen = _ref3 => {
+export const ExampleScreen = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
-    children
-  } = _ref3;
-  return /*#__PURE__*/_jsxs(VStack, {
-    testID: "mobile-playground-screen",
-    children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Screen, {
-      children: children
-    })]
+      children
+    } = _ref2,
+    boxProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const theme = useTheme();
+
+  // Use ref to track count - this avoids stale closure issues when multiple
+  // Example components mount simultaneously
+  const exampleCountRef = useRef(0);
+  const registerExample = useCallback(() => {
+    exampleCountRef.current += 1;
+    return exampleCountRef.current;
+  }, []);
+  const context = useMemo(() => ({
+    registerExample
+  }), [registerExample]);
+  return /*#__PURE__*/_jsx(ExampleContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(Box, _extends({
+      borderedTop: true,
+      background: "bg",
+      borderColor: "bgLineHeavy",
+      paddingTop: 2,
+      paddingX: gutter,
+      testID: "mobile-playground-screen"
+    }, boxProps, {
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        ref: ref,
+        contentContainerStyle: {
+          flexGrow: 1
+        },
+        keyboardShouldPersistTaps: "always",
+        persistentScrollbar: false,
+        showsVerticalScrollIndicator: false,
+        style: {
+          backgroundColor: theme.color.bg,
+          height: '100%'
+        },
+        children: children
+      })
+    }))
   });
-};
+});
+ExampleScreen.displayName = 'ExampleScreen';

package/esm/icons/__stories__/IconSheet.js

@@ -1,27 +1,49 @@
 import React from 'react';
 import { names } from '@coinbase/cds-icons/names';
-import { HStack, VStack } from '../../layout';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { HStack } from '../../layout';
 import { Icon } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
+const iconVariants = names.map(name => ({
+  name,
+  sizes: ['xs', 's', 'm', 'l']
+}));
+const ICONS_PER_EXAMPLE_GROUP = 12;
+
+// limit number of icon sets per mobile app "Example" to help with scroll stability in UI tests
+const examples = [];
+for (let i = 0; i < iconVariants.length; i += ICONS_PER_EXAMPLE_GROUP) {
+  examples.push(iconVariants.slice(i, i + ICONS_PER_EXAMPLE_GROUP));
+}
 export function IconSheet(_ref) {
   let {
     renderIcon
   } = _ref;
-  return /*#__PURE__*/_jsx(VStack, {
-    children: /*#__PURE__*/_jsx(HStack, {
-      flexWrap: "wrap",
-      gap: 2,
-      children: names.map(item => /*#__PURE__*/_jsx(VStack, {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: examples.map((icons, i, arr) => {
+      return /*#__PURE__*/_jsx(Example, {
+        title: "Icons " + (i + 1) + " of " + arr.length,
         children: /*#__PURE__*/_jsx(HStack, {
+          flexWrap: "wrap",
           gap: 2,
-          paddingBottom: 2,
-          children: ['xs', 's', 'm', 'l'].map(size => renderIcon ? renderIcon(item, size) : /*#__PURE__*/_jsx(Icon, {
-            color: "fg",
-            name: item,
-            size: size
-          }, size))
+          children: icons.map(_ref2 => {
+            let {
+              name,
+              sizes
+            } = _ref2;
+            return /*#__PURE__*/_jsx(HStack, {
+              gap: 2,
+              children: sizes.map(size => {
+                return renderIcon ? renderIcon(name, size) : /*#__PURE__*/_jsx(Icon, {
+                  color: "fg",
+                  name: name,
+                  size: size
+                }, size);
+              })
+            });
+          })
         })
-      }, item))
+      }, "icons-" + i);
     })
   });
 }

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

@@ -1,2 +1,70 @@
-import { getIllustrationSheet } from './getIllustrationSheet';
-export default getIllustrationSheet('heroSquare');
+import React from 'react';
+import { illustrationDimensions, illustrationSizes } from '@coinbase/cds-common/tokens/illustrations';
+import heroSquareVersionMap from '@coinbase/cds-illustrations/__generated__/heroSquare/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 { HeroSquare } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const COLOR_SCHEMES = ['light', 'dark'];
+const ITEMS_PER_EXAMPLE = 8;
+const HERO_SQUARE_SCALE = 0.24;
+const heroSquareDimensionKey = illustrationDimensions.heroSquare[0];
+const [heroSquareWidth, heroSquareHeight] = illustrationSizes[heroSquareDimensionKey];
+const HERO_SQUARE_DIMENSION = heroSquareWidth + "x" + heroSquareHeight;
+const PREVIEW_WIDTH = heroSquareWidth * HERO_SQUARE_SCALE;
+const heroSquareNames = Object.keys(heroSquareVersionMap);
+const heroSquareGroups = [];
+for (let i = 0; i < heroSquareNames.length; i += ITEMS_PER_EXAMPLE) {
+  heroSquareGroups.push(heroSquareNames.slice(i, i + ITEMS_PER_EXAMPLE));
+}
+const HeroSquarePreview = _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(HeroSquare, {
+            dimension: HERO_SQUARE_DIMENSION,
+            name: name,
+            scaleMultiplier: HERO_SQUARE_SCALE
+          })
+        })
+      }, name + "-" + scheme))
+    })]
+  });
+};
+const HeroSquareStory = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: heroSquareGroups.map((group, index, arr) => /*#__PURE__*/_jsx(Example, {
+      title: "Hero Squares " + (index + 1) + " of " + arr.length,
+      children: /*#__PURE__*/_jsx(HStack, {
+        flexWrap: "wrap",
+        gap: 1,
+        children: group.map(name => /*#__PURE__*/_jsx(HeroSquarePreview, {
+          name: name
+        }, name))
+      })
+    }, "hero-square-" + index))
+  });
+};
+export default HeroSquareStory;

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;