@coinbase/cds-web 0.0.0 → 8.13.1

package/esm/dots/DotCount.js

@@ -0,0 +1,84 @@
+const _excluded = ["children", "pin", "variant", "count", "max", "testID", "accessibilityLabel", "overlap", "className", "classNames", "style", "styles"];
+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 { dotOpacityEnterConfig, dotOpacityExitConfig, dotScaleEnterConfig, dotScaleExitConfig } from '@coinbase/cds-common/motion/dot';
+import { dotCountSize } from '@coinbase/cds-common/tokens/dot';
+import { parseDotCountMaxOverflow } from '@coinbase/cds-common/utils/parseDotCountMaxOverflow';
+import { m as motion } from 'framer-motion';
+import { NewAnimatePresence } from '../animation/NewAnimatePresence';
+import { cx } from '../cx';
+import { useTheme } from '../hooks/useTheme';
+import { useMotionProps } from '../motion/useMotionProps';
+import { Text } from '../typography/Text';
+import { getTransform } from './dotStyles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const baseCss = "baseCss-b1qqkfau";
+const dotCountContentCss = "dotCountContentCss-dqpqhs5";
+const variantColorMap = {
+  negative: 'fgNegative'
+};
+export const DotCount = /*#__PURE__*/memo(_ref => {
+  let {
+      children,
+      pin,
+      variant = 'negative',
+      count,
+      max,
+      testID,
+      accessibilityLabel,
+      overlap,
+      className,
+      classNames,
+      style,
+      styles
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    color
+  } = useTheme();
+  const pinStyles = getTransform(pin, overlap);
+  const containerStyles = useMemo(() => {
+    const variantColor = variantColorMap[variant];
+    return _objectSpread(_objectSpread({
+      backgroundColor: color[variantColor],
+      borderColor: color.bgSecondary
+    }, pinStyles), styles === null || styles === void 0 ? void 0 : styles.container);
+  }, [color, pinStyles, styles === null || styles === void 0 ? void 0 : styles.container, variant]);
+  const motionProps = useMotionProps({
+    enterConfigs: [dotOpacityEnterConfig, dotScaleEnterConfig],
+    exitConfigs: [dotOpacityExitConfig, dotScaleExitConfig],
+    exit: 'exit'
+  });
+  const rootStyles = useMemo(() => _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root), [styles === null || styles === void 0 ? void 0 : styles.root, style]);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    "aria-label": accessibilityLabel,
+    className: cx(baseCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    "data-testid": testID,
+    style: rootStyles
+  }, props), {}, {
+    children: [children, /*#__PURE__*/_jsx(NewAnimatePresence, {
+      children: count > 0 && /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, motionProps), {}, {
+        className: cx(dotCountContentCss, classNames === null || classNames === void 0 ? void 0 : classNames.container),
+        "data-testid": "dotcount-container",
+        style: containerStyles,
+        children: /*#__PURE__*/_jsx(Text, {
+          as: "p",
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.text,
+          color: "fgInverse",
+          display: "block",
+          font: "caption",
+          style: styles === null || styles === void 0 ? void 0 : styles.text,
+          textAlign: "center",
+          children: parseDotCountMaxOverflow(count, max)
+        })
+      }))
+    })]
+  }));
+});
+import "./DotCount.css";

package/esm/dots/DotStatusColor.css

@@ -0,0 +1 @@
+.baseCss-bai08ur{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;position:relative;}

package/esm/dots/DotStatusColor.js

