@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/AccessibilityAnnouncer/AccessibilityAnnouncer.js

@@ -0,0 +1,46 @@
+import React, { forwardRef, memo, useEffect, useRef, useState } from 'react';
+import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DISPLAY_MESSAGE_MS = 500; // Needs to be *just* long enough for screen readers to pick it up
+let timerId;
+const baseCss = "baseCss-b17wta2u";
+export const AccessibilityAnnouncer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+    message,
+    politeness = 'polite',
+    testID = 'cds-accessibility-announcer'
+  } = _ref;
+  /** REMOVE NODE AFTER ONE SECOND
+   * While ARIA provides methods to allow only changes or methods that force the entire region to announce those methods are not full proof. To be robust and compatible with all screen readers we should clear the live region after each usage. This ensures that all screen reader and browser combinations will get the announcement. Here is a compatibility test and some bugs found even now with aria-live regions.
+   * @link https://terrillthompson.com/tests/aria/live-scores.html
+   * */
+  const [isVisible, setIsVisible] = useState(true);
+  const messageRef = useRef(null);
+  const mergedRef = useMergeRefs(forwardedRef, messageRef);
+  useEffect(() => {
+    setIsVisible(true);
+
+    // Hide the message immediately after it mounts
+    if (message) {
+      timerId = setTimeout(() => {
+        setIsVisible(false);
+      }, DISPLAY_MESSAGE_MS);
+    }
+
+    // Cleanup
+    return () => clearTimeout(timerId);
+  }, [message, setIsVisible]);
+  return /*#__PURE__*/_jsx("div", {
+    "aria-atomic": true,
+    "aria-live": politeness,
+    className: baseCss,
+    "data-testid": testID,
+    children: isVisible && /*#__PURE__*/_jsx("p", {
+      ref: mergedRef,
+      "data-testid": "".concat(testID, "--message"),
+      children: message
+    })
+  });
+}));
+AccessibilityAnnouncer.displayName = 'AccessibilityAnnouncer';
+import "./AccessibilityAnnouncer.css";

package/esm/accordion/Accordion.js

@@ -0,0 +1,35 @@
+import React, { Children } from 'react';
+import { AccordionProvider } from '@coinbase/cds-common/accordion/AccordionProvider';
+import { join } from '@coinbase/cds-common/utils/join';
+import { useTheme } from '../hooks/useTheme';
+import { Divider, VStack } from '../layout';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Accordion = _ref => {
+  let {
+    activeKey,
+    children,
+    defaultActiveKey,
+    onChange,
+    setActiveKey,
+    testID,
+    style
+  } = _ref;
+  const {
+    activeColorScheme
+  } = useTheme();
+  const dividerColor = activeColorScheme === 'light' ? 'bgLine' : 'bgLineHeavy';
+  return /*#__PURE__*/_jsx(AccordionProvider, {
+    activeKey: activeKey,
+    defaultActiveKey: defaultActiveKey,
+    onChange: onChange,
+    setActiveKey: setActiveKey,
+    children: /*#__PURE__*/_jsx(VStack, {
+      style: style,
+      testID: testID,
+      width: "100%",
+      children: join(Children.toArray(children), /*#__PURE__*/_jsx(Divider, {
+        color: dividerColor
+      }))
+    })
+  });
+};

package/esm/accordion/AccordionHeader.css

@@ -0,0 +1,3 @@
+@layer cds{.baseCss-bt1rln1{margin:0;}
+.subtitleCss-sve89pn{overflow:auto;text-overflow:unset;white-space:normal;}
+.titleCss-t166a7nm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}}

package/esm/accordion/AccordionHeader.js

