@coinbase/cds-mobile 9.6.3 → 9.6.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dts/tabs/SegmentedTab.d.ts.map +1 -1
- package/dts/tabs/Tabs.d.ts.map +1 -1
- package/dts/visualizations/chart/PeriodSelector.d.ts.map +1 -1
- package/esm/tabs/SegmentedTab.js +6 -3
- package/esm/tabs/Tabs.js +56 -27
- package/esm/visualizations/chart/PeriodSelector.js +19 -20
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,13 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 9.6.4 (7/13/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🐞 Fixes
|
|
14
|
+
|
|
15
|
+
- Fix: tabs remount single frame delay. [[#791](https://github.com/coinbase/cds/pull/791)]
|
|
16
|
+
- Fix: tabs reanimated value changes during render. [[#791](https://github.com/coinbase/cds/pull/791)]
|
|
17
|
+
|
|
11
18
|
## 9.6.3 (7/9/2026 PST)
|
|
12
19
|
|
|
13
20
|
#### 🐞 Fixes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedTab.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTab.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"SegmentedTab.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgD,MAAM,OAAO,CAAC;AACrE,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAMlE,OAAO,EAAa,KAAK,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC9F,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAI9D,MAAM,MAAM,qBAAqB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC,KAAK,CAAC,GAChF,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GAAG,YAAY,CAAC,GACrF,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC,GAAG;IACxE;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,qBAAqB,CAAC,KAAK,CAAC,GACzF,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC,GAAG;IACpE,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAIJ,KAAK,cAAc,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EAClD,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KACjE,KAAK,CAAC,YAAY,CAAC;AAmGxB,eAAO,MAAM,YAAY,EAA4B,cAAc,CAAC"}
|
package/dts/tabs/Tabs.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../../src/visualizations/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../../src/visualizations/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAAc,IAAI,EAAkB,MAAM,cAAc,CAAC;AAKhE,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAClF,OAAO,EAAqB,KAAK,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAEnF,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEjE,eAAO,MAAM,6BAA6B,GAAI,wDAK3C,wBAAwB,wDA+C1B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAStD,eAAO,MAAM,YAAY,oFASpB,iBAAiB,GAAG;IACrB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,6CA0BF,CAAC;AAWF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc,8JAWtB,mBAAmB,GAAG;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACtB,6CAaF,CAAC"}
|
package/esm/tabs/SegmentedTab.js
CHANGED
|
@@ -2,7 +2,7 @@ const _excluded = ["ref"],
|
|
|
2
2
|
_excluded2 = ["id", "label", "disabled", "onPress", "color", "activeColor", "style", "aria-selected", "accessibilityRole", "testID", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight"];
|
|
3
3
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
4
4
|
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; }
|
|
5
|
-
import React, { memo, useCallback, useMemo } from 'react';
|
|
5
|
+
import React, { memo, useCallback, useEffect, useMemo } from 'react';
|
|
6
6
|
import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
|
|
7
7
|
import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
|
|
8
8
|
import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
|
|
@@ -52,8 +52,11 @@ const SegmentedTabComponent = /*#__PURE__*/memo(_ref => {
|
|
|
52
52
|
const theme = useTheme();
|
|
53
53
|
const activeColorRgbaString = theme.color[activeColor];
|
|
54
54
|
const inactiveColorRgbaString = theme.color[color];
|
|
55
|
-
const
|
|
56
|
-
animatedColor
|
|
55
|
+
const targetColor = isActive ? activeColorRgbaString : inactiveColorRgbaString;
|
|
56
|
+
const animatedColor = useSharedValue(targetColor);
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
animatedColor.value = withSpring(targetColor, tabsSpringConfig);
|
|
59
|
+
}, [animatedColor, targetColor]);
|
|
57
60
|
const animatedTextStyles = useAnimatedStyle(() => ({
|
|
58
61
|
color: animatedColor.value
|
|
59
62
|
}), [animatedColor]);
|
package/esm/tabs/Tabs.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
const _excluded = ["id", "registerRef"],
|
|
1
|
+
const _excluded = ["id", "registerRef", "onLayout"],
|
|
2
2
|
_excluded2 = ["ref"],
|
|
3
3
|
_excluded3 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "color", "activeColor", "activeTab", "disabled", "onChange", "styles", "style", "role", "position", "alignSelf", "opacity", "onActiveTabElementChange", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "testID"],
|
|
4
4
|
_excluded4 = ["id", "Component"],
|
|
5
5
|
_excluded5 = ["activeTabRect", "position", "style", "testID"];
|
|
6
6
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
7
7
|
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; }
|
|
8
|
-
import React, { memo, useCallback, useImperativeHandle, useRef, useState } from 'react';
|
|
8
|
+
import React, { memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
9
9
|
import { View } from 'react-native';
|
|
10
10
|
import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
|
|
11
11
|
import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
|
|
@@ -23,14 +23,19 @@ const AnimatedBox = Animated.createAnimatedComponent(Box);
|
|
|
23
23
|
const TabContainer = _ref => {
|
|
24
24
|
let {
|
|
25
25
|
id,
|
|
26
|
-
registerRef
|
|
26
|
+
registerRef,
|
|
27
|
+
onLayout
|
|
27
28
|
} = _ref,
|
|
28
29
|
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
29
30
|
const refCallback = useCallback(ref => {
|
|
30
31
|
if (ref) registerRef(id, ref);
|
|
31
32
|
}, [id, registerRef]);
|
|
33
|
+
const handleLayout = useCallback(event => {
|
|
34
|
+
onLayout(id, event);
|
|
35
|
+
}, [id, onLayout]);
|
|
32
36
|
return /*#__PURE__*/_jsx(View, _extends({
|
|
33
|
-
ref: refCallback
|
|
37
|
+
ref: refCallback,
|
|
38
|
+
onLayout: handleLayout
|
|
34
39
|
}, props));
|
|
35
40
|
};
|
|
36
41
|
export const tabsSpringConfig = {
|
|
@@ -81,27 +86,43 @@ const TabsComponent = /*#__PURE__*/memo(_ref2 => {
|
|
|
81
86
|
onChange
|
|
82
87
|
});
|
|
83
88
|
const [activeTabRect, setActiveTabRect] = useState(defaultRect);
|
|
84
|
-
const
|
|
85
|
-
const
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
activeTabRef.measureLayout(tabsContainerRef.current, (x, y, width, height) => setActiveTabRect({
|
|
89
|
+
const tabRects = useRef({});
|
|
90
|
+
const [prevActiveTabId, setPrevActiveTabId] = useState(activeTab == null ? void 0 : activeTab.id);
|
|
91
|
+
const handleTabLayout = useCallback((tabId, event) => {
|
|
92
|
+
const {
|
|
89
93
|
x,
|
|
90
94
|
y,
|
|
91
95
|
width,
|
|
92
96
|
height
|
|
93
|
-
}
|
|
94
|
-
|
|
97
|
+
} = event.nativeEvent.layout;
|
|
98
|
+
const nextRect = {
|
|
99
|
+
x,
|
|
100
|
+
y,
|
|
101
|
+
width,
|
|
102
|
+
height
|
|
103
|
+
};
|
|
104
|
+
tabRects.current[tabId] = nextRect;
|
|
105
|
+
if ((activeTab == null ? void 0 : activeTab.id) === tabId) {
|
|
106
|
+
setActiveTabRect(nextRect);
|
|
107
|
+
}
|
|
108
|
+
}, [activeTab == null ? void 0 : activeTab.id]);
|
|
109
|
+
if ((activeTab == null ? void 0 : activeTab.id) !== prevActiveTabId) {
|
|
110
|
+
setPrevActiveTabId(activeTab == null ? void 0 : activeTab.id);
|
|
111
|
+
if (activeTab != null && activeTab.id) {
|
|
112
|
+
const cachedRect = tabRects.current[activeTab.id];
|
|
113
|
+
if (cachedRect) {
|
|
114
|
+
setActiveTabRect(cachedRect);
|
|
115
|
+
}
|
|
116
|
+
} else {
|
|
117
|
+
setActiveTabRect(defaultRect);
|
|
118
|
+
}
|
|
119
|
+
}
|
|
95
120
|
const registerRef = useCallback((tabId, ref) => {
|
|
96
121
|
refMap.registerRef(tabId, ref);
|
|
97
122
|
if ((activeTab == null ? void 0 : activeTab.id) === tabId) {
|
|
98
123
|
onActiveTabElementChange == null || onActiveTabElementChange(ref);
|
|
99
124
|
}
|
|
100
|
-
}, [activeTab, onActiveTabElementChange, refMap]);
|
|
101
|
-
if (previousActiveRef.current !== activeTab) {
|
|
102
|
-
previousActiveRef.current = activeTab;
|
|
103
|
-
updateActiveTabRect();
|
|
104
|
-
}
|
|
125
|
+
}, [activeTab == null ? void 0 : activeTab.id, onActiveTabElementChange, refMap]);
|
|
105
126
|
return /*#__PURE__*/_jsx(HStack, _extends({
|
|
106
127
|
ref: tabsContainerRef,
|
|
107
128
|
alignSelf: alignSelf,
|
|
@@ -111,7 +132,6 @@ const TabsComponent = /*#__PURE__*/memo(_ref2 => {
|
|
|
111
132
|
borderTopLeftRadius: borderTopLeftRadius,
|
|
112
133
|
borderTopRightRadius: borderTopRightRadius,
|
|
113
134
|
color: color,
|
|
114
|
-
onLayout: updateActiveTabRect,
|
|
115
135
|
opacity: opacity != null ? opacity : disabled ? accessibleOpacityDisabled : 1,
|
|
116
136
|
position: position,
|
|
117
137
|
role: role,
|
|
@@ -145,6 +165,7 @@ const TabsComponent = /*#__PURE__*/memo(_ref2 => {
|
|
|
145
165
|
}, tabRest);
|
|
146
166
|
return /*#__PURE__*/_jsx(TabContainer, {
|
|
147
167
|
id: id,
|
|
168
|
+
onLayout: handleTabLayout,
|
|
148
169
|
registerRef: registerRef,
|
|
149
170
|
style: styles == null ? void 0 : styles.tabContainer,
|
|
150
171
|
children: /*#__PURE__*/_jsx(RenderedTab, _extends({}, renderedTabProps))
|
|
@@ -163,19 +184,27 @@ export const TabsActiveIndicator = _ref3 => {
|
|
|
163
184
|
testID = 'tabs-active-indicator'
|
|
164
185
|
} = _ref3,
|
|
165
186
|
props = _objectWithoutPropertiesLoose(_ref3, _excluded5);
|
|
166
|
-
const
|
|
167
|
-
const newActiveTabRect = {
|
|
187
|
+
const animatedTabRect = useSharedValue({
|
|
168
188
|
x: activeTabRect.x,
|
|
169
189
|
y: activeTabRect.y,
|
|
170
190
|
width: activeTabRect.width
|
|
171
|
-
};
|
|
172
|
-
|
|
173
|
-
const isFirstRenderWithWidth =
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
191
|
+
});
|
|
192
|
+
// Skip spring on first non-zero width or the indicator animates in from x:0/width:0.
|
|
193
|
+
const isFirstRenderWithWidth = useRef(true);
|
|
194
|
+
useEffect(() => {
|
|
195
|
+
const nextActiveTabRect = {
|
|
196
|
+
x: activeTabRect.x,
|
|
197
|
+
y: activeTabRect.y,
|
|
198
|
+
width: activeTabRect.width
|
|
199
|
+
};
|
|
200
|
+
if (activeTabRect.width <= 0) return;
|
|
201
|
+
if (isFirstRenderWithWidth.current) {
|
|
202
|
+
animatedTabRect.value = nextActiveTabRect;
|
|
203
|
+
isFirstRenderWithWidth.current = false;
|
|
204
|
+
} else {
|
|
205
|
+
animatedTabRect.value = withSpring(nextActiveTabRect, tabsSpringConfig);
|
|
206
|
+
}
|
|
207
|
+
}, [activeTabRect, animatedTabRect]);
|
|
179
208
|
const animatedBoxStyle = useAnimatedStyle(() => ({
|
|
180
209
|
transform: [{
|
|
181
210
|
translateX: animatedTabRect.value.x
|
|
@@ -3,7 +3,7 @@ const _excluded = ["ref", "color", "label", "font", "hideDot", "style"],
|
|
|
3
3
|
_excluded3 = ["ref", "background", "activeBackground", "activeColor", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent"];
|
|
4
4
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
5
5
|
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; }
|
|
6
|
-
import React, { memo, useMemo } from 'react';
|
|
6
|
+
import React, { memo, useEffect, useMemo, useRef } from 'react';
|
|
7
7
|
import { StyleSheet, View } from 'react-native';
|
|
8
8
|
import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
|
|
9
9
|
import { useTheme } from '../../hooks/useTheme';
|
|
@@ -11,8 +11,6 @@ import { SegmentedTab } from '../../tabs/SegmentedTab';
|
|
|
11
11
|
import { SegmentedTabs } from '../../tabs/SegmentedTabs';
|
|
12
12
|
import { tabsSpringConfig } from '../../tabs/Tabs';
|
|
13
13
|
import { Text } from '../../typography/Text';
|
|
14
|
-
|
|
15
|
-
// Animated active indicator to support smooth transition of background color
|
|
16
14
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
17
15
|
export const PeriodSelectorActiveIndicator = _ref => {
|
|
18
16
|
let {
|
|
@@ -28,29 +26,30 @@ export const PeriodSelectorActiveIndicator = _ref => {
|
|
|
28
26
|
x,
|
|
29
27
|
y
|
|
30
28
|
} = activeTabRect;
|
|
31
|
-
|
|
32
|
-
// Get the target background color
|
|
33
29
|
const backgroundColorKey = background;
|
|
34
30
|
const targetColor = theme.color[backgroundColorKey] || background;
|
|
35
|
-
|
|
36
|
-
// Track previous values for first render detection
|
|
37
|
-
const previousActiveTabRect = React.useRef(activeTabRect);
|
|
38
|
-
const previousColor = React.useRef(targetColor);
|
|
39
|
-
|
|
40
|
-
// Combined animated value for position, size, and color
|
|
41
|
-
const newAnimatedValues = {
|
|
31
|
+
const animatedValues = useSharedValue({
|
|
42
32
|
x,
|
|
43
33
|
y,
|
|
44
34
|
width,
|
|
45
35
|
backgroundColor: targetColor
|
|
46
|
-
};
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
36
|
+
});
|
|
37
|
+
const isFirstRenderWithWidth = useRef(true);
|
|
38
|
+
useEffect(() => {
|
|
39
|
+
const nextAnimatedValues = {
|
|
40
|
+
x,
|
|
41
|
+
y,
|
|
42
|
+
width,
|
|
43
|
+
backgroundColor: targetColor
|
|
44
|
+
};
|
|
45
|
+
if (width <= 0) return;
|
|
46
|
+
if (isFirstRenderWithWidth.current) {
|
|
47
|
+
animatedValues.value = nextAnimatedValues;
|
|
48
|
+
isFirstRenderWithWidth.current = false;
|
|
49
|
+
} else {
|
|
50
|
+
animatedValues.value = withSpring(nextAnimatedValues, tabsSpringConfig);
|
|
51
|
+
}
|
|
52
|
+
}, [animatedValues, targetColor, width, x, y]);
|
|
54
53
|
const animatedStyles = useAnimatedStyle(() => ({
|
|
55
54
|
transform: [{
|
|
56
55
|
translateX: animatedValues.value.x
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-mobile",
|
|
3
|
-
"version": "9.6.
|
|
3
|
+
"version": "9.6.4",
|
|
4
4
|
"description": "Coinbase Design System - Mobile",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -206,7 +206,7 @@
|
|
|
206
206
|
"react-native-worklets": "0.5.2"
|
|
207
207
|
},
|
|
208
208
|
"dependencies": {
|
|
209
|
-
"@coinbase/cds-common": "^9.6.
|
|
209
|
+
"@coinbase/cds-common": "^9.6.4",
|
|
210
210
|
"@coinbase/cds-icons": "^5.20.0",
|
|
211
211
|
"@coinbase/cds-illustrations": "^4.44.0",
|
|
212
212
|
"@coinbase/cds-lottie-files": "^3.3.4",
|