@@ -0,0 +1,60 @@
+const _excluded = ["variant", "pin", "size", "overlap", "children", "testID", "accessibilityLabel"];
+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 { useTheme } from '../hooks/useTheme';
+import { handlePreventPropagation } from '../utils/eventHandlers';
+import { getTransform } from './dotStyles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const baseCss = "baseCss-bai08ur";
+const variantColorMap = {
+  primary: 'fgPrimary',
+  positive: 'fgPositive',
+  negative: 'fgNegative',
+  foregroundMuted: 'fgMuted',
+  warning: 'fgWarning'
+};
+export const DotStatusColor = /*#__PURE__*/memo(_ref => {
+  let {
+      variant,
+      pin,
+      size = 's',
+      overlap,
+      children,
+      testID,
+      accessibilityLabel
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    color
+  } = useTheme();
+  const pinStyles = getTransform(pin, overlap);
+  const styles = useMemo(() => {
+    const variantColor = variantColorMap[variant];
+    return _objectSpread({
+      borderRadius: 'var(--borderRadius-1000)',
+      width: "var(--iconSize-".concat(size, ")"),
+      height: "var(--iconSize-".concat(size, ")"),
+      backgroundColor: color[variantColor],
+      alignItems: 'center',
+      justifyContent: 'center'
+    }, pinStyles);
+  }, [color, pinStyles, size, variant]);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    "aria-label": accessibilityLabel,
+    className: baseCss,
+    "data-testid": testID
+  }, props), {}, {
+    children: [children, /*#__PURE__*/_jsx("div", {
+      "data-testid": "dotstatuscolor-inner-container",
+      onClick: handlePreventPropagation,
+      style: styles
+    })]
+  }));
+});
+import "./DotStatusColor.css";

package/esm/dots/DotSymbol.css

@@ -0,0 +1,3 @@
+.remoteImageCss-r1kn5cfm{border-color:var(--color-bgSecondary);border-width:1px;}
+.iconContainerCss-i1ydqo2q{border-width:2px;}
+.baseCss-b1pmh90n{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;position:relative;}

package/esm/dots/DotSymbol.js

@@ -0,0 +1,86 @@
+const _excluded = ["children", "symbol", "pin", "source", "iconName", "size", "active", "testID", "overlap", "color", "background", "borderColor", "style", "className", "iconStyle", "iconClassName", "imageStyle", "imageClassName", "accessibilityLabel"];
+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 { cx } from '../cx';
+import { Icon } from '../icons/Icon';
+import { Box } from '../layout/Box';
+import { RemoteImage } from '../media/RemoteImage';
+import { handlePreventPropagation } from '../utils/eventHandlers';
+import { getTransform } from './dotStyles';
+
+// These widths sizes are using px not
+// spacing because it shouldn't change with density.
+// And spacing doesn't support such small pixel size
+// either
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const remoteImageCss = "remoteImageCss-r1kn5cfm";
+
+// Not using spacing, same as above reasoning
+const iconContainerCss = "iconContainerCss-i1ydqo2q";
+const baseCss = "baseCss-b1pmh90n";
+const aspectRatio = [1, 1];
+export const DotSymbol = /*#__PURE__*/memo(_ref => {
+  let {
+      children,
+      symbol,
+      pin,
+      source,
+      iconName,
+      size = 's',
+      active,
+      testID,
+      overlap,
+      color = 'fgInverse',
+      background = 'fgPrimary',
+      borderColor = 'bgSecondary',
+      style,
+      className,
+      iconStyle,
+      iconClassName,
+      imageStyle,
+      imageClassName,
+      accessibilityLabel
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const pinStyles = getTransform(pin, overlap);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    "aria-label": accessibilityLabel,
+    className: cx(baseCss, className),
+    "data-testid": testID
+  }, props), {}, {
+    style: style,
+    children: [children, /*#__PURE__*/_jsxs("div", {
+      "data-testid": "dotsymbol-inner-container",
+      onClick: handlePreventPropagation,
+      style: pinStyles,
+      children: [source && /*#__PURE__*/_jsx(RemoteImage, {
+        aspectRatio: aspectRatio,
+        className: cx(remoteImageCss, imageClassName),
+        shape: "circle",
+        source: source,
+        style: imageStyle,
+        width: "var(--iconSize-".concat(size, ")")
+      }), iconName && /*#__PURE__*/_jsx(Box, {
+        background: background,
+        borderColor: borderColor,
+        borderRadius: 1000,
+        className: cx(iconContainerCss, iconClassName),
+        padding: 0.5,
+        style: iconStyle,
+        children: /*#__PURE__*/_jsx(Icon, {
+          active: active,
+          color: color,
+          name: iconName,
+          size: size
+        })
+      }), symbol]
+    })]
+  }));
+});
+import "./DotSymbol.css";