@@ -0,0 +1,125 @@
+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 } from 'react';
+import { useAccordionContext } from '@coinbase/cds-common/accordion/AccordionProvider';
+import { accordionIconHiddenRotate, accordionIconVisibleRotate } from '@coinbase/cds-common/animation/accordion';
+import { listHeight } from '@coinbase/cds-common/tokens/cell';
+import { useCellSpacing } from '../hooks/useCellSpacing';
+import { Box, HStack, VStack } from '../layout';
+import { AnimatedCaret } from '../motion/AnimatedCaret';
+import { Pressable } from '../system/Pressable';
+import { Text } from '../typography/Text';
+import { getAccordionHeaderId, getAccordionPanelId } from './utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const baseCss = "baseCss-bt1rln1";
+const subtitleCss = "subtitleCss-sve89pn";
+const titleCss = "titleCss-t166a7nm";
+export const AccordionMedia = /*#__PURE__*/memo(_ref => {
+  let {
+    media
+  } = _ref;
+  return /*#__PURE__*/_jsx(Box, {
+    flexGrow: 0,
+    flexShrink: 0,
+    children: media
+  });
+});
+export const AccordionTitle = /*#__PURE__*/memo(_ref2 => {
+  let {
+    title,
+    subtitle
+  } = _ref2;
+  return /*#__PURE__*/_jsx(Box, {
+    className: titleCss,
+    flexGrow: 1,
+    flexShrink: 1,
+    justifyContent: "flex-start",
+    children: /*#__PURE__*/_jsxs(VStack, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        as: "div",
+        display: "block",
+        font: "headline",
+        overflow: "wrap",
+        children: title
+      }), !!subtitle && /*#__PURE__*/_jsx(Text, {
+        as: "div",
+        className: subtitleCss,
+        color: "fgMuted",
+        display: "block",
+        font: "body",
+        overflow: "wrap",
+        children: subtitle
+      })]
+    })
+  });
+});
+export const AccordionIcon = /*#__PURE__*/memo(_ref3 => {
+  let {
+    collapsed
+  } = _ref3;
+  return /*#__PURE__*/_jsx(Box, {
+    justifyContent: "flex-end",
+    children: /*#__PURE__*/_jsx(AnimatedCaret, {
+      rotate: collapsed ? accordionIconHiddenRotate : accordionIconVisibleRotate
+    })
+  });
+});
+/**
+ * Renders a Pressable element to use as the header to an AccordionItem.
+ * Composes an Accordion Media, Title, and Icon.
+ */
+export const AccordionHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, forwardedRef) => {
+  let {
+    itemKey,
+    title,
+    subtitle,
+    onClick,
+    media,
+    collapsed = false,
+    testID
+  } = _ref4;
+  const {
+    setActiveKey,
+    activeKey
+  } = useAccordionContext();
+  const spacing = useCellSpacing();
+  const handleClick = useCallback(() => {
+    onClick === null || onClick === void 0 || onClick(itemKey);
+    setActiveKey(itemKey === activeKey ? null : itemKey);
+  }, [onClick, setActiveKey, itemKey, activeKey]);
+  return /*#__PURE__*/_jsx("h2", {
+    className: baseCss,
+    children: /*#__PURE__*/_jsx(Pressable, {
+      ref: forwardedRef,
+      noScaleOnPress: true,
+      transparentWhileInactive: true,
+      "aria-controls": getAccordionPanelId(itemKey),
+      "aria-expanded": !collapsed // a11y guideline: https://www.w3.org/TR/wai-aria-practices/#accordion
+      ,
+      background: "bg",
+      id: getAccordionHeaderId(itemKey),
+      onClick: handleClick,
+      testID: testID,
+      width: "100%",
+      children: /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
+        alignItems: "center",
+        gap: 2,
+        minHeight: listHeight,
+        width: "100%"
+      }, spacing.outer), {}, {
+        children: [!!media && /*#__PURE__*/_jsx(AccordionMedia, {
+          media: media
+        }), /*#__PURE__*/_jsx(AccordionTitle, {
+          subtitle: subtitle,
+          title: title
+        }), /*#__PURE__*/_jsx(AccordionIcon, {
+          collapsed: collapsed
+        })]
+      }))
+    })
+  });
+}));
+import "./AccordionHeader.css";

package/esm/accordion/AccordionItem.js

