@coinbase/cds-web 0.0.0 → 8.13.1

package/esm/animation/Lottie.js

@@ -0,0 +1,83 @@
+const _excluded = ["source", "loop", "autoplay", "onAnimationFinish", "handlers", "resizeMode", "filterSize"];
+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, memo, useCallback, useImperativeHandle } from 'react';
+import { getLottieMarkers } from '@coinbase/cds-common/lottie/lottieUtils';
+import { noop } from '@coinbase/cds-utils';
+import { Box } from '../layout/Box';
+import { useLottieHandlers } from './useLottieHandlers';
+import { useLottieListeners } from './useLottieListeners';
+import { useLottieLoader } from './useLottieLoader';
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultFilterSize = {
+  width: '200%',
+  height: '200%',
+  x: '-50%',
+  y: '-50%'
+};
+const lottieCss = "lottieCss-lgkhslj";
+export const Lottie = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+      source,
+      loop = false,
+      autoplay = false,
+      onAnimationFinish,
+      handlers,
+      resizeMode = 'contain',
+      filterSize = defaultFilterSize
+    } = _ref,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  const {
+    containerRef,
+    animationRef
+  } = useLottieLoader({
+    source,
+    autoplay,
+    loop,
+    resizeMode,
+    filterSize
+  });
+  const play = useCallback((startFrame, endFrame) => {
+    var _animationRef$current, _animationRef$current2, _animationRef$current3;
+    (_animationRef$current = animationRef.current) === null || _animationRef$current === void 0 || _animationRef$current.playSegments([startFrame !== null && startFrame !== void 0 ? startFrame : (_animationRef$current2 = animationRef.current) === null || _animationRef$current2 === void 0 ? void 0 : _animationRef$current2.currentFrame, endFrame !== null && endFrame !== void 0 ? endFrame : (_animationRef$current3 = animationRef.current) === null || _animationRef$current3 === void 0 ? void 0 : _animationRef$current3.totalFrames], true);
+  }, [animationRef]);
+  const reset = useCallback(() => {
+    var _animationRef$current4;
+    (_animationRef$current4 = animationRef.current) === null || _animationRef$current4 === void 0 || _animationRef$current4.goToAndStop(0, true);
+  }, [animationRef]);
+  useImperativeHandle(forwardedRef, () => {
+    var _animationRef$current5, _animationRef$current6;
+    return {
+      play,
+      playMarkers: (startFrame, endFrame) => {
+        const markers = getLottieMarkers(source);
+        if (markers) {
+          var _markers$startFrame, _markers$endFrame;
+          play((_markers$startFrame = markers[startFrame]) !== null && _markers$startFrame !== void 0 ? _markers$startFrame : 0, (_markers$endFrame = markers[endFrame]) !== null && _markers$endFrame !== void 0 ? _markers$endFrame : 0);
+        } else {
+          play();
+        }
+      },
+      pause: (_animationRef$current5 = (_animationRef$current6 = animationRef.current) === null || _animationRef$current6 === void 0 ? void 0 : _animationRef$current6.pause) !== null && _animationRef$current5 !== void 0 ? _animationRef$current5 : noop,
+      resume: play,
+      reset
+    };
+  }, [source, play, animationRef, reset]);
+  const listeners = useLottieHandlers(onAnimationFinish ? {
+    complete: onAnimationFinish,
+    loopComplete: onAnimationFinish
+  } : handlers);
+  useLottieListeners(animationRef, listeners);
+  return /*#__PURE__*/_jsx(Box, _objectSpread({
+    ref: containerRef,
+    as: "div",
+    className: lottieCss
+  }, otherProps));
+}));
+Lottie.displayName = 'Lottie';
+import "./Lottie.css";

package/esm/animation/LottieStatusAnimation.js

