@coinbase/cds-web 0.0.0 → 8.13.1

package/esm/media/RemoteImage.js

@@ -0,0 +1,63 @@
+const _excluded = ["width", "height", "aspectRatio", "shape", "source", "alt", "className", "resizeMode", "size", "borderColor", "borderWidth", "style"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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, { memo, useMemo } from 'react';
+import { remoteImageDarkFallbackSrc, remoteImageLightFallbackSrc } from '@coinbase/cds-common/media/remoteImageFallbackSrc';
+import { cx } from '../cx';
+import { Box } from '../layout/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+const baseCss = "baseCss-bbzp605";
+const resizeCss = {
+  cover: "cover-c1sg9xj9",
+  contain: "contain-ct639h6"
+};
+const hexagonOverflowCss = "hexagonOverflowCss-h106avb5";
+const fallbackCss = "fallbackCss-fmd7ixe";
+const borderRadiusCss = {
+  circle: "circle-c1oh4yoq",
+  squircle: "squircle-s1exwfs9",
+  square: "square-s117wpuw",
+  rectangle: "rectangle-r18cj7oi",
+  hexagon: "hexagon-h4bc24o"
+};
+export const RemoteImage = /*#__PURE__*/memo(_ref => {
+  let {
+      width,
+      height,
+      aspectRatio,
+      shape = 'square',
+      source,
+      alt = '',
+      className,
+      resizeMode = 'cover',
+      size = 'm',
+      borderColor,
+      borderWidth = borderColor ? 200 : undefined,
+      style
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const styles = useMemo(() => _objectSpread({
+    aspectRatio: aspectRatio ? aspectRatio.join(' / ') : undefined
+  }, style), [aspectRatio, style]);
+  // If height and width are not provided, we default to avatarSize
+  const computedHeight = useMemo(() => width || height ? height : "var(--avatarSize-".concat(size, ")"), [width, height, size]);
+  const computedWidth = useMemo(() => width || height ? width : "var(--avatarSize-".concat(size, ")"), [width, height, size]);
+  return /*#__PURE__*/_jsx(Box, _objectSpread({
+    alt: alt,
+    as: "img",
+    borderColor: borderColor,
+    borderWidth: borderWidth,
+    className: cx(baseCss, shape === 'hexagon' && hexagonOverflowCss, resizeCss[resizeMode], borderRadiusCss[shape], !source && fallbackCss, className),
+    "data-shape": shape,
+    height: computedHeight,
+    src: source,
+    style: styles,
+    width: computedWidth
+  }, props));
+});
+import "./RemoteImage.css";

package/esm/media/RemoteImageGroup.css

@@ -0,0 +1,5 @@
+.circle-cat65m8{border-radius:100%;}
+.square-s4x9tgq{border-radius:4px;}
+.hexagon-h112niag{border-radius:0;}
+.squircle-s8clfq8{border-radius:8px;}
+.rectangle-ra2rof2{border-radius:0;}

package/esm/media/RemoteImageGroup.js

@@ -0,0 +1,93 @@
+const _excluded = ["children", "size", "max", "shape", "testID"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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, { Children, isValidElement, useMemo } from 'react';
+import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout/Box';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const borderRadiusCss = {
+  circle: "circle-cat65m8",
+  square: "square-s4x9tgq",
+  hexagon: "hexagon-h112niag",
+  squircle: "squircle-s8clfq8",
+  rectangle: "rectangle-ra2rof2"
+};
+export const RemoteImageGroup = _ref => {
+  let {
+      children,
+      size = 'm',
+      max = 4,
+      shape = 'circle',
+      testID
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    avatarSize
+  } = useTheme();
+  const borderRadius = borderRadiusCss[shape];
+  const sizeAsNumber = typeof size === 'number' ? size : avatarSize[size];
+  const overlapSpacing = sizeAsNumber <= 40 ? 8 : 16;
+  const excess = Children.count(children) - max;
+  const groupChildren = useMemo(() => {
+    const arrayChildren = Children.toArray(children);
+    if (excess > 0) {
+      return arrayChildren.slice(0, -excess);
+    }
+    return arrayChildren;
+  }, [children, excess]);
+  return /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
+    alignItems: "center",
+    display: "flex",
+    position: "relative",
+    testID: testID
+  }, props), {}, {
+    children: [groupChildren.map((child, index) => {
+      if (! /*#__PURE__*/isValidElement(child)) {
+        return null;
+      }
+
+      // dynamically apply uniform sizing and shape to all RemoteImage children elements
+      const clonedChild = /*#__PURE__*/React.cloneElement(child, _objectSpread({
+        width: sizeAsNumber,
+        height: sizeAsNumber
+      }, child.props.shape ? undefined : {
+        shape
+      }));
+
+      // zIndex is progressively lower so that each child is stacked below the previous one
+      const zIndex = -index;
+      return /*#__PURE__*/_jsx(Box, {
+        left: index === 0 ? 'initial' : overlapSpacing * zIndex,
+        position: "relative",
+        testID: "".concat(testID ? "".concat(testID, "-") : '', "inner-box-").concat(index),
+        zIndex: zIndex,
+        children: clonedChild
+      }, index);
+    }), excess > 0 && /*#__PURE__*/_jsx(Box, {
+      alignItems: "center",
+      background: "bgOverlay",
+      className: borderRadius,
+      height: sizeAsNumber,
+      justifyContent: "center",
+      left: groupChildren.length * overlapSpacing * -1,
+      position: "relative",
+      width: sizeAsNumber,
+      zIndex: groupChildren.length * -1,
+      children: /*#__PURE__*/_jsxs(Text, {
+        font: "legal",
+        style: {
+          fontSize: sizeAsNumber * 0.4
+        },
+        testID: "".concat(testID, "-excess-text"),
+        children: ["+", excess]
+      })
+    })]
+  }));
+};
+import "./RemoteImageGroup.css";