@@ -0,0 +1,53 @@
+import React, { memo } from 'react';
+import { useAccordionContext } from '@coinbase/cds-common/accordion/AccordionProvider';
+import { accordionMinWidth } from '@coinbase/cds-common/tokens/accordion';
+import { VStack } from '../layout/VStack';
+import { AccordionHeader } from './AccordionHeader';
+import { AccordionPanel } from './AccordionPanel';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A component that represents a single item within an Accordion.
+ * It composes together an AccordionHeader and a collapsible AccordionPanel.
+ * Accepts a unique `itemKey` prop to uniquely identify one item from another within the same Accordion.
+ */
+export const AccordionItem = /*#__PURE__*/memo(_ref => {
+  let {
+    itemKey,
+    title,
+    subtitle,
+    children,
+    onClick,
+    media,
+    testID,
+    headerRef,
+    panelRef,
+    maxHeight,
+    style
+  } = _ref;
+  const {
+    activeKey
+  } = useAccordionContext();
+  const collapsed = activeKey !== itemKey;
+  return /*#__PURE__*/_jsxs(VStack, {
+    minWidth: accordionMinWidth,
+    style: style,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(AccordionHeader, {
+      ref: headerRef,
+      collapsed: collapsed,
+      itemKey: itemKey,
+      media: media,
+      onClick: onClick,
+      subtitle: subtitle,
+      testID: testID && "".concat(testID, "-header"),
+      title: title
+    }), /*#__PURE__*/_jsx(AccordionPanel, {
+      ref: panelRef,
+      collapsed: collapsed,
+      itemKey: itemKey,
+      maxHeight: maxHeight,
+      testID: testID && "".concat(testID, "-panel"),
+      children: children
+    })]
+  });
+});

package/esm/accordion/AccordionPanel.js

@@ -0,0 +1,36 @@
+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 } from 'react';
+import { accordionVisibleMaxHeight } from '@coinbase/cds-common/animation/accordion';
+import { accordionSpacing } from '@coinbase/cds-common/tokens/accordion';
+import { Collapsible } from '../collapsible';
+import { getAccordionHeaderId, getAccordionPanelId } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Renders a collapsible element to use as the primary content container for an AccordionItem.
+ * Accepts a unique `itemKey` prop to uniquely identify one panel from another.
+ */
+export const AccordionPanel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+    children,
+    collapsed = true,
+    itemKey,
+    testID,
+    maxHeight: maxHeightParam
+  } = _ref;
+  return /*#__PURE__*/_jsx(Collapsible, _objectSpread(_objectSpread({
+    ref: forwardedRef,
+    collapsed: collapsed,
+    maxHeight: maxHeightParam !== null && maxHeightParam !== void 0 ? maxHeightParam : accordionVisibleMaxHeight,
+    testID: testID
+  }, accordionSpacing), {}, {
+    // a11y guideline: https://www.w3.org/TR/wai-aria-practices/#accordion
+    accessibilityLabelledBy: getAccordionHeaderId(itemKey),
+    id: getAccordionPanelId(itemKey),
+    role: "region",
+    children: children
+  }));
+}));

package/esm/accordion/__figma__/Accordion.figma.js

@@ -0,0 +1,47 @@
+const _excluded = ["defaultActiveKey", "itemContent"];
+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 { Accordion } from '../Accordion';
+import { AccordionItem } from '../AccordionItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Accordion, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=148%3A2954', {
+  imports: ["import { Accordion } from '@coinbase/cds-web/accordion/Accordion';", "import { AccordionItem } from '@coinbase/cds-web/accordion/AccordionItem';"],
+  props: {
+    subtitle: figma.boolean('show subtitle', {
+      true: figma.string('subtitle'),
+      false: undefined
+    }),
+    media: figma.boolean('show media', {
+      true: figma.instance('media'),
+      false: undefined
+    }),
+    title: figma.textContent('title'),
+    defaultActiveKey: figma.boolean('show panel', {
+      true: '1',
+      false: undefined
+    }),
+    itemContent: figma.instance('🔄 replace me')
+  },
+  example: _ref => {
+    let {
+        defaultActiveKey,
+        itemContent
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/_jsx(Accordion, {
+      defaultActiveKey: defaultActiveKey,
+      children: /*#__PURE__*/_jsx(AccordionItem, _objectSpread(_objectSpread({
+        itemKey: "1"
+      }, props), {}, {
+        children: itemContent
+      }))
+    });
+  }
+});

package/esm/accordion/index.js

@@ -0,0 +1,2 @@
+export * from './Accordion';
+export * from './AccordionItem';

package/esm/accordion/utils.js

