@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/icons/__figma__/LogoMark.figma.js

@@ -0,0 +1,20 @@
+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 { figma } from '@figma/code-connect';
+import { LogoMark } from '../LogoMark';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(LogoMark, 'https://www.figma.com/design/46lNmiV1z8I888My5kNq7R/%E2%9C%A8-Logos?node-id=1268-157', {
+  imports: ["import { LogoMark } from '@coinbase/cds-mobile/icons/LogoMark';"],
+  props: {
+    size: figma.enum('size', {
+      'l (32)': 32,
+      'm (24)': 24,
+      's (16)': 16
+    }),
+    foreground: figma.enum('color', {
+      primary: undefined,
+      foreground: true
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(LogoMark, _extends({}, props))
+});

package/esm/icons/__figma__/LogoWordmark.figma.js

@@ -0,0 +1,32 @@
+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 { figma } from '@figma/code-connect';
+import { ThemeProvider } from '../../system';
+import { defaultTheme } from '../../themes/defaultTheme';
+import { LogoWordmark } from '../LogoWordmark';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(LogoWordmark, 'https://www.figma.com/design/46lNmiV1z8I888My5kNq7R/%E2%9C%A8-Logos?node-id=1269-502', {
+  imports: ["import { LogoWordmark } from '@coinbase/cds-mobile/icons/LogoWordmark';"],
+  props: {
+    foreground: figma.enum('color', {
+      primary: undefined,
+      foreground: true,
+      'primary Foreground': undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(LogoWordmark, _extends({}, props))
+});
+figma.connect(LogoWordmark, 'https://www.figma.com/design/46lNmiV1z8I888My5kNq7R/%E2%9C%A8-Logos?node-id=1269-502', {
+  imports: ["import { LogoWordmark } from '@coinbase/cds-mobile/icons/LogoWordmark';", "import { defaultTheme } from '@coinbase/cds-mobile/themes/defaultTheme';"],
+  variant: {
+    color: 'primary Foreground'
+  },
+  props: {},
+  example: props => /*#__PURE__*/_jsx(ThemeProvider, {
+    activeColorScheme: "dark",
+    theme: defaultTheme,
+    children: /*#__PURE__*/_jsx(LogoWordmark, _extends({
+      foreground: true
+    }, props))
+  })
+});

package/esm/icons/__figma__/SubBrandLogoMark.figma.js

@@ -0,0 +1,47 @@
+const _excluded = ["foreground"];
+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 from 'react';
+import { figma } from '@figma/code-connect';
+import { SubBrandLogoMark } from '../SubBrandLogoMark';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(SubBrandLogoMark, 'https://www.figma.com/design/46lNmiV1z8I888My5kNq7R/%E2%9C%A8-Logos?node-id=1268-16', {
+  imports: ["import { SubBrandLogoMark } from '@coinbase/cds-mobile/icons/SubBrandLogoMark';"],
+  props: {
+    foreground: figma.nestedProps('Logo Mark', {
+      color: figma.enum('color', {
+        primary: undefined,
+        foreground: true
+      })
+    }),
+    type: figma.enum('product', {
+      // advanced: 'advanced',
+      account: 'account',
+      base: 'base',
+      card: 'card',
+      // 'developer platform': 'developerPlatform',
+      commerce: 'commerce',
+      exchange: 'exchange',
+      'international exchange': 'internationalExchange',
+      nft: 'nft',
+      one: 'one',
+      // onramp: 'onramp',
+      // prime: 'prime',
+      'private client': 'privateClient',
+      tracer: 'tracer',
+      wallet: 'wallet'
+      // retail: 'retail',
+      // 'embedded wallets': 'embeddedWallets',
+      // 'internal developer platform': 'internalDeveloperPlatform',
+    })
+  },
+  example: _ref => {
+    let {
+        foreground
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/_jsx(SubBrandLogoMark, _extends({}, props, {
+      foreground: foreground.color
+    }));
+  }
+});

package/esm/icons/__figma__/SubBrandLogoWordmark.figma.js

@@ -0,0 +1,48 @@
+const _excluded = ["foreground"];
+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 from 'react';
+import { figma } from '@figma/code-connect';
+import { SubBrandLogoWordmark } from '../SubBrandLogoWordmark';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(SubBrandLogoWordmark, 'https://www.figma.com/design/46lNmiV1z8I888My5kNq7R/%E2%9C%A8-Logos?node-id=1268-79', {
+  imports: ["import { SubBrandLogoWordmark } from '@coinbase/cds-mobile/icons/SubBrandLogoWordmark';"],
+  props: {
+    foreground: figma.nestedProps('Logo Wordmark', {
+      color: figma.enum('color', {
+        primary: undefined,
+        foreground: true,
+        'primary Foreground': undefined
+      })
+    }),
+    type: figma.enum('product', {
+      // retail: undefined,
+      advanced: 'advanced',
+      card: 'card',
+      // 'developer platform': 'developerPlatform',
+      commerce: 'commerce',
+      'derivatives exchange': 'derivativesExchange',
+      exchange: 'exchange',
+      help: 'help',
+      'international exchange': 'internationalExchange',
+      nft: 'nft',
+      one: 'one',
+      // onramp: 'onramp',
+      prime: 'prime',
+      'private client': 'privateClient',
+      tracer: 'tracer',
+      wallet: 'wallet'
+      // 'embedded wallets': 'embeddedWallets',
+      // 'internal developer platform': 'internalDeveloperPlatform',
+    })
+  },
+  example: _ref => {
+    let {
+        foreground
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/_jsx(SubBrandLogoWordmark, _extends({}, props, {
+      foreground: foreground.color
+    }));
+  }
+});

package/esm/icons/__stories__/Icon.stories.js

@@ -0,0 +1,98 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated } from 'react-native';
+import { convertMotionConfig } from '../../animation/convertMotionConfig';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { HStack } from '../../layout/HStack';
+import { VStack } from '../../layout/VStack';
+import { Pressable } from '../../system/Pressable';
+import { Text } from '../../typography/Text';
+import { Icon } from '../Icon';
+import { TextIcon } from '../TextIcon';
+import { IconSheet } from './IconSheet';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const animateInConfig = convertMotionConfig({
+  easing: 'enterFunctional',
+  duration: 'moderate1',
+  toValue: 1,
+  useNativeDriver: false
+});
+const animateOutConfig = convertMotionConfig({
+  easing: 'exitFunctional',
+  duration: 'moderate1',
+  toValue: 1,
+  useNativeDriver: false
+});
+export const useAnimation = () => {
+  const animationRef = useRef(new Animated.Value(0));
+  return useMemo(() => {
+    const animateIn = Animated.timing(animationRef.current, animateInConfig);
+    const animateOut = Animated.timing(animationRef.current, animateOutConfig);
+    return [animationRef.current, animateIn, animateOut];
+  }, []);
+};
+const IconScreen = () => {
+  const theme = useTheme();
+  const [isToggled, setIsToggled] = useState(false);
+  const animationRef = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(animationRef, isToggled ? animateInConfig : animateOutConfig).start();
+  }, [isToggled, animationRef]);
+  const toggle = useCallback(() => setIsToggled(prevIsToggled => !prevIsToggled), []);
+  const animatedIcon = /*#__PURE__*/_jsx(Icon, {
+    active: true,
+    animated: true,
+    dangerouslySetColor: animationRef.interpolate({
+      inputRange: [0, 1],
+      outputRange: [theme.color.bgLine, theme.color.fgPrimary]
+    }),
+    name: "star",
+    size: "l"
+  });
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Nesting TextIcons",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 1,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          font: "body",
+          children: [/*#__PURE__*/_jsx(TextIcon, {
+            active: true,
+            name: "dot",
+            size: "xs"
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "This is some text"
+          })]
+        }), /*#__PURE__*/_jsxs(Text, {
+          font: "body",
+          children: [/*#__PURE__*/_jsx(TextIcon, {
+            active: true,
+            name: "dot",
+            size: "xs"
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "This is soooooooooooooome reallllllllllllllllly loooooooonnngggggg text"
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Animated Icon",
+      children: /*#__PURE__*/_jsx(Pressable, {
+        noScaleOnPress: true,
+        accessibilityHint: "hit star to rate the product",
+        accessibilityLabel: "rating a product",
+        background: "transparent",
+        onPress: toggle,
+        children: /*#__PURE__*/_jsxs(HStack, {
+          gap: 1,
+          children: [animatedIcon, animatedIcon, animatedIcon, animatedIcon]
+        })
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Icon Sheet",
+      children: /*#__PURE__*/_jsx(IconSheet, {})
+    })]
+  });
+};
+export default IconScreen;

package/esm/icons/__stories__/IconSheet.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { names } from '@coinbase/cds-icons/names';
+import { HStack, VStack } from '../../layout';
+import { Icon } from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+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, {
+        children: /*#__PURE__*/_jsx(HStack, {
+          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))
+        })
+      }, item))
+    })
+  });
+}