package/esm/media/__figma__/Avatar.figma.js

@@ -0,0 +1,61 @@
+const _excluded = ["variant", "shape"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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 { Avatar } from '../Avatar';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Avatar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=60-643&m=dev', {
+  imports: ["import {Avatar} from '@coinbase/cds-web/media/Avatar'"],
+  props: {
+    shape: figma.enum('shape', {
+      circle: 'circle',
+      square: 'square',
+      polygon: 'polygon'
+    }),
+    size: figma.enum('size', {
+      'm (24)': 'm',
+      'l (32)': 'l',
+      'xl (40)': 'xl',
+      'xxl (48)': 'xxl',
+      'xxxl (56)': 'xxxl'
+    }),
+    colorScheme: figma.enum('color scheme', {
+      teal: 'teal',
+      purple: 'purple',
+      pink: 'pink',
+      green: 'green',
+      gray: 'gray',
+      NA: 'blue',
+      blue: 'blue'
+    }),
+    variant: figma.enum('variant', {
+      image: 'image',
+      initial: 'initial',
+      NFT: 'nft'
+    }),
+    name: figma.enum('variant', {
+      initial: figma.string('initial')
+    }),
+    src: figma.enum('variant', {
+      image: 'url'
+    })
+  },
+  // @ts-expect-error shape mapping issue
+  example: _ref => {
+    let {
+        variant,
+        shape
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/_jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
+      alt: variant,
+      shape: shape
+    }));
+  }
+});

package/esm/media/index.js

@@ -0,0 +1,3 @@
+export * from './Avatar';
+export * from './RemoteImage';
+export * from './RemoteImageGroup';

package/esm/motion/AnimatedCaret.js