@@ -0,0 +1,41 @@
+const _excluded = ["status", "onFinish", "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, { memo, useCallback, useRef, useState } from 'react';
+import { useStatusAnimationPoller } from '@coinbase/cds-common/lottie/useStatusAnimationPoller';
+import { tradeStatus } from '@coinbase/cds-lottie-files/tradeStatus';
+import { Lottie } from './Lottie';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const LottieStatusAnimation = /*#__PURE__*/memo(_ref => {
+  var _lottie$current;
+  let {
+      status = 'loading',
+      onFinish,
+      testID
+    } = _ref,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  const [, forceUpdate] = useState(0);
+  const lottie = useRef();
+  const handlePolling = useStatusAnimationPoller({
+    status,
+    playMarkers: (_lottie$current = lottie.current) === null || _lottie$current === void 0 ? void 0 : _lottie$current.playMarkers,
+    onFinish
+  });
+  const handleRef = useCallback(el => {
+    if (el && !lottie.current) {
+      lottie.current = el;
+      forceUpdate(prev => prev + 1);
+    }
+  }, []);
+  return /*#__PURE__*/_jsx(Lottie, _objectSpread({
+    ref: handleRef,
+    onAnimationFinish: handlePolling,
+    source: tradeStatus,
+    testID: testID
+  }, otherProps));
+});

package/esm/animation/NewAnimatePresence.js

@@ -0,0 +1,5 @@
+import { AnimatePresence } from 'framer-motion';
+
+// Workaround for React 18 no-implicit-children failure - https://github.com/framer/motion/issues/1509
+
+export const NewAnimatePresence = AnimatePresence;

package/esm/animation/convertMotionConfig.js

@@ -0,0 +1,35 @@
+import { curves, durations } from '@coinbase/cds-common/motion/tokens';
+export const webCurves = {
+  global: curves.global.join(),
+  enterExpressive: curves.enterExpressive.join(),
+  enterFunctional: curves.enterFunctional.join(),
+  exitExpressive: curves.exitExpressive.join(),
+  exitFunctional: curves.exitFunctional.join(),
+  linear: curves.linear.join()
+};
+export function cubicBezier(easing) {
+  return "cubic-bezier(".concat(webCurves[easing], ")");
+}
+export const convertMotionConfig = _ref => {
+  let {
+    toValue,
+    fromValue,
+    delay,
+    easing,
+    duration,
+    oneOffDuration,
+    /**
+     * Retain styles after animation has completed
+     * @link https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/fill
+     */
+    fill = 'forwards'
+  } = _ref;
+  return {
+    toValue,
+    fromValue,
+    easing: cubicBezier(easing),
+    duration: oneOffDuration !== null && oneOffDuration !== void 0 ? oneOffDuration : duration && durations[duration],
+    delay,
+    fill
+  };
+};

package/esm/animation/index.js

@@ -0,0 +1,2 @@
+export * from './Lottie';
+export * from './LottieStatusAnimation';

package/esm/animation/types.js

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

package/esm/animation/useLottieHandlers.js

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import { mapValues } from '@coinbase/cds-utils';
+const emptyArray = [];
+export const useLottieHandlers = handlers => {
+  return useMemo(() => {
+    if (handlers) {
+      const objectMap = mapValues(handlers, (val, key) => ({
+        name: key,
+        handler: val
+      }));
+      return Object.values(objectMap).filter(listener => !!listener && !!listener.handler);
+    }
+    return emptyArray;
+  }, [handlers]);
+};

package/esm/animation/useLottieListeners.js

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+export const useLottieListeners = function (animationRef) {
+  let listeners = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  useEffect(() => {
+    if (!listeners.length) {
+      return undefined;
+    }
+    const deregisterList = listeners.map(listener => {
+      var _animationRef$current;
+      (_animationRef$current = animationRef.current) === null || _animationRef$current === void 0 || _animationRef$current.addEventListener(listener.name, listener.handler);
+
+      // Return a function to deregister this listener
+      return () => {
+        var _animationRef$current2;
+        (_animationRef$current2 = animationRef.current) === null || _animationRef$current2 === void 0 || _animationRef$current2.removeEventListener(listener.name, listener.handler);
+      };
+    });
+
+    // Deregister listeners on unmount
+    return () => {
+      deregisterList.forEach(deregister => deregister());
+    };
+  }, [listeners, animationRef]);
+};

package/esm/animation/useLottieLoader.js

@@ -0,0 +1,94 @@
+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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import lottie from 'lottie-web';
+import { isBrowser } from '../utils/browser';
+export const useLottieLoader = _ref => {
+  let {
+    source,
+    loop,
+    autoplay,
+    resizeMode,
+    filterSize
+  } = _ref;
+  const sourceWidth = source.w;
+  const sourceHeight = source.h;
+  const containerRef = useRef(null);
+  const animationRef = useRef();
+  const [, setAnimationLoaded] = useState(false);
+  const preserveAspectRatio = useMemo(() => {
+    switch (resizeMode) {
+      case 'contain':
+        return 'xMidYMid meet';
+      case 'cover':
+      default:
+        return 'xMidYMid slice';
+    }
+  }, [resizeMode]);
+  const loadAnimation = useCallback(function () {
+    var _animationRef$current;
+    let forcedConfigs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    // Return if the container ref is null
+    if (!containerRef.current) {
+      return;
+    }
+
+    // Destroy any previous instance
+    (_animationRef$current = animationRef.current) === null || _animationRef$current === void 0 || _animationRef$current.destroy();
+
+    // Build the animation configuration
+    const config = _objectSpread(_objectSpread({
+      renderer: 'svg',
+      rendererSettings: {
+        preserveAspectRatio,
+        viewBoxSize: "0 0 ".concat(sourceWidth, " ").concat(sourceHeight),
+        progressiveLoad: true,
+        filterSize
+      },
+      autoplay,
+      animationData: source
+    }, forcedConfigs), {}, {
+      container: containerRef.current
+    });
+
+    // Save the animation instance
+    animationRef.current = lottie.loadAnimation(config);
+    setAnimationLoaded(!!animationRef.current);
+  }, [autoplay, preserveAspectRatio, source, sourceHeight, sourceWidth, filterSize]);
+
+  /**
+   * Initialize and listen for changes that affect the animation state.
+   * Reinitialize when animation data changedes
+   */
+  useEffect(() => {
+    // Don't load lottie if SSR
+    if (isBrowser()) {
+      loadAnimation();
+    }
+  }, [loadAnimation]);
+
+  // Update the autoplay state
+  useEffect(() => {
+    if (animationRef.current) {
+      animationRef.current.autoplay = !!autoplay;
+    }
+  }, [animationRef, autoplay]);
+
+  // Update the loop state
+  useEffect(() => {
+    if (animationRef.current) {
+      animationRef.current.loop = !!loop;
+      if (loop && animationRef.current.autoplay && animationRef.current.isPaused) {
+        animationRef.current.play();
+      }
+    }
+  }, [animationRef, loop]);
+  return {
+    containerRef,
+    animationRef,
+    loadAnimation
+  };
+};

package/esm/banner/Banner.css

@@ -0,0 +1 @@
+.actionContainerCss-a1legc19{white-space:nowrap;}

package/esm/banner/Banner.js

@@ -0,0 +1,226 @@
+const _excluded = ["variant", "startIcon", "startIconActive", "onClose", "primaryAction", "secondaryAction", "title", "children", "showDismiss", "testID", "style", "className", "numberOfLines", "label", "styleVariant", "startIconAccessibilityLabel", "closeAccessibilityLabel", "borderRadius", "margin", "marginY", "marginX", "marginTop", "marginBottom", "marginStart", "marginEnd"];
+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, useCallback, useId, useMemo, useState } from 'react';
+import { bannerMinWidth, variants } from '@coinbase/cds-common/tokens/banner';
+import { isDevelopment } from '@coinbase/cds-utils';
+import { Collapsible } from '../collapsible';
+import { Icon } from '../icons/Icon';
+import { Box, HStack, VStack } from '../layout';
+import { Pressable } from '../system/Pressable';
+import { Link } from '../typography/Link';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const warningCss = "warningCss-wjxc487";
+const actionContainerCss = "actionContainerCss-a1legc19";
+export const contentResponsiveConfig = {
+  phone: 'column',
+  tablet: 'row',
+  desktop: 'row'
+};
+const variantStyleProps = {
+  contextual: {
+    paddingX: 2,
+    borderRadius: 400
+  },
+  global: {
+    paddingX: 3,
+    borderRadius: undefined
+  },
+  inline: {
+    paddingX: 3,
+    borderRadius: undefined
+  }
+};
+export const Banner = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      variant,
+      startIcon,
+      startIconActive,
+      onClose,
+      primaryAction,
+      secondaryAction,
+      title,
+      children,
+      showDismiss = false,
+      testID,
+      style,
+      className,
+      numberOfLines = 3,
+      label,
+      styleVariant = 'contextual',
+      startIconAccessibilityLabel,
+      closeAccessibilityLabel,
+      borderRadius = 400,
+      margin,
+      marginY,
+      marginX,
+      marginTop,
+      marginBottom,
+      marginStart,
+      marginEnd
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const titleId = useId();
+  const accessibilityLabelledBy = typeof title === 'string' ? titleId : undefined;
+
+  // Setup color configs
+  const {
+    iconColor,
+    textColor,
+    background,
+    primaryActionColor,
+    secondaryActionColor,
+    iconButtonColor,
+    borderColor
+  } = variants[variant];
+
+  // Events
+  const handleOnDismiss = useCallback(() => {
+    setIsCollapsed(true);
+    onClose === null || onClose === void 0 || onClose();
+  }, [onClose]);
+
+  // Ensure primaryActions are themed to match the variant
+  const clonedPrimaryAction = useMemo(() => {
+    if (/*#__PURE__*/isValidElement(primaryAction) && primaryAction.type === Link) {
+      return /*#__PURE__*/React.cloneElement(primaryAction, _objectSpread({
+        font: 'label1',
+        color: primaryActionColor,
+        testID: "".concat(testID, "-action--primary")
+      }, primaryAction.props));
+    }
+    if (/*#__PURE__*/isValidElement(primaryAction) && isDevelopment()) {
+      console.error('Banner primaryAction needs to be a CDS Link component');
+    }
+    return primaryAction;
+  }, [primaryAction, primaryActionColor, testID]);
+  const clonedSecondaryAction = useMemo(() => {
+    if (/*#__PURE__*/isValidElement(secondaryAction) && secondaryAction.type === Link) {
+      return /*#__PURE__*/React.cloneElement(secondaryAction, _objectSpread({
+        font: 'label1',
+        color: secondaryActionColor,
+        testID: "".concat(testID, "-action--secondary")
+      }, secondaryAction.props));
+    }
+    if (/*#__PURE__*/isValidElement(secondaryAction) && isDevelopment()) {
+      console.error('Banner secondaryAction needs to be a CDS Link component');
+    }
+    return secondaryAction;
+  }, [secondaryAction, secondaryActionColor, testID]);
+  const marginStyles = useMemo(() => ({
+    margin,
+    marginY,
+    marginX,
+    marginTop,
+    marginBottom,
+    marginStart,
+    marginEnd
+  }), [margin, marginX, marginY, marginStart, marginEnd, marginTop, marginBottom]);
+  const borderBox = useMemo(() => /*#__PURE__*/_jsx(Box, {
+    background: borderColor,
+    pin: "left",
+    width: 4
+  }), [borderColor]);
+  const content = /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
+    flexGrow: 1,
+    position: "relative"
+  }, !showDismiss && marginStyles), {}, {
+    children: [/*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread(_objectSpread({
+      ref: ref,
+      background: background,
+      borderRadius: borderRadius,
+      className: className,
+      flexGrow: 1,
+      gap: 1,
+      minWidth: bannerMinWidth,
+      paddingY: 2,
+      style: style,
+      testID: testID
+    }, variantStyleProps[styleVariant]), props), {}, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        paddingX: 0.5,
+        paddingY: 0.25,
+        children: /*#__PURE__*/_jsx(Icon, {
+          accessibilityLabel: startIconAccessibilityLabel,
+          active: startIconActive,
+          color: iconColor,
+          name: startIcon,
+          size: "s",
+          testID: "".concat(testID, "-icon")
+        })
+      }), /*#__PURE__*/_jsxs(VStack, {
+        flexDirection: contentResponsiveConfig,
+        flexGrow: 1,
+        gap: 2,
+        justifyContent: "space-between",
+        testID: "".concat(testID, "-inner-end-box"),
+        children: [/*#__PURE__*/_jsxs(VStack, {
+          gap: 2,
+          testID: "".concat(testID, "-content-box"),
+          children: [/*#__PURE__*/_jsxs(VStack, {
+            gap: 0.5,
+            children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+              color: textColor,
+              font: "label1",
+              id: titleId,
+              numberOfLines: 2,
+              children: title
+            }) : title, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+              color: textColor,
+              font: "label2",
+              numberOfLines: numberOfLines,
+              children: children
+            }) : children]
+          }), typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
+            color: "fgMuted",
+            font: "legal",
+            numberOfLines: 2,
+            children: label
+          }) : label]
+        }), (!!clonedPrimaryAction || !!clonedSecondaryAction) && /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          className: actionContainerCss,
+          gap: 2,
+          testID: "".concat(testID, "-action"),
+          children: [clonedPrimaryAction, clonedSecondaryAction]
+        })]
+      }), showDismiss && /*#__PURE__*/_jsx(Box, {
+        alignItems: "flex-start",
+        padding: 0.5,
+        children: /*#__PURE__*/_jsx(Pressable, {
+          accessibilityLabel: closeAccessibilityLabel,
+          background: "transparent",
+          borderRadius: 1000,
+          onClick: handleOnDismiss,
+          role: "button",
+          testID: "".concat(testID, "-dismiss-btn"),
+          children: /*#__PURE__*/_jsx(Icon, {
+            color: iconButtonColor,
+            name: "close",
+            size: "s"
+          })
+        })
+      })]
+    })), styleVariant === 'global' && !showDismiss && borderBox]
+  }));
+  return showDismiss ? /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
+    display: "block",
+    position: "relative"
+  }, marginStyles), {}, {
+    children: [/*#__PURE__*/_jsx(Collapsible, {
+      accessibilityLabelledBy: accessibilityLabelledBy,
+      collapsed: isCollapsed,
+      id: "".concat(titleId, "--controller"),
+      testID: "".concat(testID, "-collapsible"),
+      children: content
+    }), styleVariant === 'global' && borderBox]
+  })) : content;
+}));
+import "./Banner.css";

