@khanacademy/wonder-blocks-button 9.0.1 → 10.0.0
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 +37 -0
- package/dist/components/button-core.d.ts +4 -4
- package/dist/components/button-unstyled.d.ts +11 -0
- package/dist/components/button.d.ts +24 -149
- package/dist/es/index.js +8 -5
- package/dist/index.d.ts +2 -2
- package/dist/index.js +8 -6
- package/dist/themes/default.d.ts +231 -176
- package/dist/themes/khanmigo.d.ts +231 -160
- package/dist/themes/themed-button.d.ts +231 -160
- package/dist/util/button.types.d.ts +154 -0
- package/package.json +8 -7
|
@@ -9,206 +9,277 @@ export type ButtonThemeContract = typeof defaultTheme;
|
|
|
9
9
|
* This is generally consumed via the `useScopedTheme` hook.
|
|
10
10
|
*/
|
|
11
11
|
export declare const ButtonThemeContext: React.Context<{
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
root: {
|
|
13
|
+
color: {
|
|
14
|
+
primary: {
|
|
15
|
+
progressive: {
|
|
16
|
+
default: {
|
|
17
|
+
border: string;
|
|
18
|
+
background: string;
|
|
19
|
+
foreground: string;
|
|
20
|
+
};
|
|
21
|
+
hover: {
|
|
22
|
+
border: string;
|
|
23
|
+
background: string;
|
|
24
|
+
foreground: string;
|
|
25
|
+
};
|
|
26
|
+
press: {
|
|
27
|
+
border: string;
|
|
28
|
+
background: string;
|
|
29
|
+
foreground: string;
|
|
30
|
+
};
|
|
17
31
|
};
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
32
|
+
destructive: {
|
|
33
|
+
default: {
|
|
34
|
+
border: string;
|
|
35
|
+
background: string;
|
|
36
|
+
foreground: string;
|
|
37
|
+
};
|
|
38
|
+
hover: {
|
|
39
|
+
border: string;
|
|
40
|
+
background: string;
|
|
41
|
+
foreground: string;
|
|
42
|
+
};
|
|
43
|
+
press: {
|
|
44
|
+
border: string;
|
|
45
|
+
background: string;
|
|
46
|
+
foreground: string;
|
|
47
|
+
};
|
|
22
48
|
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
49
|
+
neutral: {
|
|
50
|
+
default: {
|
|
51
|
+
border: string;
|
|
52
|
+
background: string;
|
|
53
|
+
foreground: string;
|
|
54
|
+
};
|
|
55
|
+
hover: {
|
|
56
|
+
border: string;
|
|
57
|
+
background: string;
|
|
58
|
+
foreground: string;
|
|
59
|
+
};
|
|
60
|
+
press: {
|
|
61
|
+
border: string;
|
|
62
|
+
background: string;
|
|
63
|
+
foreground: string;
|
|
64
|
+
};
|
|
27
65
|
};
|
|
28
|
-
|
|
66
|
+
disabled: {
|
|
29
67
|
border: string;
|
|
30
68
|
background: string;
|
|
31
69
|
foreground: string;
|
|
32
70
|
};
|
|
33
71
|
};
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
72
|
+
secondary: {
|
|
73
|
+
progressive: {
|
|
74
|
+
default: {
|
|
75
|
+
border: string;
|
|
76
|
+
background: string;
|
|
77
|
+
foreground: string;
|
|
78
|
+
};
|
|
79
|
+
hover: {
|
|
80
|
+
border: string;
|
|
81
|
+
background: string;
|
|
82
|
+
foreground: string;
|
|
83
|
+
};
|
|
84
|
+
press: {
|
|
85
|
+
border: string;
|
|
86
|
+
background: string;
|
|
87
|
+
foreground: string;
|
|
88
|
+
};
|
|
37
89
|
};
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
90
|
+
destructive: {
|
|
91
|
+
default: {
|
|
92
|
+
border: string;
|
|
93
|
+
background: string;
|
|
94
|
+
foreground: string;
|
|
95
|
+
};
|
|
96
|
+
hover: {
|
|
97
|
+
border: string;
|
|
98
|
+
background: string;
|
|
99
|
+
foreground: string;
|
|
100
|
+
};
|
|
101
|
+
press: {
|
|
102
|
+
border: string;
|
|
103
|
+
background: string;
|
|
104
|
+
foreground: string;
|
|
105
|
+
};
|
|
42
106
|
};
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
107
|
+
neutral: {
|
|
108
|
+
default: {
|
|
109
|
+
border: string;
|
|
110
|
+
background: string;
|
|
111
|
+
foreground: string;
|
|
112
|
+
};
|
|
113
|
+
hover: {
|
|
114
|
+
border: string;
|
|
115
|
+
background: string;
|
|
116
|
+
foreground: string;
|
|
117
|
+
};
|
|
118
|
+
press: {
|
|
119
|
+
border: string;
|
|
120
|
+
background: string;
|
|
121
|
+
foreground: string;
|
|
122
|
+
};
|
|
47
123
|
};
|
|
48
|
-
|
|
124
|
+
disabled: {
|
|
49
125
|
border: string;
|
|
50
126
|
background: string;
|
|
51
127
|
foreground: string;
|
|
52
128
|
};
|
|
53
129
|
};
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
130
|
+
tertiary: {
|
|
131
|
+
progressive: {
|
|
132
|
+
default: {
|
|
133
|
+
border: string;
|
|
134
|
+
background: string;
|
|
135
|
+
foreground: string;
|
|
136
|
+
};
|
|
137
|
+
hover: {
|
|
138
|
+
border: string;
|
|
139
|
+
background: string;
|
|
140
|
+
foreground: string;
|
|
141
|
+
};
|
|
142
|
+
press: {
|
|
143
|
+
border: string;
|
|
144
|
+
background: string;
|
|
145
|
+
foreground: string;
|
|
146
|
+
};
|
|
64
147
|
};
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
148
|
+
destructive: {
|
|
149
|
+
default: {
|
|
150
|
+
border: string;
|
|
151
|
+
background: string;
|
|
152
|
+
foreground: string;
|
|
153
|
+
};
|
|
154
|
+
hover: {
|
|
155
|
+
border: string;
|
|
156
|
+
background: string;
|
|
157
|
+
foreground: string;
|
|
158
|
+
};
|
|
159
|
+
press: {
|
|
160
|
+
border: string;
|
|
161
|
+
background: string;
|
|
162
|
+
foreground: string;
|
|
163
|
+
};
|
|
70
164
|
};
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
165
|
+
neutral: {
|
|
166
|
+
default: {
|
|
167
|
+
border: string;
|
|
168
|
+
background: string;
|
|
169
|
+
foreground: string;
|
|
170
|
+
};
|
|
171
|
+
hover: {
|
|
172
|
+
border: string;
|
|
173
|
+
background: string;
|
|
174
|
+
foreground: string;
|
|
175
|
+
};
|
|
176
|
+
press: {
|
|
177
|
+
border: string;
|
|
178
|
+
background: string;
|
|
179
|
+
foreground: string;
|
|
180
|
+
};
|
|
75
181
|
};
|
|
76
|
-
|
|
182
|
+
disabled: {
|
|
77
183
|
border: string;
|
|
78
184
|
background: string;
|
|
79
185
|
foreground: string;
|
|
80
186
|
};
|
|
81
187
|
};
|
|
82
|
-
destructive: {
|
|
83
|
-
focus: {
|
|
84
|
-
border: string;
|
|
85
|
-
};
|
|
86
|
-
hover: {
|
|
87
|
-
icon: string;
|
|
88
|
-
border: string;
|
|
89
|
-
background: string;
|
|
90
|
-
foreground: string;
|
|
91
|
-
};
|
|
92
|
-
default: {
|
|
93
|
-
border: string;
|
|
94
|
-
background: string;
|
|
95
|
-
foreground: string;
|
|
96
|
-
};
|
|
97
|
-
press: {
|
|
98
|
-
border: string;
|
|
99
|
-
background: string;
|
|
100
|
-
foreground: string;
|
|
101
|
-
};
|
|
102
|
-
};
|
|
103
|
-
disabled: {
|
|
104
|
-
border: string;
|
|
105
|
-
background: string;
|
|
106
|
-
foreground: string;
|
|
107
|
-
};
|
|
108
188
|
};
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
189
|
+
border: {
|
|
190
|
+
width: {
|
|
191
|
+
primary: {
|
|
192
|
+
default: string;
|
|
193
|
+
hover: string;
|
|
194
|
+
press: string;
|
|
113
195
|
};
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
196
|
+
secondary: {
|
|
197
|
+
default: string;
|
|
198
|
+
hover: string;
|
|
199
|
+
press: string;
|
|
118
200
|
};
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
};
|
|
124
|
-
press: {
|
|
125
|
-
border: string;
|
|
126
|
-
background: string;
|
|
127
|
-
foreground: string;
|
|
201
|
+
tertiary: {
|
|
202
|
+
default: string;
|
|
203
|
+
hover: string;
|
|
204
|
+
press: string;
|
|
128
205
|
};
|
|
129
206
|
};
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
default: {
|
|
135
|
-
border: string;
|
|
136
|
-
background: string;
|
|
137
|
-
foreground: string;
|
|
138
|
-
};
|
|
139
|
-
hover: {
|
|
140
|
-
border: string;
|
|
141
|
-
background: string;
|
|
142
|
-
foreground: string;
|
|
143
|
-
};
|
|
144
|
-
press: {
|
|
145
|
-
border: string;
|
|
146
|
-
background: string;
|
|
147
|
-
foreground: string;
|
|
148
|
-
};
|
|
207
|
+
offset: {
|
|
208
|
+
primary: string;
|
|
209
|
+
secondary: number;
|
|
210
|
+
tertiary: number;
|
|
149
211
|
};
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
212
|
+
radius: {
|
|
213
|
+
small: string;
|
|
214
|
+
medium: string;
|
|
215
|
+
large: string;
|
|
154
216
|
};
|
|
155
217
|
};
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
218
|
+
sizing: {
|
|
219
|
+
height: {
|
|
220
|
+
small: string;
|
|
221
|
+
medium: string;
|
|
222
|
+
large: string;
|
|
223
|
+
};
|
|
224
|
+
underline: {
|
|
225
|
+
hover: string;
|
|
226
|
+
press: string;
|
|
227
|
+
};
|
|
166
228
|
};
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
small: string;
|
|
229
|
+
padding: {
|
|
230
|
+
medium: string;
|
|
170
231
|
large: string;
|
|
171
|
-
icon: string;
|
|
172
|
-
};
|
|
173
|
-
};
|
|
174
|
-
size: {
|
|
175
|
-
height: {
|
|
176
|
-
small: 32;
|
|
177
|
-
medium: number;
|
|
178
|
-
large: number;
|
|
179
232
|
};
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
233
|
+
font: {
|
|
234
|
+
size: {
|
|
235
|
+
large: string;
|
|
236
|
+
};
|
|
237
|
+
lineHeight: {
|
|
238
|
+
small: string;
|
|
239
|
+
default: string;
|
|
240
|
+
large: string;
|
|
241
|
+
};
|
|
242
|
+
weight: {
|
|
243
|
+
default: number;
|
|
244
|
+
};
|
|
245
|
+
offset: {
|
|
246
|
+
default: string;
|
|
247
|
+
};
|
|
188
248
|
};
|
|
189
249
|
};
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
250
|
+
icon: {
|
|
251
|
+
color: {
|
|
252
|
+
secondary: {
|
|
253
|
+
progressive: {
|
|
254
|
+
hover: {
|
|
255
|
+
background: string;
|
|
256
|
+
foreground: string;
|
|
257
|
+
};
|
|
258
|
+
};
|
|
259
|
+
destructive: {
|
|
260
|
+
hover: {
|
|
261
|
+
background: string;
|
|
262
|
+
foreground: string;
|
|
263
|
+
};
|
|
264
|
+
};
|
|
265
|
+
neutral: {
|
|
266
|
+
hover: {
|
|
267
|
+
background: string;
|
|
268
|
+
foreground: string;
|
|
269
|
+
};
|
|
270
|
+
};
|
|
271
|
+
};
|
|
205
272
|
};
|
|
206
|
-
|
|
207
|
-
|
|
273
|
+
border: {
|
|
274
|
+
radius: string;
|
|
208
275
|
};
|
|
209
|
-
|
|
210
|
-
|
|
276
|
+
margin: {
|
|
277
|
+
inline: {
|
|
278
|
+
inner: string;
|
|
279
|
+
outer: string;
|
|
280
|
+
};
|
|
211
281
|
};
|
|
282
|
+
padding: string;
|
|
212
283
|
};
|
|
213
284
|
}>;
|
|
214
285
|
/**
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
|
|
3
|
+
import type { PhosphorIconAsset } from "@khanacademy/wonder-blocks-icon";
|
|
4
|
+
export type ButtonActionType = "progressive" | "destructive" | "neutral";
|
|
5
|
+
export type ButtonKind = "primary" | "secondary" | "tertiary";
|
|
6
|
+
export type ButtonSize = "small" | "medium" | "large";
|
|
7
|
+
export type ButtonProps =
|
|
8
|
+
/**
|
|
9
|
+
* aria-label should be used when `spinner={true}` to let people using screen
|
|
10
|
+
* readers that the action taken by clicking the button will take some
|
|
11
|
+
* time to complete.
|
|
12
|
+
*/
|
|
13
|
+
Partial<Omit<AriaProps, "aria-disabled">> & {
|
|
14
|
+
/**
|
|
15
|
+
* Text to appear on the button.
|
|
16
|
+
*/
|
|
17
|
+
children: string;
|
|
18
|
+
/**
|
|
19
|
+
* A Phosphor icon asset (imported as a static SVG file) that
|
|
20
|
+
* will appear at the start of the button (left for LTR, right for RTL).
|
|
21
|
+
*/
|
|
22
|
+
startIcon?: PhosphorIconAsset;
|
|
23
|
+
/**
|
|
24
|
+
* A Phosphor icon asset (imported as a static SVG file) that
|
|
25
|
+
* will appear at the end of the button (right for LTR, left for RTL).
|
|
26
|
+
*/
|
|
27
|
+
endIcon?: PhosphorIconAsset;
|
|
28
|
+
/**
|
|
29
|
+
* If true, replaces the contents with a spinner.
|
|
30
|
+
*
|
|
31
|
+
* Note: setting this prop to `true` will disable the button.
|
|
32
|
+
*/
|
|
33
|
+
spinner?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* The action type/category of the button.
|
|
36
|
+
*
|
|
37
|
+
* - `progressive` is used for actions that move the user forward in a
|
|
38
|
+
* flow.
|
|
39
|
+
* - `destructive` is used for actions that have a negative impact on
|
|
40
|
+
* the user.
|
|
41
|
+
*
|
|
42
|
+
* Defaults to `progressive`.
|
|
43
|
+
*/
|
|
44
|
+
actionType?: ButtonActionType;
|
|
45
|
+
/**
|
|
46
|
+
* The kind of the button, either primary, secondary, or tertiary.
|
|
47
|
+
*
|
|
48
|
+
* In default state:
|
|
49
|
+
*
|
|
50
|
+
* - Primary buttons have background colors
|
|
51
|
+
* - Secondary buttons have a border and no background color
|
|
52
|
+
* - Tertiary buttons have no background or border
|
|
53
|
+
*/
|
|
54
|
+
kind?: ButtonKind;
|
|
55
|
+
/**
|
|
56
|
+
* The size of the button. "medium" = height: 40; "small" = height: 32;
|
|
57
|
+
* "large" = height: 56;
|
|
58
|
+
*/
|
|
59
|
+
size?: ButtonSize;
|
|
60
|
+
/**
|
|
61
|
+
* Whether the button is disabled.
|
|
62
|
+
*/
|
|
63
|
+
disabled?: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* An optional id attribute.
|
|
66
|
+
*/
|
|
67
|
+
id?: string;
|
|
68
|
+
/**
|
|
69
|
+
* Test ID used for e2e testing.
|
|
70
|
+
*/
|
|
71
|
+
testId?: string;
|
|
72
|
+
/**
|
|
73
|
+
* Specifies the type of relationship between the current document and the
|
|
74
|
+
* linked document. Should only be used when `href` is specified. This
|
|
75
|
+
* defaults to "noopener noreferrer" when `target="_blank"`, but can be
|
|
76
|
+
* overridden by setting this prop to something else.
|
|
77
|
+
*/
|
|
78
|
+
rel?: string;
|
|
79
|
+
/**
|
|
80
|
+
* A target destination window for a link to open in. Should only be used
|
|
81
|
+
* when `href` is specified.
|
|
82
|
+
*
|
|
83
|
+
* TODO(WB-1262): only allow this prop when `href` is also set.t
|
|
84
|
+
*/
|
|
85
|
+
target?: "_blank";
|
|
86
|
+
/**
|
|
87
|
+
* Set the tabindex attribute on the rendered element.
|
|
88
|
+
*/
|
|
89
|
+
tabIndex?: number;
|
|
90
|
+
/**
|
|
91
|
+
* Whether to avoid using client-side navigation.
|
|
92
|
+
*
|
|
93
|
+
* If the URL passed to href is local to the client-side, e.g.
|
|
94
|
+
* /math/algebra/eval-exprs, then it tries to use react-router-dom's Link
|
|
95
|
+
* component which handles the client-side navigation. You can set
|
|
96
|
+
* `skipClientNav` to true avoid using client-side nav entirely.
|
|
97
|
+
*
|
|
98
|
+
* NOTE: All URLs containing a protocol are considered external, e.g.
|
|
99
|
+
* https://khanacademy.org/math/algebra/eval-exprs will trigger a full
|
|
100
|
+
* page reload.
|
|
101
|
+
*/
|
|
102
|
+
skipClientNav?: boolean;
|
|
103
|
+
/**
|
|
104
|
+
* Optional custom styles for the inner label.
|
|
105
|
+
*/
|
|
106
|
+
labelStyle?: StyleType;
|
|
107
|
+
/**
|
|
108
|
+
* Optional custom styles.
|
|
109
|
+
*/
|
|
110
|
+
style?: StyleType;
|
|
111
|
+
/**
|
|
112
|
+
* URL to navigate to.
|
|
113
|
+
*/
|
|
114
|
+
href?: string;
|
|
115
|
+
/**
|
|
116
|
+
* Used for buttons within <form>s.
|
|
117
|
+
*/
|
|
118
|
+
type?: "submit";
|
|
119
|
+
/**
|
|
120
|
+
* Adds CSS classes to the Button.
|
|
121
|
+
*/
|
|
122
|
+
className?: string;
|
|
123
|
+
/**
|
|
124
|
+
* Function to call when button is clicked.
|
|
125
|
+
*
|
|
126
|
+
* This callback should be used for running synchronous code, like
|
|
127
|
+
* dispatching a Redux action. For asynchronous code see the
|
|
128
|
+
* beforeNav and safeWithNav props. It should NOT be used to redirect
|
|
129
|
+
* to a different URL.
|
|
130
|
+
*
|
|
131
|
+
* Note: onClick is optional if href is present, but must be defined if
|
|
132
|
+
* href is not
|
|
133
|
+
*/
|
|
134
|
+
onClick?: (e: React.SyntheticEvent) => unknown;
|
|
135
|
+
/**
|
|
136
|
+
* Run async code before navigating. If the promise returned rejects then
|
|
137
|
+
* navigation will not occur.
|
|
138
|
+
*
|
|
139
|
+
* If both safeWithNav and beforeNav are provided, beforeNav will be run
|
|
140
|
+
* first and safeWithNav will only be run if beforeNav does not reject.
|
|
141
|
+
*
|
|
142
|
+
* WARNING: Do not use with `type="submit"`.
|
|
143
|
+
*/
|
|
144
|
+
beforeNav?: () => Promise<unknown>;
|
|
145
|
+
/**
|
|
146
|
+
* Run async code in the background while client-side navigating. If the
|
|
147
|
+
* browser does a full page load navigation, the callback promise must be
|
|
148
|
+
* settled before the navigation will occur. Errors are ignored so that
|
|
149
|
+
* navigation is guaranteed to succeed.
|
|
150
|
+
*
|
|
151
|
+
* WARNING: Do not use with `type="submit"`.
|
|
152
|
+
*/
|
|
153
|
+
safeWithNav?: () => Promise<unknown>;
|
|
154
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-button",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "10.0.0",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -12,13 +12,14 @@
|
|
|
12
12
|
"author": "",
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@khanacademy/wonder-blocks-clickable": "7.
|
|
16
|
-
"@khanacademy/wonder-blocks-core": "12.
|
|
17
|
-
"@khanacademy/wonder-blocks-icon": "5.1.
|
|
18
|
-
"@khanacademy/wonder-blocks-progress-spinner": "3.1.
|
|
15
|
+
"@khanacademy/wonder-blocks-clickable": "7.1.1",
|
|
16
|
+
"@khanacademy/wonder-blocks-core": "12.3.0",
|
|
17
|
+
"@khanacademy/wonder-blocks-icon": "5.1.4",
|
|
18
|
+
"@khanacademy/wonder-blocks-progress-spinner": "3.1.12",
|
|
19
|
+
"@khanacademy/wonder-blocks-styles": "0.2.8",
|
|
19
20
|
"@khanacademy/wonder-blocks-theming": "3.3.0",
|
|
20
|
-
"@khanacademy/wonder-blocks-tokens": "10.
|
|
21
|
-
"@khanacademy/wonder-blocks-typography": "3.2.
|
|
21
|
+
"@khanacademy/wonder-blocks-tokens": "10.1.0",
|
|
22
|
+
"@khanacademy/wonder-blocks-typography": "3.2.2"
|
|
22
23
|
},
|
|
23
24
|
"peerDependencies": {
|
|
24
25
|
"aphrodite": "^1.2.5",
|