@@ -0,0 +1,72 @@
+const _excluded = ["rotate", "size", "color", "testID", "padding", "paddingBottom", "paddingEnd", "paddingX", "paddingStart", "paddingTop", "paddingY"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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, { memo } from 'react';
+import { animateRotateConfig } from '@coinbase/cds-common/motion/animatedCaret';
+import { m as motion, MotionConfig } from 'framer-motion';
+import { useTextInputFocusVariantContent } from '../controls/context';
+import { Icon } from '../icons/Icon';
+import { HStack } from '../layout/HStack';
+import { useMotionProps } from './useMotionProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const variantColorMap = {
+  primary: 'fgPrimary',
+  positive: 'fgPositive',
+  negative: 'fgNegative',
+  foreground: 'fg',
+  foregroundMuted: 'fgMuted',
+  secondary: 'fgMuted'
+};
+export const AnimatedCaret = /*#__PURE__*/memo(function AnimatedCaret(_ref) {
+  let {
+      rotate,
+      size = 's',
+      color = 'fgMuted',
+      testID,
+      padding,
+      paddingBottom,
+      paddingEnd,
+      paddingX,
+      paddingStart,
+      paddingTop,
+      paddingY
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const motionProps = useMotionProps({
+    enterConfigs: [_objectSpread(_objectSpread({}, animateRotateConfig), {}, {
+      toValue: rotate
+    })],
+    initial: false
+  });
+  const textInputVariant = useTextInputFocusVariantContent();
+  const variant = textInputVariant ? variantColorMap[textInputVariant] : color;
+  return (
+    /*#__PURE__*/
+    // HStack to limit rotate boundary
+    _jsx(HStack, {
+      padding: padding,
+      paddingBottom: paddingBottom,
+      paddingEnd: paddingEnd,
+      paddingStart: paddingStart,
+      paddingTop: paddingTop,
+      paddingX: paddingX,
+      paddingY: paddingY,
+      children: /*#__PURE__*/_jsx(MotionConfig, {
+        reducedMotion: "user",
+        children: /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, motionProps), {}, {
+          "data-testid": "".concat(testID, "-motion"),
+          children: /*#__PURE__*/_jsx(Icon, _objectSpread({
+            color: variant,
+            name: "caretUp",
+            size: size
+          }, props))
+        }))
+      })
+    })
+  );
+});

package/esm/motion/ColorSurge.js

@@ -0,0 +1,46 @@
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useState } from 'react';
+import { colorSurgeEnterConfig, colorSurgeExitConfig } from '@coinbase/cds-common/motion/hint';
+import { m as motion, useAnimation } from 'framer-motion';
+import { Box } from '../layout/Box';
+import { useMotionProps } from './useMotionProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const MotionBox = motion(Box);
+
+/**
+ * Please consult with the motion team in #ask-motion before using this component.
+ */
+export const ColorSurge = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function ColorSurge(_ref, ref) {
+  let {
+    background = 'bgPrimary',
+    disableAnimateOnMount = false
+  } = _ref;
+  const [backgroundState, setBackgroundState] = useState(background);
+  const controls = useAnimation();
+  const motionProps = useMotionProps({
+    enterConfigs: [colorSurgeEnterConfig],
+    exitConfigs: [colorSurgeExitConfig],
+    animate: controls
+  });
+  const playAnimation = useCallback(async backgroundParam => {
+    if (backgroundParam) {
+      setBackgroundState(backgroundParam);
+    }
+    controls.set('enter');
+    await controls.start('exit');
+  }, [controls]);
+  useEffect(() => {
+    if (!disableAnimateOnMount) {
+      void playAnimation();
+    }
+  }, [playAnimation, disableAnimateOnMount]);
+  useImperativeHandle(ref, () => ({
+    play: playAnimation
+  }), [playAnimation]);
+  return /*#__PURE__*/_jsx(MotionBox, {
+    animate: controls,
+    background: backgroundState,
+    initial: disableAnimateOnMount ? 'exit' : 'enter',
+    pin: "all",
+    variants: motionProps.variants
+  });
+}));

package/esm/motion/Pulse.js