package/esm/buttons/AvatarButton.css

@@ -0,0 +1 @@
+.baseCss-b7ikz6y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:var(--interactable-height);height:var(--interactable-height);min-width:unset;}

package/esm/buttons/AvatarButton.js

@@ -0,0 +1,55 @@
+const _excluded = ["accessibilityLabel", "as", "className", "alt", "src", "compact", "colorScheme", "shape", "selected", "name"];
+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, memo, useMemo } from 'react';
+import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
+import { cx } from '../cx';
+import { Avatar } from '../media';
+import { Pressable } from '../system';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const avatarButtonDefaultElement = 'button';
+const baseCss = "baseCss-b7ikz6y";
+export const AvatarButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      accessibilityLabel,
+      as,
+      className,
+      alt,
+      src,
+      compact,
+      colorScheme,
+      shape,
+      selected,
+      name
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : avatarButtonDefaultElement;
+  const height = compact ? interactableHeight.compact : interactableHeight.regular;
+  const styles = useMemo(() => ({
+    '--interactable-height': "".concat(height, "px")
+  }), [height]);
+  return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
+    ref: ref,
+    "aria-label": accessibilityLabel,
+    as: Component,
+    background: "transparent",
+    className: cx(baseCss, className),
+    style: styles
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx(Avatar, {
+      alt: alt,
+      colorScheme: colorScheme,
+      dangerouslySetSize: height,
+      name: name,
+      selected: selected,
+      shape: shape,
+      src: src
+    })
+  }));
+}));
+import "./AvatarButton.css";