package/esm/icons/__stories__/Logo.stories.js

@@ -0,0 +1,332 @@
+import React from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Box } from '../../layout/Box';
+import { HStack } from '../../layout/HStack';
+import { VStack } from '../../layout/VStack';
+import { ThemeProvider } from '../../system/ThemeProvider';
+import { defaultTheme } from '../../themes/defaultTheme';
+import { LogoMark } from '../LogoMark';
+import { LogoWordmark } from '../LogoWordmark';
+import { SubBrandLogoMark } from '../SubBrandLogoMark';
+import { SubBrandLogoWordmark } from '../SubBrandLogoWordmark';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LogoScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsxs(Example, {
+      title: "LogoMark",
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        children: [/*#__PURE__*/_jsx(Box, {
+          paddingEnd: 2,
+          children: /*#__PURE__*/_jsx(LogoMark, {
+            size: 16
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          paddingEnd: 2,
+          children: /*#__PURE__*/_jsx(LogoMark, {
+            size: 24
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          paddingEnd: 2,
+          children: /*#__PURE__*/_jsx(LogoMark, {
+            size: 32
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(HStack, {
+        children: [/*#__PURE__*/_jsx(Box, {
+          paddingEnd: 2,
+          children: /*#__PURE__*/_jsx(LogoMark, {
+            foreground: true,
+            size: 16
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          paddingEnd: 2,
+          children: /*#__PURE__*/_jsx(LogoMark, {
+            foreground: true,
+            size: 24
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          paddingEnd: 2,
+          children: /*#__PURE__*/_jsx(LogoMark, {
+            foreground: true,
+            size: 32
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "LogoWordmark",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        children: [/*#__PURE__*/_jsx(Box, {
+          height: 30,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(LogoWordmark, {})
+        }), /*#__PURE__*/_jsx(ThemeProvider, {
+          activeColorScheme: "light",
+          theme: defaultTheme,
+          children: /*#__PURE__*/_jsx(Box, {
+            background: "bg",
+            height: 30,
+            padding: 1,
+            children: /*#__PURE__*/_jsx(LogoWordmark, {
+              foreground: true
+            })
+          })
+        }), /*#__PURE__*/_jsx(ThemeProvider, {
+          activeColorScheme: "dark",
+          theme: defaultTheme,
+          children: /*#__PURE__*/_jsx(Box, {
+            background: "bg",
+            height: 30,
+            padding: 1,
+            children: /*#__PURE__*/_jsx(LogoWordmark, {
+              foreground: true
+            })
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "SubBrandLogoMark",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        children: [/*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            type: "analytics"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            type: "ventures"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            type: "assetHub"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            type: "commerce"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            type: "wallet"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            type: "internationalExchange"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            type: "account"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            type: "card"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            type: "cloud"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            type: "nft"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            type: "pay"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            type: "help"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            type: "tracer"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            type: "exchange"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            type: "one"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            type: "business"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            foreground: true,
+            type: "privateClient"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoMark, {
+            foreground: true,
+            type: "base"
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "SubBrandLogoWordmark",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        children: [/*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            type: "analytics"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            type: "ventures"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            type: "assetHub"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            type: "commerce"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            type: "wallet"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            type: "internationalExchange"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            type: "account"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            type: "card"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            type: "cloud"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            type: "nft"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            type: "derivativesExchange"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            type: "pay"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            type: "help"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            type: "tracer"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            type: "exchange"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            type: "one"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            type: "business"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            foreground: true,
+            type: "privateClient"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            foreground: true,
+            type: "advanced"
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          height: 50,
+          padding: 1,
+          children: /*#__PURE__*/_jsx(SubBrandLogoWordmark, {
+            foreground: true,
+            type: "prime"
+          })
+        })]
+      })
+    })]
+  });
+};
+export default LogoScreen;

package/esm/icons/index.js

@@ -0,0 +1,6 @@
+export * from './Icon';
+export * from './LogoMark';
+export * from './LogoWordmark';
+export * from './SubBrandLogoMark';
+export * from './SubBrandLogoWordmark';
+export * from './TextIcon';

package/esm/illustrations/HeroSquare.js

@@ -0,0 +1,3 @@
+import heroSquareIllustrations from '@coinbase/cds-illustrations/__generated__/heroSquare/data/svgJsMap';
+import { createIllustration } from './createIllustration';
+export const HeroSquare = createIllustration('heroSquare', heroSquareIllustrations);

package/esm/illustrations/Pictogram.js

@@ -0,0 +1,3 @@
+import pictogramIllustrations from '@coinbase/cds-illustrations/__generated__/pictogram/data/svgJsMap';
+import { createIllustration } from './createIllustration';
+export const Pictogram = createIllustration('pictogram', pictogramIllustrations);

package/esm/illustrations/SpotIcon.js

@@ -0,0 +1,3 @@
+import svgJsMap from '@coinbase/cds-illustrations/__generated__/spotIcon/data/svgJsMap';
+import { createIllustration } from './createIllustration';
+export const SpotIcon = createIllustration('spotIcon', svgJsMap);

package/esm/illustrations/SpotRectangle.js

@@ -0,0 +1,3 @@
+import spotRectangleIllustrations from '@coinbase/cds-illustrations/__generated__/spotRectangle/data/svgJsMap';
+import { createIllustration } from './createIllustration';
+export const SpotRectangle = createIllustration('spotRectangle', spotRectangleIllustrations);

package/esm/illustrations/SpotSquare.js

@@ -0,0 +1,3 @@
+import spotSquareIllustrations from '@coinbase/cds-illustrations/__generated__/spotSquare/data/svgJsMap';
+import { createIllustration } from './createIllustration';
+export const SpotSquare = createIllustration('spotSquare', spotSquareIllustrations);