@@ -0,0 +1,60 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
+import { pulseTransitionConfig, pulseVariantOpacity } from '@coinbase/cds-common/motion/hint';
+import { m as motion, useAnimation } from 'framer-motion';
+import { convertTransition } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const calculateRepeatValue = iterations => {
+  if (iterations === undefined || iterations === Infinity) {
+    return Infinity;
+  }
+  // Adjust for Framer Motion's zero-indexed repeat, ensure non-negative
+  return iterations > 0 ? iterations - 1 : 0;
+};
+
+/**
+ * Please consult with the motion team in #ask-motion before using this component.
+ */
+export const Pulse = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Pulse(_ref, ref) {
+  let {
+    children,
+    variant = 'moderate',
+    disableAnimateOnMount = false,
+    iterations,
+    motionConfig
+  } = _ref;
+  const controls = useAnimation();
+  const stopAnimation = useCallback(() => {
+    controls.stop();
+    controls.set({
+      opacity: 1
+    });
+  }, [controls]);
+  const repeatValue = useMemo(() => calculateRepeatValue(iterations), [iterations]);
+  const playAnimation = useCallback(async variantParam => {
+    stopAnimation();
+    await controls.start({
+      opacity: [1, pulseVariantOpacity[variantParam !== null && variantParam !== void 0 ? variantParam : variant], 1],
+      transition: convertTransition(_objectSpread(_objectSpread(_objectSpread({}, pulseTransitionConfig), motionConfig || {}), {}, {
+        repeat: repeatValue
+      }))
+    });
+  }, [stopAnimation, controls, variant, repeatValue, motionConfig]);
+  useEffect(() => {
+    if (!disableAnimateOnMount) {
+      void playAnimation();
+    }
+  }, [playAnimation, disableAnimateOnMount]);
+  useImperativeHandle(ref, () => ({
+    play: playAnimation,
+    stop: stopAnimation
+  }), [playAnimation, stopAnimation]);
+  return /*#__PURE__*/_jsx(motion.div, {
+    animate: controls,
+    children: children
+  });
+}));

package/esm/motion/Shake.js

@@ -0,0 +1,31 @@
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle } from 'react';
+import { shakeTransitionConfig, shakeTranslateX } from '@coinbase/cds-common/motion/hint';
+import { m as motion, useAnimation } from 'framer-motion';
+import { convertTransition } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Please consult with the motion team in #ask-motion before using this component.
+ */
+export const Shake = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Shake(_ref, ref) {
+  let {
+    children,
+    disableAnimateOnMount = false
+  } = _ref;
+  const controls = useAnimation();
+  const playAnimation = useCallback(async () => controls.start({
+    x: shakeTranslateX,
+    transition: convertTransition(shakeTransitionConfig)
+  }), [controls]);
+  useEffect(() => {
+    if (!disableAnimateOnMount) {
+      void playAnimation();
+    }
+  }, [playAnimation, disableAnimateOnMount]);
+  useImperativeHandle(ref, () => ({
+    play: playAnimation
+  }), [playAnimation]);
+  return /*#__PURE__*/_jsx(motion.div, {
+    animate: controls,
+    children: children
+  });
+}));

package/esm/motion/types.js

@@ -0,0 +1 @@
+export {};

package/esm/motion/useMotionProps.js