package/esm/buttons/Button.css

@@ -0,0 +1,13 @@
+.baseCss-b99zquh{min-width:100px;padding-inline-start:var(--space-4);padding-inline-end:var(--space-4);-webkit-text-decoration:none;text-decoration:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;text-align:center;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-weight:600;margin:0;position:relative;white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;overflow:visible;text-transform:none;}
+.blockCss-b9yox33{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;max-width:100%;white-space:normal;}
+.compactCss-c1bhvbb9{min-width:auto;padding-inline-start:var(--space-2);padding-inline-end:var(--space-2);}
+.spinnerContainerCss-s2x7iw5{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.startNodeCss-sukb6jc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin-inline-end:var(--space-1);}
+.endNodeCss-exznik7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;margin-inline-start:var(--space-1);}
+.iconCss-i148mgtl{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
+.unsetNoWrapCss-u1pxicn8{white-space:unset;}
+.hiddenCss-h1avpq52{visibility:hidden;}
+.middleNodeCss-m69rtgb{position:relative;}
+.flushSpaceCss-f1aod6bi{min-width:unset;margin-inline-start:var(--space-2);margin-inline-end:var(--space-2);}
+.flushStartCss-fz9snbo{margin-inline-start:calc(var(--space-2) * -1);}
+.flushEndCss-f1y0pij6{margin-inline-end:calc(var(--space-2) * -1);}