package/esm/dots/__figma__/DotCount.figma.js

@@ -0,0 +1,19 @@
+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 { figma } from '@figma/code-connect';
+import { DotCount } from '../DotCount';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(DotCount, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=155%3A11976', {
+  imports: ["import { DotCount } from '@coinbase/cds-web/dots/DotCount';"],
+  props: {
+    count: figma.enum('type', {
+      'single digit': 1,
+      '2 digits': 12,
+      '3+ digits': 123
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(DotCount, _objectSpread({}, props))
+});

package/esm/dots/__figma__/DotStatusColor.figma.js

@@ -0,0 +1,27 @@
+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 from 'react';
+import { figma } from '@figma/code-connect';
+import { DotStatusColor } from '../DotStatusColor';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(DotStatusColor, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=155%3A11983', {
+  imports: ["import { DotStatusColor } from '@coinbase/cds-web/dots/DotStatusColor';"],
+  props: {
+    variant: figma.enum('variant', {
+      positive: 'positive',
+      negative: 'negative',
+      primary: 'primary',
+      foregroundMuted: 'foregroundMuted'
+    }),
+    size: figma.enum('size', {
+      l: 'l',
+      m: 'm',
+      s: 's',
+      xs: 'xs'
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(DotStatusColor, _objectSpread({}, props))
+});

package/esm/dots/__figma__/DotSymbol.figma.js

@@ -0,0 +1,49 @@
+const _excluded = ["children"];
+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 { figma } from '@figma/code-connect';
+import { DotSymbol } from '../DotSymbol';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(DotSymbol, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=155%3A12033', {
+  imports: ["import { DotSymbol } from'@coinbase/cds-web/dots/DotSymbol';"],
+  props: {
+    children: figma.enum('symbol size', {
+      l: figma.instance('48 media'),
+      m: figma.instance('32 media'),
+      s: figma.instance('32 media'),
+      xs: figma.instance('24 media')
+    }),
+    symbol: figma.enum('symbol size', {
+      l: figma.instance('l dot'),
+      m: figma.instance('m dot'),
+      s: figma.instance('s dot'),
+      xs: figma.instance('xs dot')
+    }),
+    pin: figma.enum('pin', {
+      'bottom-end': 'bottom-end',
+      'bottom-start': 'bottom-start',
+      'top-start': 'top-start',
+      'top-end': 'top-end'
+    }),
+    size: figma.enum('symbol size', {
+      l: 'l',
+      m: 'm',
+      s: 's',
+      xs: 'xs'
+    })
+  },
+  example: _ref => {
+    let {
+        children
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/_jsx(DotSymbol, _objectSpread(_objectSpread({}, props), {}, {
+      children: children
+    }));
+  }
+});

package/esm/dots/dotStyles.js

@@ -0,0 +1,31 @@
+export const getTransform = (pin, overlap) => {
+  if (pin === undefined) {
+    return {};
+  }
+
+  // splits string based on dash. (i.e top-right -> [top, right])
+  const directions = pin.split('-');
+
+  // If placement is incorrectly formatted, then return empty array
+  if (directions.length !== 2) return {};
+  const [vertical, horizontal] = directions;
+  const transformedHorizontal = horizontal === 'start' ? 'left' : 'right';
+  const verticalMultiplier = vertical === 'bottom' ? 1 : -1;
+  const horizontalMultiplier = horizontal === 'end' ? 1 : -1;
+
+  // If the content we are overlapping has a circular shape
+  // we need to apply more transformation to the dot
+  // so it sits on the circle rather than awkwardly outside
+  // inspiration: https://mui.com/material-ui/react-badge/#badge-overlap
+  // 14% because that is what yields the best result :p
+  const amountToShift = overlap === 'circular' ? '14%' : 0;
+  return {
+    position: 'absolute',
+    [transformedHorizontal]: amountToShift,
+    [vertical]: amountToShift,
+    transform: "translate(".concat(horizontalMultiplier * 50, "%, ").concat(verticalMultiplier * 50, "%)"),
+    // for DotCount because transform will be overridden by motion styles
+    translateX: "".concat(horizontalMultiplier * 50, "%"),
+    translateY: "".concat(verticalMultiplier * 50, "%")
+  };
+};

package/esm/dots/index.js

@@ -0,0 +1,3 @@
+export * from './DotCount';
+export * from './DotStatusColor';
+export * from './DotSymbol';

package/esm/dropdown/Dropdown.js

@@ -0,0 +1,213 @@
+const _excluded = ["children", "onOpenMenu", "onCloseMenu", "content", "disablePortal", "value", "disableCloseOnOptionChange", "visible", "onChange", "width", "disabled", "controlledElementAccessibilityProps", "respectNegativeTabIndex", "restoreFocusOnUnmount"],
+  _excluded2 = ["content", "showOverlay", "children", "visible", "onCloseMenu", "onOpenMenu", "width", "minWidth", "maxWidth", "value", "disableCloseOnOptionChange", "testID", "maxHeight", "onChange", "disablePortal", "onBlur", "contentPosition", "block", "disabled", "restoreFocusOnUnmount"],
+  _excluded3 = ["children", "maxHeight", "enableMobileModal", "onOpenMenu", "onCloseMenu", "restoreFocusOnUnmount"];
+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, useMemo, useState } from 'react';
+import useMeasure from 'react-use-measure';
+import { SelectProvider } from '../controls/selectContext';
+import { useBreakpoints } from '../hooks/useBreakpoints';
+import { FocusTrap } from '../overlays/FocusTrap';
+import { ModalWrapper } from '../overlays/modal/ModalWrapper';
+import { Popover } from '../overlays/popover/Popover';
+import { DropdownContent } from './DropdownContent';
+import { useResponsiveHeight } from './useResponsiveHeight';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DROPDOWN_MAX_HEIGHT = 300;
+const NOOP = () => {};
+const ModalDropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      children,
+      onOpenMenu = NOOP,
+      onCloseMenu = NOOP,
+      content,
+      disablePortal,
+      value,
+      disableCloseOnOptionChange,
+      visible,
+      onChange,
+      width,
+      disabled,
+      controlledElementAccessibilityProps,
+      respectNegativeTabIndex,
+      restoreFocusOnUnmount
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const context = useMemo(() => ({
+    onChange,
+    value,
+    handleCloseMenu: !disableCloseOnOptionChange ? onCloseMenu : undefined
+  }), [onChange, value, disableCloseOnOptionChange, onCloseMenu]);
+  useImperativeHandle(ref, () => ({
+    openMenu: onOpenMenu,
+    closeMenu: onCloseMenu
+  }), [onOpenMenu, onCloseMenu]);
+  return /*#__PURE__*/_jsxs(SelectProvider, {
+    value: context,
+    children: [/*#__PURE__*/_jsx(ModalWrapper, _objectSpread(_objectSpread({
+      dangerouslyDisableResponsiveness: true,
+      disablePortal: disablePortal,
+      onOverlayPress: onCloseMenu,
+      testID: "dropdown-modal",
+      visible: visible
+    }, controlledElementAccessibilityProps), {}, {
+      children: /*#__PURE__*/_jsx(FocusTrap, {
+        disableAutoFocus: !!value,
+        onEscPress: onCloseMenu,
+        respectNegativeTabIndex: respectNegativeTabIndex,
+        restoreFocusOnUnmount: restoreFocusOnUnmount,
+        children: /*#__PURE__*/_jsx(DropdownContent, _objectSpread(_objectSpread({}, props), {}, {
+          children: content
+        }))
+      })
+    })), /*#__PURE__*/_jsx("div", {
+      onClick: disabled ? undefined : onOpenMenu,
+      onKeyDown: onOpenMenu,
+      style: {
+        width
+      },
+      children: children
+    })]
+  });
+}));
+const defaultPopoverContentPositionConfig = {
+  gap: 0.5,
+  placement: 'bottom-start'
+};
+
+// remove the modal implementation detail from the shared props - this prop should ideally be removed in the future or made generic
+
+const PopoverDropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      content,
+      showOverlay,
+      children,
+      visible,
+      onCloseMenu = NOOP,
+      onOpenMenu = NOOP,
+      width,
+      minWidth,
+      maxWidth,
+      value,
+      disableCloseOnOptionChange,
+      testID,
+      maxHeight,
+      onChange,
+      disablePortal,
+      onBlur,
+      contentPosition = defaultPopoverContentPositionConfig,
+      block,
+      disabled,
+      restoreFocusOnUnmount
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  const [dropdownRef, dropdownBounds] = useMeasure();
+  const [subjectRef, subjectBounds] = useMeasure();
+
+  // if consumer only customizes some of the contentPosition values, we want to merge them with the defaults
+  const combinedContentPosition = useMemo(() => _objectSpread(_objectSpread({}, defaultPopoverContentPositionConfig), contentPosition), [contentPosition]);
+  const {
+    dropdownHeight
+  } = useResponsiveHeight({
+    gap: combinedContentPosition.gap,
+    dropdownBounds,
+    maxHeight,
+    visible,
+    placement: combinedContentPosition.placement
+  });
+  const context = useMemo(() => ({
+    onChange,
+    value,
+    handleCloseMenu: !disableCloseOnOptionChange ? onCloseMenu : undefined
+  }), [onChange, value, disableCloseOnOptionChange, onCloseMenu]);
+  const memoizedContent = useMemo(() => {
+    return /*#__PURE__*/_jsx(DropdownContent, {
+      ref: dropdownRef,
+      maxHeight: dropdownHeight,
+      maxWidth: maxWidth,
+      minWidth: minWidth,
+      placement: combinedContentPosition.placement,
+      width: block ? subjectBounds.width : width,
+      children: content
+    });
+  }, [dropdownRef, dropdownHeight, maxWidth, minWidth, combinedContentPosition.placement, block, subjectBounds.width, width, content]);
+  useImperativeHandle(ref, () => ({
+    openMenu: onOpenMenu,
+    closeMenu: onCloseMenu
+  }), [onOpenMenu, onCloseMenu]);
+  return /*#__PURE__*/_jsx(SelectProvider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(Popover
+    // DropdownContent will handle exit animation on menu blur, including pressing the subject again to close
+    , _objectSpread(_objectSpread({
+      block: block,
+      content: disabled ? undefined : memoizedContent,
+      contentPosition: combinedContentPosition,
+      disableAutoFocus: !!value,
+      disablePortal: disablePortal,
+      disabled: disabled,
+      onBlur: onBlur,
+      onClose: onCloseMenu,
+      onPressSubject: !visible ? onOpenMenu : undefined,
+      restoreFocusOnUnmount: restoreFocusOnUnmount,
+      showOverlay: showOverlay,
+      testID: testID,
+      visible: disabled ? false : visible
+    }, props), {}, {
+      children: /*#__PURE__*/_jsx("div", {
+        ref: subjectRef,
+        style: {
+          width: '100%'
+        },
+        children: children
+      })
+    }))
+  });
+}));
+export const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+      children,
+      maxHeight = DROPDOWN_MAX_HEIGHT,
+      enableMobileModal,
+      onOpenMenu,
+      onCloseMenu,
+      restoreFocusOnUnmount = true
+    } = _ref3,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  const {
+    isPhone
+  } = useBreakpoints();
+  const [visible, setVisible] = useState(false);
+  const handleOpenMenu = useCallback(() => {
+    setVisible(true);
+    onOpenMenu === null || onOpenMenu === void 0 || onOpenMenu();
+  }, [onOpenMenu]);
+  const handleCloseMenu = useCallback(() => {
+    setVisible(false);
+    onCloseMenu === null || onCloseMenu === void 0 || onCloseMenu();
+  }, [onCloseMenu]);
+  return isPhone && enableMobileModal ? /*#__PURE__*/_jsx(ModalDropdown, _objectSpread(_objectSpread({
+    ref: ref,
+    maxHeight: maxHeight,
+    onCloseMenu: handleCloseMenu,
+    onOpenMenu: handleOpenMenu,
+    restoreFocusOnUnmount: restoreFocusOnUnmount,
+    visible: visible
+  }, props), {}, {
+    children: children
+  })) : /*#__PURE__*/_jsx(PopoverDropdown, _objectSpread(_objectSpread({
+    ref: ref,
+    maxHeight: maxHeight,
+    onCloseMenu: handleCloseMenu,
+    onOpenMenu: handleOpenMenu,
+    restoreFocusOnUnmount: restoreFocusOnUnmount,
+    visible: visible
+  }, props), {}, {
+    children: children
+  }));
+}));