@@ -0,0 +1,46 @@
+const _excluded = ["enterConfigs", "exitConfigs", "initial", "animate", "transition"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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 { useMemo } from 'react';
+import { convertTransition, createVariant } from './utils';
+const getVariants = (enterConfigs, exitConfigs) => {
+  if (!enterConfigs && !exitConfigs) return undefined;
+  const variant = {};
+  if (enterConfigs) {
+    variant.enter = createVariant(enterConfigs);
+  }
+  if (exitConfigs) {
+    variant.exit = createVariant(exitConfigs);
+  }
+  return variant;
+};
+export const getMotionProps = _ref => {
+  let {
+      enterConfigs,
+      exitConfigs,
+      initial = 'exit',
+      animate = 'enter',
+      transition
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return _objectSpread({
+    variants: getVariants(enterConfigs, exitConfigs),
+    initial,
+    animate,
+    transition: transition && convertTransition(transition)
+  }, rest);
+};
+
+/**
+ * Convert CDS motion configs to framer motion props.
+ * @warning Use the function version(getMotionProps) if possible to avoid unnecessary rerenders.
+ * @link https://www.framer.com/docs/component/##animation
+ */
+export const useMotionProps = props => {
+  return useMemo(() => getMotionProps(props), [props]);
+};

package/esm/motion/utils.js

@@ -0,0 +1,80 @@
+const _excluded = ["easing", "oneOffDuration", "duration", "delay"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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 { curves, durations } from '@coinbase/cds-common/motion/tokens';
+import { isStorybook, isTest } from '@coinbase/cds-utils';
+/**
+ * Convert CDS easing and duration tokens to framer transition values
+ * @link https://www.framer.com/docs/animation/##transitions
+ */
+export const convertTransition = transition => {
+  const {
+      easing,
+      oneOffDuration,
+      duration,
+      delay
+    } = transition,
+    rest = _objectWithoutProperties(transition, _excluded);
+  let convertedDuration;
+  if (duration) convertedDuration = duration && durations[duration] / 1000;
+  if (oneOffDuration) convertedDuration = oneOffDuration / 1000;
+  const convertedEasing = easing ? curves[easing] : undefined;
+  const skipAnimation = isStorybook() || isTest();
+  return _objectSpread(_objectSpread({}, rest), {}, {
+    ease: convertedEasing,
+    duration: skipAnimation ? 0 : convertedDuration,
+    delay: skipAnimation ? 0 : delay && delay / 1000
+  });
+};
+
+/**
+ * Convert CDS motion configs to framer transition styles
+ * @param configs CDS Motion Configs
+ * @returns framer transition styles
+ */
+export const convertMotionConfigs = configs => configs.reduce((acc, _ref) => {
+  let {
+    toValue,
+    property,
+    easing,
+    duration,
+    delay
+  } = _ref;
+  return _objectSpread(_objectSpread({}, acc), {}, {
+    [property]: toValue,
+    transition: _objectSpread(_objectSpread({}, acc.transition), {}, {
+      [property]: convertTransition({
+        easing,
+        duration,
+        delay
+      })
+    })
+  });
+}, {
+  transition: {}
+});
+
+/**
+ * Convert CDS motion configs to framer variant
+ * @link https://www.framer.com/docs/component/###variants
+ */
+export const createVariant = configs => {
+  if (Array.isArray(configs)) {
+    return convertMotionConfigs(configs);
+  }
+  if (typeof configs === 'object' && configs.tokens) {
+    const {
+      tokens,
+      transitionEnd
+    } = configs;
+    return _objectSpread(_objectSpread({}, convertMotionConfigs(tokens)), {}, {
+      transitionEnd
+    });
+  }
+  return {};
+};

package/esm/multi-content-module/MultiContentModule.js

@@ -0,0 +1,81 @@
+const _excluded = ["as", "pictogram", "title", "description", "children", "action", "onActionPress", "actionAccessibilityLabel", "end", "bordered", "testID", "accessibilityLabel", "maxWidth", "style"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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, isValidElement, memo, useMemo } from 'react';
+import { defaultMaxWidth } from '@coinbase/cds-common/tokens/multiContentModule';
+import { Button } from '../buttons';
+import { Pictogram } from '../illustrations';
+import { Box, VStack } from '../layout';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const multiContentModuleDefaultElement = 'div';
+export const MultiContentModule = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      pictogram,
+      title,
+      description,
+      children,
+      action,
+      onActionPress,
+      actionAccessibilityLabel,
+      end,
+      bordered = false,
+      testID,
+      accessibilityLabel,
+      maxWidth = defaultMaxWidth,
+      style
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : multiContentModuleDefaultElement;
+  const multiContentModulePaddingX = useMemo(() => ({
+    phone: bordered ? 4 : 0,
+    tablet: 4,
+    desktop: 4
+  }), [bordered]);
+  return /*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({
+    ref: ref,
+    accessibilityLabel: accessibilityLabel,
+    as: Component,
+    background: "bg",
+    borderRadius: 400,
+    bordered: bordered,
+    gap: 2,
+    maxWidth: maxWidth,
+    paddingX: multiContentModulePaddingX,
+    paddingY: 4,
+    style: style,
+    testID: testID
+  }, props), {}, {
+    children: [typeof pictogram === 'string' ? /*#__PURE__*/_jsx(Pictogram, {
+      dimension: "48x48",
+      name: pictogram,
+      testID: "".concat(testID, "-pictogram")
+    }) : pictogram, typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+      as: "h1",
+      display: "block",
+      font: "title1",
+      children: title
+    }) : title, typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+      as: "p",
+      color: "fgMuted",
+      display: "block",
+      font: "body",
+      numberOfLines: 3,
+      children: description
+    }) : description, !!children && /*#__PURE__*/_jsx(Box, {
+      display: "block",
+      testID: "".concat(testID, "-primary-content"),
+      children: children
+    }), action && (/*#__PURE__*/isValidElement(action) ? action : /*#__PURE__*/_jsx(Button, {
+      accessibilityLabel: actionAccessibilityLabel,
+      onClick: onActionPress,
+      children: action
+    })), end]
+  }));
+}));