@@ -0,0 +1,2 @@
+export const getAccordionHeaderId = itemKey => "accordion-item-".concat(itemKey, "-header");
+export const getAccordionPanelId = itemKey => "accordion-item-".concat(itemKey, "-panel");

package/esm/animation/Lottie.css

@@ -0,0 +1 @@
+@layer cds{.lottieCss-lgkhslj .palette_fg_stroke{stroke:var(--color-fg);}.lottieCss-lgkhslj .palette_fg_fill{fill:var(--color-fg);}.lottieCss-lgkhslj .palette_fgMuted_stroke{stroke:var(--color-fgMuted);}.lottieCss-lgkhslj .palette_fgMuted_fill{fill:var(--color-fgMuted);}.lottieCss-lgkhslj .palette_bg_stroke{stroke:var(--color-bg);}.lottieCss-lgkhslj .palette_bg_fill{fill:var(--color-bg);}.lottieCss-lgkhslj .palette_bgAlternate_stroke{stroke:var(--color-bgAlternate);}.lottieCss-lgkhslj .palette_bgAlternate_fill{fill:var(--color-bgAlternate);}.lottieCss-lgkhslj .palette_bgInverse_stroke{stroke:var(--color-bgInverse);}.lottieCss-lgkhslj .palette_bgInverse_fill{fill:var(--color-bgInverse);}.lottieCss-lgkhslj .palette_bgOverlay_stroke{stroke:var(--color-bgOverlay);}.lottieCss-lgkhslj .palette_bgOverlay_fill{fill:var(--color-bgOverlay);}.lottieCss-lgkhslj .palette_bgLine_stroke{stroke:var(--color-bgLineHeavy);}.lottieCss-lgkhslj .palette_bgLine_fill{fill:var(--color-bgLineHeavy);}.lottieCss-lgkhslj .palette_bgLineHeavy_stroke{stroke:var(--color-bgLineHeavy);}.lottieCss-lgkhslj .palette_bgLineHeavy_fill{fill:var(--color-bgLineHeavy);}.lottieCss-lgkhslj .palette_bgPrimary_stroke{stroke:var(--color-bgPrimary);}.lottieCss-lgkhslj .palette_bgPrimary_fill{fill:var(--color-bgPrimary);}.lottieCss-lgkhslj .palette_bgPrimaryWash_stroke{stroke:var(--color-bgPrimaryWash);}.lottieCss-lgkhslj .palette_bgPrimaryWash_fill{fill:var(--color-bgPrimaryWash);}.lottieCss-lgkhslj .palette_fgInverse_stroke{stroke:var(--color-fgInverse);}.lottieCss-lgkhslj .palette_fgInverse_fill{fill:var(--color-fgInverse);}.lottieCss-lgkhslj .palette_bgNegative_stroke{stroke:var(--color-bgNegative);}.lottieCss-lgkhslj .palette_bgNegative_fill{fill:var(--color-bgNegative);}.lottieCss-lgkhslj .palette_bgNegativeWash_stroke{stroke:var(--color-bgNegativeWash);}.lottieCss-lgkhslj .palette_bgNegativeWash_fill{fill:var(--color-bgNegativeWash);}.lottieCss-lgkhslj .palette_bgPositive_stroke{stroke:var(--color-bgPositive);}.lottieCss-lgkhslj .palette_bgPositive_fill{fill:var(--color-bgPositive);}.lottieCss-lgkhslj .palette_bgSecondary_stroke{stroke:var(--color-bgSecondary);}.lottieCss-lgkhslj .palette_bgSecondary_fill{fill:var(--color-bgSecondary);}.lottieCss-lgkhslj .palette_transparent_stroke{stroke:var(--color-transparent);}.lottieCss-lgkhslj .palette_transparent_fill{fill:var(--color-transparent);}.lottieCss-lgkhslj .palette_bgWarning_stroke{stroke:var(--color-bgWarning);}.lottieCss-lgkhslj .palette_bgWarning_fill{fill:var(--color-bgWarning);}.lottieCss-lgkhslj .palette_bgWarningWash_stroke{stroke:var(--color-bgWarningWash);}.lottieCss-lgkhslj .palette_bgWarningWash_fill{fill:var(--color-bgWarningWash);}}

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]);
+};