package/esm/dropdown/DropdownContent.js

@@ -0,0 +1,51 @@
+const _excluded = ["children", "placement", "minWidth"];
+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 } from 'react';
+import { animateDropdownOpacityInConfig, animateDropdownOpacityOutConfig, animateDropdownTransformInConfig, animateDropdownTransformOutConfig } from '@coinbase/cds-common/animation/dropdown';
+import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
+import { m as motion } from 'framer-motion';
+import { VStack } from '../layout/VStack';
+import { useMotionProps } from '../motion/useMotionProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const dropdownStaticClassName = 'cds-dropdown';
+const MotionVStack = motion(VStack);
+export const DropdownContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      children,
+      placement,
+      minWidth = 'min-content'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const isHorizontal = (placement === null || placement === void 0 ? void 0 : placement.includes('left')) || (placement === null || placement === void 0 ? void 0 : placement.includes('right'));
+  const translate = isHorizontal ? 'x' : 'y';
+  const motionProps = useMotionProps({
+    enterConfigs: [animateDropdownOpacityInConfig, _objectSpread(_objectSpread({}, animateDropdownTransformInConfig), {}, {
+      property: translate
+    })],
+    exitConfigs: [animateDropdownOpacityOutConfig, _objectSpread(_objectSpread({}, animateDropdownTransformOutConfig), {}, {
+      property: translate
+    })],
+    exit: 'exit'
+  });
+  return /*#__PURE__*/_jsx(MotionVStack, _objectSpread(_objectSpread(_objectSpread({
+    ref: ref,
+    bordered: true,
+    background: "bg",
+    borderRadius: 400,
+    className: dropdownStaticClassName,
+    elevation: 2,
+    minWidth: minWidth,
+    overflow: "auto",
+    role: "menu",
+    tabIndex: 0,
+    zIndex: zIndex.dropdown
+  }, props), motionProps), {}, {
+    children: children
+  }));
+}));

package/esm/dropdown/DropdownProps.js

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

package/esm/dropdown/MenuItem.css

@@ -0,0 +1 @@
+.insetFocusRingCss-i1q44bo1{position:relative;}.insetFocusRingCss-i1q44bo1:focus{outline:none;}.insetFocusRingCss-i1q44bo1:focus-visible{outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:0;}