@khanacademy/wonder-blocks-form 7.0.0 → 7.0.2

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/es/index.js +173 -143
  3. package/dist/index.js +172 -142
  4. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @khanacademy/wonder-blocks-form
2
2
 
3
+ ## 7.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [0199324d]
8
+ - @khanacademy/wonder-blocks-clickable@6.0.0
9
+ - @khanacademy/wonder-blocks-core@12.0.0
10
+ - @khanacademy/wonder-blocks-icon@5.0.6
11
+ - @khanacademy/wonder-blocks-layout@3.0.8
12
+ - @khanacademy/wonder-blocks-typography@3.0.6
13
+
14
+ ## 7.0.1
15
+
16
+ ### Patch Changes
17
+
18
+ - c162abb4: Migrate color instances to use semanticColor internally on TextField and TextArea
19
+ - 8cfaeab0: Migrate Radio and Checkbox to use semanticColor tokens
20
+ - Updated dependencies [8cfaeab0]
21
+ - Updated dependencies [c162abb4]
22
+ - @khanacademy/wonder-blocks-tokens@4.1.0
23
+ - @khanacademy/wonder-blocks-clickable@5.0.7
24
+ - @khanacademy/wonder-blocks-layout@3.0.7
25
+
3
26
  ## 7.0.0
4
27
 
5
28
  ### Major Changes
package/dist/es/index.js CHANGED
@@ -5,7 +5,7 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutP
5
5
  import { StyleSheet } from 'aphrodite';
6
6
  import { addStyle, Id, View, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
7
7
  import { Strut } from '@khanacademy/wonder-blocks-layout';
8
- import { spacing, mix, color, border, font } from '@khanacademy/wonder-blocks-tokens';
8
+ import { spacing, semanticColor, border, font } from '@khanacademy/wonder-blocks-tokens';
9
9
  import { LabelMedium, LabelSmall, styles as styles$7 } from '@khanacademy/wonder-blocks-typography';
10
10
  import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
11
11
  import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
@@ -22,15 +22,6 @@ function mapCheckedToAriaChecked(value) {
22
22
  return "mixed";
23
23
  }
24
24
  }
25
- const {
26
- blue: blue$1,
27
- red: red$1,
28
- white: white$1,
29
- offWhite: offWhite$1,
30
- offBlack16: offBlack16$1,
31
- offBlack32: offBlack32$1,
32
- offBlack50: offBlack50$1
33
- } = color;
34
25
  const size$1 = spacing.medium_16;
35
26
  const checkSize = spacing.small_12;
36
27
  const StyledInput$2 = addStyle("input");
@@ -56,7 +47,7 @@ const CheckboxCore = React.forwardRef(function CheckboxCore(props, ref) {
56
47
  const stateStyles = _generateStyles$1(checked, error);
57
48
  const defaultStyle = [sharedStyles$1.inputReset, sharedStyles$1.default, !disabled && stateStyles.default, disabled && sharedStyles$1.disabled];
58
49
  const checkboxIcon = React.createElement(PhosphorIcon, {
59
- color: disabled ? offBlack32$1 : white$1,
50
+ color: disabled ? semanticColor.icon.disabled : semanticColor.icon.inverse,
60
51
  icon: checked ? checkIcon : minusIcon,
61
52
  size: "small",
62
53
  style: [sharedStyles$1.checkboxIcon, {
@@ -86,6 +77,10 @@ const CheckboxCore = React.forwardRef(function CheckboxCore(props, ref) {
86
77
  "data-testid": testId
87
78
  })), checked || checked == null ? checkboxIcon : React.createElement(React.Fragment, null));
88
79
  });
80
+ const disabledState$1 = {
81
+ border: semanticColor.border.primary,
82
+ background: semanticColor.action.disabled.secondary
83
+ };
89
84
  const sharedStyles$1 = StyleSheet.create({
90
85
  inputReset: {
91
86
  appearance: "none",
@@ -101,14 +96,14 @@ const sharedStyles$1 = StyleSheet.create({
101
96
  outline: "none",
102
97
  boxSizing: "border-box",
103
98
  borderStyle: "solid",
104
- borderWidth: 1,
105
- borderRadius: 3
99
+ borderWidth: border.width.hairline,
100
+ borderRadius: border.radius.small_3
106
101
  },
107
102
  disabled: {
108
103
  cursor: "auto",
109
- backgroundColor: offWhite$1,
110
- borderColor: offBlack16$1,
111
- borderWidth: 1
104
+ backgroundColor: disabledState$1.background,
105
+ borderColor: disabledState$1.border,
106
+ borderWidth: border.width.hairline
112
107
  },
113
108
  checkboxIcon: {
114
109
  position: "absolute",
@@ -116,66 +111,67 @@ const sharedStyles$1 = StyleSheet.create({
116
111
  margin: (size$1 - checkSize) / 2
117
112
  }
118
113
  });
119
- const fadedBlue$1 = mix(color.fadedBlue16, white$1);
120
- const activeBlue = color.activeBlue;
121
- const fadedRed$1 = mix(color.fadedRed8, white$1);
122
- const activeRed = color.activeRed;
123
- const colors$1 = {
124
- default: {
125
- faded: fadedBlue$1,
126
- base: blue$1,
127
- active: activeBlue
128
- },
129
- error: {
130
- faded: fadedRed$1,
131
- base: red$1,
132
- active: activeRed
133
- }
134
- };
135
114
  const styles$6 = {};
136
115
  const _generateStyles$1 = (checked, error) => {
137
116
  const styleKey = `${String(checked)}-${String(error)}`;
138
117
  if (styles$6[styleKey]) {
139
118
  return styles$6[styleKey];
140
119
  }
141
- const palette = error ? colors$1.error : colors$1.default;
120
+ const isCheckedOrIndeterminate = checked || checked == null;
121
+ const actionType = error ? "destructive" : "progressive";
122
+ const styleType = isCheckedOrIndeterminate ? "filled" : "outlined";
123
+ const colorAction = semanticColor.action[styleType][actionType];
124
+ const states = {
125
+ default: {
126
+ border: colorAction.default.border,
127
+ background: colorAction.default.background
128
+ },
129
+ error: {
130
+ border: semanticColor.status.critical.foreground,
131
+ background: semanticColor.status.critical.background
132
+ }
133
+ };
142
134
  let newStyles = {};
143
- if (checked || checked == null) {
135
+ if (isCheckedOrIndeterminate) {
144
136
  newStyles = {
145
137
  default: {
146
- backgroundColor: palette.base,
147
- borderWidth: 0,
138
+ backgroundColor: states.default.background,
139
+ borderColor: states.default.border,
148
140
  ":focus-visible": {
149
- boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
141
+ outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
142
+ outlineOffset: 1
150
143
  },
151
144
  ":hover": {
152
- boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
145
+ outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
146
+ outlineOffset: 1
153
147
  },
154
148
  ":active": {
155
- boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.active}`,
156
- background: palette.active
149
+ outline: `${border.width.thin}px solid ${colorAction.press.border}`,
150
+ outlineOffset: 1,
151
+ background: colorAction.press.background
157
152
  }
158
153
  }
159
154
  };
160
155
  } else {
156
+ const currentState = error ? states.error : states.default;
161
157
  newStyles = {
162
158
  default: {
163
- backgroundColor: error ? fadedRed$1 : white$1,
164
- borderColor: error ? red$1 : offBlack50$1,
159
+ backgroundColor: currentState.background,
160
+ borderColor: currentState.border,
165
161
  ":focus-visible": {
166
- backgroundColor: error ? fadedRed$1 : white$1,
167
- borderColor: palette.base,
168
- borderWidth: 2
162
+ backgroundColor: error ? states.error.background : colorAction.hover.background,
163
+ outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
164
+ outlineOffset: -1
169
165
  },
170
166
  ":hover": {
171
- backgroundColor: error ? fadedRed$1 : white$1,
172
- borderColor: palette.base,
173
- borderWidth: 2
167
+ backgroundColor: error ? states.error.background : colorAction.hover.background,
168
+ outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
169
+ outlineOffset: -1
174
170
  },
175
171
  ":active": {
176
- backgroundColor: palette.faded,
177
- borderColor: error ? activeRed : blue$1,
178
- borderWidth: 2
172
+ backgroundColor: colorAction.press.background,
173
+ outline: `${border.width.thin}px solid ${colorAction.press.border}`,
174
+ outlineOffset: -1
179
175
  }
180
176
  }
181
177
  };
@@ -185,15 +181,6 @@ const _generateStyles$1 = (checked, error) => {
185
181
  };
186
182
 
187
183
  const _excluded$6 = ["checked", "disabled", "error", "groupName", "id", "testId"];
188
- const {
189
- blue,
190
- red,
191
- white,
192
- offWhite,
193
- offBlack16,
194
- offBlack32,
195
- offBlack50
196
- } = color;
197
184
  const StyledInput$1 = addStyle("input");
198
185
  const RadioCore = React.forwardRef(function RadioCore(props, ref) {
199
186
  const handleChange = () => {
@@ -225,6 +212,10 @@ const RadioCore = React.forwardRef(function RadioCore(props, ref) {
225
212
  style: disabledChecked
226
213
  }));
227
214
  });
215
+ const disabledState = {
216
+ border: semanticColor.border.primary,
217
+ background: semanticColor.action.disabled.secondary
218
+ };
228
219
  const size = 16;
229
220
  const disabledChecked = {
230
221
  position: "absolute",
@@ -233,7 +224,7 @@ const disabledChecked = {
233
224
  height: size / 2,
234
225
  width: size / 2,
235
226
  borderRadius: "50%",
236
- backgroundColor: offBlack32
227
+ backgroundColor: semanticColor.action.disabled.default
237
228
  };
238
229
  const sharedStyles = StyleSheet.create({
239
230
  inputReset: {
@@ -250,75 +241,80 @@ const sharedStyles = StyleSheet.create({
250
241
  outline: "none",
251
242
  boxSizing: "border-box",
252
243
  borderStyle: "solid",
253
- borderWidth: 1,
244
+ borderWidth: border.width.hairline,
254
245
  borderRadius: "50%"
255
246
  },
256
247
  disabled: {
257
248
  cursor: "auto",
258
- backgroundColor: offWhite,
259
- borderColor: offBlack16,
260
- borderWidth: 1
249
+ backgroundColor: disabledState.background,
250
+ borderColor: disabledState.border,
251
+ borderWidth: border.width.hairline
261
252
  }
262
253
  });
263
- const fadedBlue = mix(color.fadedBlue16, white);
264
- const fadedRed = mix(color.fadedRed8, white);
265
- const colors = {
266
- default: {
267
- faded: fadedBlue,
268
- base: blue,
269
- active: color.activeBlue
270
- },
271
- error: {
272
- faded: fadedRed,
273
- base: red,
274
- active: color.activeRed
275
- }
276
- };
277
254
  const styles$5 = {};
278
255
  const _generateStyles = (checked, error) => {
279
256
  const styleKey = `${String(checked)}-${String(error)}`;
280
257
  if (styles$5[styleKey]) {
281
258
  return styles$5[styleKey];
282
259
  }
283
- const palette = error ? colors.error : colors.default;
260
+ const actionType = error ? "destructive" : "progressive";
261
+ const colorAction = semanticColor.action.outlined[actionType];
262
+ const states = {
263
+ unchecked: {
264
+ border: semanticColor.border.strong,
265
+ background: colorAction.default.background
266
+ },
267
+ checked: {
268
+ border: colorAction.default.foreground,
269
+ background: colorAction.default.background
270
+ },
271
+ error: {
272
+ border: semanticColor.status.critical.foreground,
273
+ background: semanticColor.status.critical.background
274
+ }
275
+ };
284
276
  let newStyles = {};
285
277
  if (checked) {
286
278
  newStyles = {
287
279
  default: {
288
- backgroundColor: white,
289
- borderColor: palette.base,
280
+ backgroundColor: states.checked.background,
281
+ borderColor: states.checked.border,
290
282
  borderWidth: size / 4,
291
283
  ":focus-visible": {
292
- boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
284
+ outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
285
+ outlineOffset: 1
293
286
  },
294
287
  ":hover": {
295
- boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
288
+ outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
289
+ outlineOffset: 1
296
290
  },
297
291
  ":active": {
298
- boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
299
- borderColor: palette.active
292
+ outline: `${border.width.thin}px solid ${colorAction.press.border}`,
293
+ outlineOffset: 1,
294
+ borderColor: colorAction.press.border
300
295
  }
301
296
  }
302
297
  };
303
298
  } else {
299
+ const currentState = error ? states.error : states.unchecked;
304
300
  newStyles = {
305
301
  default: {
306
- backgroundColor: error ? fadedRed : white,
307
- borderColor: error ? red : offBlack50,
302
+ backgroundColor: currentState.background,
303
+ borderColor: currentState.border,
308
304
  ":focus-visible": {
309
- backgroundColor: error ? fadedRed : white,
310
- borderColor: palette.base,
311
- borderWidth: 2
305
+ backgroundColor: error ? states.error.background : colorAction.hover.background,
306
+ outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
307
+ outlineOffset: -1
312
308
  },
313
309
  ":hover": {
314
- backgroundColor: error ? fadedRed : white,
315
- borderColor: palette.base,
316
- borderWidth: 2
310
+ backgroundColor: error ? states.error.background : colorAction.hover.background,
311
+ outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
312
+ outlineOffset: -1
317
313
  },
318
314
  ":active": {
319
- backgroundColor: palette.faded,
320
- borderColor: error ? color.activeRed : blue,
321
- borderWidth: 2
315
+ backgroundColor: colorAction.press.background,
316
+ outline: `${border.width.thin}px solid ${colorAction.press.border}`,
317
+ outlineOffset: -1
322
318
  }
323
319
  }
324
320
  };
@@ -402,12 +398,12 @@ const styles$4 = StyleSheet.create({
402
398
  marginTop: -2
403
399
  },
404
400
  disabledLabel: {
405
- color: color.offBlack32
401
+ color: semanticColor.text.disabled
406
402
  },
407
403
  description: {
408
404
  marginLeft: spacing.medium_16 + spacing.xSmall_8,
409
405
  marginTop: spacing.xxxSmall_4,
410
- color: color.offBlack64
406
+ color: semanticColor.text.secondary
411
407
  }
412
408
  });
413
409
 
@@ -478,11 +474,11 @@ const styles$3 = StyleSheet.create({
478
474
  },
479
475
  description: {
480
476
  marginTop: spacing.xxxSmall_4,
481
- color: color.offBlack64
477
+ color: semanticColor.text.secondary
482
478
  },
483
479
  error: {
484
480
  marginTop: spacing.xxxSmall_4,
485
- color: color.red
481
+ color: semanticColor.status.critical.foreground
486
482
  },
487
483
  defaultLineGap: {
488
484
  marginTop: spacing.xSmall_8
@@ -727,6 +723,23 @@ const TextField = props => {
727
723
  "aria-invalid": hasError
728
724
  }, otherProps)));
729
725
  };
726
+ const states$1 = {
727
+ default: {
728
+ border: semanticColor.border.strong,
729
+ background: semanticColor.surface.primary,
730
+ foreground: semanticColor.text.primary
731
+ },
732
+ disabled: {
733
+ border: semanticColor.border.primary,
734
+ background: semanticColor.action.disabled.secondary,
735
+ foreground: semanticColor.text.secondary
736
+ },
737
+ error: {
738
+ border: semanticColor.status.critical.foreground,
739
+ background: semanticColor.status.critical.background,
740
+ foreground: semanticColor.text.primary
741
+ }
742
+ };
730
743
  const styles$2 = StyleSheet.create({
731
744
  input: {
732
745
  width: "100%",
@@ -737,43 +750,43 @@ const styles$2 = StyleSheet.create({
737
750
  margin: 0
738
751
  },
739
752
  default: {
740
- background: color.white,
741
- border: `1px solid ${color.offBlack50}`,
742
- color: color.offBlack,
753
+ background: states$1.default.background,
754
+ border: `${border.width.hairline}px solid ${states$1.default.border}`,
755
+ color: states$1.default.foreground,
743
756
  "::placeholder": {
744
- color: color.offBlack64
757
+ color: semanticColor.text.secondary
745
758
  }
746
759
  },
747
760
  defaultFocus: {
748
761
  ":focus-visible": {
749
- borderColor: color.blue,
750
- outline: `1px solid ${color.blue}`,
751
- outlineOffset: "-2px"
762
+ borderColor: semanticColor.border.focus,
763
+ outline: `${border.width.hairline}px solid ${semanticColor.border.focus}`,
764
+ outlineOffset: -2
752
765
  }
753
766
  },
754
767
  error: {
755
- background: color.fadedRed8,
756
- border: `1px solid ${color.red}`,
757
- color: color.offBlack,
768
+ background: states$1.error.background,
769
+ border: `${border.width.hairline}px solid ${states$1.error.border}`,
770
+ color: states$1.error.foreground,
758
771
  "::placeholder": {
759
- color: color.offBlack64
772
+ color: semanticColor.text.secondary
760
773
  },
761
774
  ":focus-visible": {
762
- outlineColor: color.red,
763
- borderColor: color.red
775
+ outlineColor: states$1.error.border,
776
+ borderColor: states$1.error.border
764
777
  }
765
778
  },
766
779
  disabled: {
767
- background: color.offWhite,
768
- border: `1px solid ${color.offBlack16}`,
769
- color: color.offBlack64,
780
+ background: states$1.disabled.background,
781
+ border: `${border.width.hairline}px solid ${states$1.disabled.border}`,
782
+ color: states$1.disabled.foreground,
770
783
  "::placeholder": {
771
- color: color.offBlack64
784
+ color: states$1.disabled.foreground
772
785
  },
773
786
  cursor: "not-allowed",
774
787
  ":focus-visible": {
775
- outline: `2px solid ${color.offBlack32}`,
776
- outlineOffset: "-3px"
788
+ outline: `${border.width.thin}px solid ${semanticColor.action.disabled.default}`,
789
+ outlineOffset: -3
777
790
  }
778
791
  }
779
792
  });
@@ -850,16 +863,16 @@ class FieldHeading extends React.Component {
850
863
  }
851
864
  const styles$1 = StyleSheet.create({
852
865
  label: {
853
- color: color.offBlack
866
+ color: semanticColor.text.primary
854
867
  },
855
868
  description: {
856
- color: color.offBlack64
869
+ color: semanticColor.text.secondary
857
870
  },
858
871
  error: {
859
- color: color.red
872
+ color: semanticColor.status.critical.foreground
860
873
  },
861
874
  required: {
862
- color: color.red
875
+ color: semanticColor.status.critical.foreground
863
876
  }
864
877
  });
865
878
 
@@ -1069,6 +1082,23 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
1069
1082
  })));
1070
1083
  });
1071
1084
  const VERTICAL_SPACING_PX = 10;
1085
+ const states = {
1086
+ default: {
1087
+ border: semanticColor.border.strong,
1088
+ background: semanticColor.surface.primary,
1089
+ foreground: semanticColor.text.primary
1090
+ },
1091
+ disabled: {
1092
+ border: semanticColor.border.primary,
1093
+ background: semanticColor.action.disabled.secondary,
1094
+ foreground: semanticColor.text.secondary
1095
+ },
1096
+ error: {
1097
+ border: semanticColor.status.critical.foreground,
1098
+ background: semanticColor.status.critical.background,
1099
+ foreground: semanticColor.text.primary
1100
+ }
1101
+ };
1072
1102
  const styles = StyleSheet.create({
1073
1103
  textarea: {
1074
1104
  borderRadius: border.radius.medium_4,
@@ -1077,43 +1107,43 @@ const styles = StyleSheet.create({
1077
1107
  minHeight: `${VERTICAL_SPACING_PX * 2 + font.lineHeight.medium + 2 * border.width.hairline}px`
1078
1108
  },
1079
1109
  default: {
1080
- background: color.white,
1081
- border: `1px solid ${color.offBlack50}`,
1082
- color: color.offBlack,
1110
+ background: states.default.background,
1111
+ border: `${border.width.hairline}px solid ${states.default.border}`,
1112
+ color: states.default.foreground,
1083
1113
  "::placeholder": {
1084
- color: color.offBlack64
1114
+ color: semanticColor.text.secondary
1085
1115
  }
1086
1116
  },
1087
1117
  defaultFocus: {
1088
1118
  ":focus-visible": {
1089
- borderColor: color.blue,
1090
- outline: `1px solid ${color.blue}`,
1091
- outlineOffset: "-2px"
1119
+ borderColor: semanticColor.border.focus,
1120
+ outline: `${border.width.hairline}px solid ${semanticColor.border.focus}`,
1121
+ outlineOffset: -2
1092
1122
  }
1093
1123
  },
1094
1124
  disabled: {
1095
- background: color.offWhite,
1096
- border: `1px solid ${color.offBlack16}`,
1097
- color: color.offBlack64,
1125
+ background: states.disabled.background,
1126
+ border: `${border.width.hairline}px solid ${states.disabled.border}`,
1127
+ color: states.disabled.foreground,
1098
1128
  "::placeholder": {
1099
- color: color.offBlack64
1129
+ color: states.disabled.foreground
1100
1130
  },
1101
1131
  cursor: "not-allowed",
1102
1132
  ":focus-visible": {
1103
- outline: `2px solid ${color.offBlack32}`,
1104
- outlineOffset: "-3px"
1133
+ outline: `${border.width.thin}px solid ${semanticColor.action.disabled.default}`,
1134
+ outlineOffset: -3
1105
1135
  }
1106
1136
  },
1107
1137
  error: {
1108
- background: color.fadedRed8,
1109
- border: `1px solid ${color.red}`,
1110
- color: color.offBlack,
1138
+ background: states.error.background,
1139
+ border: `${border.width.hairline}px solid ${states.error.border}`,
1140
+ color: states.error.foreground,
1111
1141
  "::placeholder": {
1112
- color: color.offBlack64
1142
+ color: semanticColor.text.secondary
1113
1143
  },
1114
1144
  ":focus-visible": {
1115
- outlineColor: color.red,
1116
- borderColor: color.red
1145
+ outlineColor: states.error.border,
1146
+ borderColor: states.error.border
1117
1147
  }
1118
1148
  }
1119
1149
  });
package/dist/index.js CHANGED
@@ -51,15 +51,6 @@ function mapCheckedToAriaChecked(value) {
51
51
  return "mixed";
52
52
  }
53
53
  }
54
- const {
55
- blue: blue$1,
56
- red: red$1,
57
- white: white$1,
58
- offWhite: offWhite$1,
59
- offBlack16: offBlack16$1,
60
- offBlack32: offBlack32$1,
61
- offBlack50: offBlack50$1
62
- } = wonderBlocksTokens.color;
63
54
  const size$1 = wonderBlocksTokens.spacing.medium_16;
64
55
  const checkSize = wonderBlocksTokens.spacing.small_12;
65
56
  const StyledInput$2 = wonderBlocksCore.addStyle("input");
@@ -85,7 +76,7 @@ const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, re
85
76
  const stateStyles = _generateStyles$1(checked, error);
86
77
  const defaultStyle = [sharedStyles$1.inputReset, sharedStyles$1.default, !disabled && stateStyles.default, disabled && sharedStyles$1.disabled];
87
78
  const checkboxIcon = React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
88
- color: disabled ? offBlack32$1 : white$1,
79
+ color: disabled ? wonderBlocksTokens.semanticColor.icon.disabled : wonderBlocksTokens.semanticColor.icon.inverse,
89
80
  icon: checked ? checkIcon__default["default"] : minusIcon__default["default"],
90
81
  size: "small",
91
82
  style: [sharedStyles$1.checkboxIcon, {
@@ -115,6 +106,10 @@ const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, re
115
106
  "data-testid": testId
116
107
  })), checked || checked == null ? checkboxIcon : React__namespace.createElement(React__namespace.Fragment, null));
117
108
  });
109
+ const disabledState$1 = {
110
+ border: wonderBlocksTokens.semanticColor.border.primary,
111
+ background: wonderBlocksTokens.semanticColor.action.disabled.secondary
112
+ };
118
113
  const sharedStyles$1 = aphrodite.StyleSheet.create({
119
114
  inputReset: {
120
115
  appearance: "none",
@@ -130,14 +125,14 @@ const sharedStyles$1 = aphrodite.StyleSheet.create({
130
125
  outline: "none",
131
126
  boxSizing: "border-box",
132
127
  borderStyle: "solid",
133
- borderWidth: 1,
134
- borderRadius: 3
128
+ borderWidth: wonderBlocksTokens.border.width.hairline,
129
+ borderRadius: wonderBlocksTokens.border.radius.small_3
135
130
  },
136
131
  disabled: {
137
132
  cursor: "auto",
138
- backgroundColor: offWhite$1,
139
- borderColor: offBlack16$1,
140
- borderWidth: 1
133
+ backgroundColor: disabledState$1.background,
134
+ borderColor: disabledState$1.border,
135
+ borderWidth: wonderBlocksTokens.border.width.hairline
141
136
  },
142
137
  checkboxIcon: {
143
138
  position: "absolute",
@@ -145,66 +140,67 @@ const sharedStyles$1 = aphrodite.StyleSheet.create({
145
140
  margin: (size$1 - checkSize) / 2
146
141
  }
147
142
  });
148
- const fadedBlue$1 = wonderBlocksTokens.mix(wonderBlocksTokens.color.fadedBlue16, white$1);
149
- const activeBlue = wonderBlocksTokens.color.activeBlue;
150
- const fadedRed$1 = wonderBlocksTokens.mix(wonderBlocksTokens.color.fadedRed8, white$1);
151
- const activeRed = wonderBlocksTokens.color.activeRed;
152
- const colors$1 = {
153
- default: {
154
- faded: fadedBlue$1,
155
- base: blue$1,
156
- active: activeBlue
157
- },
158
- error: {
159
- faded: fadedRed$1,
160
- base: red$1,
161
- active: activeRed
162
- }
163
- };
164
143
  const styles$6 = {};
165
144
  const _generateStyles$1 = (checked, error) => {
166
145
  const styleKey = `${String(checked)}-${String(error)}`;
167
146
  if (styles$6[styleKey]) {
168
147
  return styles$6[styleKey];
169
148
  }
170
- const palette = error ? colors$1.error : colors$1.default;
149
+ const isCheckedOrIndeterminate = checked || checked == null;
150
+ const actionType = error ? "destructive" : "progressive";
151
+ const styleType = isCheckedOrIndeterminate ? "filled" : "outlined";
152
+ const colorAction = wonderBlocksTokens.semanticColor.action[styleType][actionType];
153
+ const states = {
154
+ default: {
155
+ border: colorAction.default.border,
156
+ background: colorAction.default.background
157
+ },
158
+ error: {
159
+ border: wonderBlocksTokens.semanticColor.status.critical.foreground,
160
+ background: wonderBlocksTokens.semanticColor.status.critical.background
161
+ }
162
+ };
171
163
  let newStyles = {};
172
- if (checked || checked == null) {
164
+ if (isCheckedOrIndeterminate) {
173
165
  newStyles = {
174
166
  default: {
175
- backgroundColor: palette.base,
176
- borderWidth: 0,
167
+ backgroundColor: states.default.background,
168
+ borderColor: states.default.border,
177
169
  ":focus-visible": {
178
- boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
170
+ outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
171
+ outlineOffset: 1
179
172
  },
180
173
  ":hover": {
181
- boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
174
+ outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
175
+ outlineOffset: 1
182
176
  },
183
177
  ":active": {
184
- boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.active}`,
185
- background: palette.active
178
+ outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.press.border}`,
179
+ outlineOffset: 1,
180
+ background: colorAction.press.background
186
181
  }
187
182
  }
188
183
  };
189
184
  } else {
185
+ const currentState = error ? states.error : states.default;
190
186
  newStyles = {
191
187
  default: {
192
- backgroundColor: error ? fadedRed$1 : white$1,
193
- borderColor: error ? red$1 : offBlack50$1,
188
+ backgroundColor: currentState.background,
189
+ borderColor: currentState.border,
194
190
  ":focus-visible": {
195
- backgroundColor: error ? fadedRed$1 : white$1,
196
- borderColor: palette.base,
197
- borderWidth: 2
191
+ backgroundColor: error ? states.error.background : colorAction.hover.background,
192
+ outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
193
+ outlineOffset: -1
198
194
  },
199
195
  ":hover": {
200
- backgroundColor: error ? fadedRed$1 : white$1,
201
- borderColor: palette.base,
202
- borderWidth: 2
196
+ backgroundColor: error ? states.error.background : colorAction.hover.background,
197
+ outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
198
+ outlineOffset: -1
203
199
  },
204
200
  ":active": {
205
- backgroundColor: palette.faded,
206
- borderColor: error ? activeRed : blue$1,
207
- borderWidth: 2
201
+ backgroundColor: colorAction.press.background,
202
+ outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.press.border}`,
203
+ outlineOffset: -1
208
204
  }
209
205
  }
210
206
  };
@@ -214,15 +210,6 @@ const _generateStyles$1 = (checked, error) => {
214
210
  };
215
211
 
216
212
  const _excluded$6 = ["checked", "disabled", "error", "groupName", "id", "testId"];
217
- const {
218
- blue,
219
- red,
220
- white,
221
- offWhite,
222
- offBlack16,
223
- offBlack32,
224
- offBlack50
225
- } = wonderBlocksTokens.color;
226
213
  const StyledInput$1 = wonderBlocksCore.addStyle("input");
227
214
  const RadioCore = React__namespace.forwardRef(function RadioCore(props, ref) {
228
215
  const handleChange = () => {
@@ -254,6 +241,10 @@ const RadioCore = React__namespace.forwardRef(function RadioCore(props, ref) {
254
241
  style: disabledChecked
255
242
  }));
256
243
  });
244
+ const disabledState = {
245
+ border: wonderBlocksTokens.semanticColor.border.primary,
246
+ background: wonderBlocksTokens.semanticColor.action.disabled.secondary
247
+ };
257
248
  const size = 16;
258
249
  const disabledChecked = {
259
250
  position: "absolute",
@@ -262,7 +253,7 @@ const disabledChecked = {
262
253
  height: size / 2,
263
254
  width: size / 2,
264
255
  borderRadius: "50%",
265
- backgroundColor: offBlack32
256
+ backgroundColor: wonderBlocksTokens.semanticColor.action.disabled.default
266
257
  };
267
258
  const sharedStyles = aphrodite.StyleSheet.create({
268
259
  inputReset: {
@@ -279,75 +270,80 @@ const sharedStyles = aphrodite.StyleSheet.create({
279
270
  outline: "none",
280
271
  boxSizing: "border-box",
281
272
  borderStyle: "solid",
282
- borderWidth: 1,
273
+ borderWidth: wonderBlocksTokens.border.width.hairline,
283
274
  borderRadius: "50%"
284
275
  },
285
276
  disabled: {
286
277
  cursor: "auto",
287
- backgroundColor: offWhite,
288
- borderColor: offBlack16,
289
- borderWidth: 1
278
+ backgroundColor: disabledState.background,
279
+ borderColor: disabledState.border,
280
+ borderWidth: wonderBlocksTokens.border.width.hairline
290
281
  }
291
282
  });
292
- const fadedBlue = wonderBlocksTokens.mix(wonderBlocksTokens.color.fadedBlue16, white);
293
- const fadedRed = wonderBlocksTokens.mix(wonderBlocksTokens.color.fadedRed8, white);
294
- const colors = {
295
- default: {
296
- faded: fadedBlue,
297
- base: blue,
298
- active: wonderBlocksTokens.color.activeBlue
299
- },
300
- error: {
301
- faded: fadedRed,
302
- base: red,
303
- active: wonderBlocksTokens.color.activeRed
304
- }
305
- };
306
283
  const styles$5 = {};
307
284
  const _generateStyles = (checked, error) => {
308
285
  const styleKey = `${String(checked)}-${String(error)}`;
309
286
  if (styles$5[styleKey]) {
310
287
  return styles$5[styleKey];
311
288
  }
312
- const palette = error ? colors.error : colors.default;
289
+ const actionType = error ? "destructive" : "progressive";
290
+ const colorAction = wonderBlocksTokens.semanticColor.action.outlined[actionType];
291
+ const states = {
292
+ unchecked: {
293
+ border: wonderBlocksTokens.semanticColor.border.strong,
294
+ background: colorAction.default.background
295
+ },
296
+ checked: {
297
+ border: colorAction.default.foreground,
298
+ background: colorAction.default.background
299
+ },
300
+ error: {
301
+ border: wonderBlocksTokens.semanticColor.status.critical.foreground,
302
+ background: wonderBlocksTokens.semanticColor.status.critical.background
303
+ }
304
+ };
313
305
  let newStyles = {};
314
306
  if (checked) {
315
307
  newStyles = {
316
308
  default: {
317
- backgroundColor: white,
318
- borderColor: palette.base,
309
+ backgroundColor: states.checked.background,
310
+ borderColor: states.checked.border,
319
311
  borderWidth: size / 4,
320
312
  ":focus-visible": {
321
- boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
313
+ outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
314
+ outlineOffset: 1
322
315
  },
323
316
  ":hover": {
324
- boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
317
+ outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
318
+ outlineOffset: 1
325
319
  },
326
320
  ":active": {
327
- boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
328
- borderColor: palette.active
321
+ outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.press.border}`,
322
+ outlineOffset: 1,
323
+ borderColor: colorAction.press.border
329
324
  }
330
325
  }
331
326
  };
332
327
  } else {
328
+ const currentState = error ? states.error : states.unchecked;
333
329
  newStyles = {
334
330
  default: {
335
- backgroundColor: error ? fadedRed : white,
336
- borderColor: error ? red : offBlack50,
331
+ backgroundColor: currentState.background,
332
+ borderColor: currentState.border,
337
333
  ":focus-visible": {
338
- backgroundColor: error ? fadedRed : white,
339
- borderColor: palette.base,
340
- borderWidth: 2
334
+ backgroundColor: error ? states.error.background : colorAction.hover.background,
335
+ outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
336
+ outlineOffset: -1
341
337
  },
342
338
  ":hover": {
343
- backgroundColor: error ? fadedRed : white,
344
- borderColor: palette.base,
345
- borderWidth: 2
339
+ backgroundColor: error ? states.error.background : colorAction.hover.background,
340
+ outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
341
+ outlineOffset: -1
346
342
  },
347
343
  ":active": {
348
- backgroundColor: palette.faded,
349
- borderColor: error ? wonderBlocksTokens.color.activeRed : blue,
350
- borderWidth: 2
344
+ backgroundColor: colorAction.press.background,
345
+ outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.press.border}`,
346
+ outlineOffset: -1
351
347
  }
352
348
  }
353
349
  };
@@ -431,12 +427,12 @@ const styles$4 = aphrodite.StyleSheet.create({
431
427
  marginTop: -2
432
428
  },
433
429
  disabledLabel: {
434
- color: wonderBlocksTokens.color.offBlack32
430
+ color: wonderBlocksTokens.semanticColor.text.disabled
435
431
  },
436
432
  description: {
437
433
  marginLeft: wonderBlocksTokens.spacing.medium_16 + wonderBlocksTokens.spacing.xSmall_8,
438
434
  marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
439
- color: wonderBlocksTokens.color.offBlack64
435
+ color: wonderBlocksTokens.semanticColor.text.secondary
440
436
  }
441
437
  });
442
438
 
@@ -507,11 +503,11 @@ const styles$3 = aphrodite.StyleSheet.create({
507
503
  },
508
504
  description: {
509
505
  marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
510
- color: wonderBlocksTokens.color.offBlack64
506
+ color: wonderBlocksTokens.semanticColor.text.secondary
511
507
  },
512
508
  error: {
513
509
  marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
514
- color: wonderBlocksTokens.color.red
510
+ color: wonderBlocksTokens.semanticColor.status.critical.foreground
515
511
  },
516
512
  defaultLineGap: {
517
513
  marginTop: wonderBlocksTokens.spacing.xSmall_8
@@ -756,6 +752,23 @@ const TextField = props => {
756
752
  "aria-invalid": hasError
757
753
  }, otherProps)));
758
754
  };
755
+ const states$1 = {
756
+ default: {
757
+ border: wonderBlocksTokens.semanticColor.border.strong,
758
+ background: wonderBlocksTokens.semanticColor.surface.primary,
759
+ foreground: wonderBlocksTokens.semanticColor.text.primary
760
+ },
761
+ disabled: {
762
+ border: wonderBlocksTokens.semanticColor.border.primary,
763
+ background: wonderBlocksTokens.semanticColor.action.disabled.secondary,
764
+ foreground: wonderBlocksTokens.semanticColor.text.secondary
765
+ },
766
+ error: {
767
+ border: wonderBlocksTokens.semanticColor.status.critical.foreground,
768
+ background: wonderBlocksTokens.semanticColor.status.critical.background,
769
+ foreground: wonderBlocksTokens.semanticColor.text.primary
770
+ }
771
+ };
759
772
  const styles$2 = aphrodite.StyleSheet.create({
760
773
  input: {
761
774
  width: "100%",
@@ -766,43 +779,43 @@ const styles$2 = aphrodite.StyleSheet.create({
766
779
  margin: 0
767
780
  },
768
781
  default: {
769
- background: wonderBlocksTokens.color.white,
770
- border: `1px solid ${wonderBlocksTokens.color.offBlack50}`,
771
- color: wonderBlocksTokens.color.offBlack,
782
+ background: states$1.default.background,
783
+ border: `${wonderBlocksTokens.border.width.hairline}px solid ${states$1.default.border}`,
784
+ color: states$1.default.foreground,
772
785
  "::placeholder": {
773
- color: wonderBlocksTokens.color.offBlack64
786
+ color: wonderBlocksTokens.semanticColor.text.secondary
774
787
  }
775
788
  },
776
789
  defaultFocus: {
777
790
  ":focus-visible": {
778
- borderColor: wonderBlocksTokens.color.blue,
779
- outline: `1px solid ${wonderBlocksTokens.color.blue}`,
780
- outlineOffset: "-2px"
791
+ borderColor: wonderBlocksTokens.semanticColor.border.focus,
792
+ outline: `${wonderBlocksTokens.border.width.hairline}px solid ${wonderBlocksTokens.semanticColor.border.focus}`,
793
+ outlineOffset: -2
781
794
  }
782
795
  },
783
796
  error: {
784
- background: wonderBlocksTokens.color.fadedRed8,
785
- border: `1px solid ${wonderBlocksTokens.color.red}`,
786
- color: wonderBlocksTokens.color.offBlack,
797
+ background: states$1.error.background,
798
+ border: `${wonderBlocksTokens.border.width.hairline}px solid ${states$1.error.border}`,
799
+ color: states$1.error.foreground,
787
800
  "::placeholder": {
788
- color: wonderBlocksTokens.color.offBlack64
801
+ color: wonderBlocksTokens.semanticColor.text.secondary
789
802
  },
790
803
  ":focus-visible": {
791
- outlineColor: wonderBlocksTokens.color.red,
792
- borderColor: wonderBlocksTokens.color.red
804
+ outlineColor: states$1.error.border,
805
+ borderColor: states$1.error.border
793
806
  }
794
807
  },
795
808
  disabled: {
796
- background: wonderBlocksTokens.color.offWhite,
797
- border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
798
- color: wonderBlocksTokens.color.offBlack64,
809
+ background: states$1.disabled.background,
810
+ border: `${wonderBlocksTokens.border.width.hairline}px solid ${states$1.disabled.border}`,
811
+ color: states$1.disabled.foreground,
799
812
  "::placeholder": {
800
- color: wonderBlocksTokens.color.offBlack64
813
+ color: states$1.disabled.foreground
801
814
  },
802
815
  cursor: "not-allowed",
803
816
  ":focus-visible": {
804
- outline: `2px solid ${wonderBlocksTokens.color.offBlack32}`,
805
- outlineOffset: "-3px"
817
+ outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.action.disabled.default}`,
818
+ outlineOffset: -3
806
819
  }
807
820
  }
808
821
  });
@@ -879,16 +892,16 @@ class FieldHeading extends React__namespace.Component {
879
892
  }
880
893
  const styles$1 = aphrodite.StyleSheet.create({
881
894
  label: {
882
- color: wonderBlocksTokens.color.offBlack
895
+ color: wonderBlocksTokens.semanticColor.text.primary
883
896
  },
884
897
  description: {
885
- color: wonderBlocksTokens.color.offBlack64
898
+ color: wonderBlocksTokens.semanticColor.text.secondary
886
899
  },
887
900
  error: {
888
- color: wonderBlocksTokens.color.red
901
+ color: wonderBlocksTokens.semanticColor.status.critical.foreground
889
902
  },
890
903
  required: {
891
- color: wonderBlocksTokens.color.red
904
+ color: wonderBlocksTokens.semanticColor.status.critical.foreground
892
905
  }
893
906
  });
894
907
 
@@ -1098,6 +1111,23 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
1098
1111
  })));
1099
1112
  });
1100
1113
  const VERTICAL_SPACING_PX = 10;
1114
+ const states = {
1115
+ default: {
1116
+ border: wonderBlocksTokens.semanticColor.border.strong,
1117
+ background: wonderBlocksTokens.semanticColor.surface.primary,
1118
+ foreground: wonderBlocksTokens.semanticColor.text.primary
1119
+ },
1120
+ disabled: {
1121
+ border: wonderBlocksTokens.semanticColor.border.primary,
1122
+ background: wonderBlocksTokens.semanticColor.action.disabled.secondary,
1123
+ foreground: wonderBlocksTokens.semanticColor.text.secondary
1124
+ },
1125
+ error: {
1126
+ border: wonderBlocksTokens.semanticColor.status.critical.foreground,
1127
+ background: wonderBlocksTokens.semanticColor.status.critical.background,
1128
+ foreground: wonderBlocksTokens.semanticColor.text.primary
1129
+ }
1130
+ };
1101
1131
  const styles = aphrodite.StyleSheet.create({
1102
1132
  textarea: {
1103
1133
  borderRadius: wonderBlocksTokens.border.radius.medium_4,
@@ -1106,43 +1136,43 @@ const styles = aphrodite.StyleSheet.create({
1106
1136
  minHeight: `${VERTICAL_SPACING_PX * 2 + wonderBlocksTokens.font.lineHeight.medium + 2 * wonderBlocksTokens.border.width.hairline}px`
1107
1137
  },
1108
1138
  default: {
1109
- background: wonderBlocksTokens.color.white,
1110
- border: `1px solid ${wonderBlocksTokens.color.offBlack50}`,
1111
- color: wonderBlocksTokens.color.offBlack,
1139
+ background: states.default.background,
1140
+ border: `${wonderBlocksTokens.border.width.hairline}px solid ${states.default.border}`,
1141
+ color: states.default.foreground,
1112
1142
  "::placeholder": {
1113
- color: wonderBlocksTokens.color.offBlack64
1143
+ color: wonderBlocksTokens.semanticColor.text.secondary
1114
1144
  }
1115
1145
  },
1116
1146
  defaultFocus: {
1117
1147
  ":focus-visible": {
1118
- borderColor: wonderBlocksTokens.color.blue,
1119
- outline: `1px solid ${wonderBlocksTokens.color.blue}`,
1120
- outlineOffset: "-2px"
1148
+ borderColor: wonderBlocksTokens.semanticColor.border.focus,
1149
+ outline: `${wonderBlocksTokens.border.width.hairline}px solid ${wonderBlocksTokens.semanticColor.border.focus}`,
1150
+ outlineOffset: -2
1121
1151
  }
1122
1152
  },
1123
1153
  disabled: {
1124
- background: wonderBlocksTokens.color.offWhite,
1125
- border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
1126
- color: wonderBlocksTokens.color.offBlack64,
1154
+ background: states.disabled.background,
1155
+ border: `${wonderBlocksTokens.border.width.hairline}px solid ${states.disabled.border}`,
1156
+ color: states.disabled.foreground,
1127
1157
  "::placeholder": {
1128
- color: wonderBlocksTokens.color.offBlack64
1158
+ color: states.disabled.foreground
1129
1159
  },
1130
1160
  cursor: "not-allowed",
1131
1161
  ":focus-visible": {
1132
- outline: `2px solid ${wonderBlocksTokens.color.offBlack32}`,
1133
- outlineOffset: "-3px"
1162
+ outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.action.disabled.default}`,
1163
+ outlineOffset: -3
1134
1164
  }
1135
1165
  },
1136
1166
  error: {
1137
- background: wonderBlocksTokens.color.fadedRed8,
1138
- border: `1px solid ${wonderBlocksTokens.color.red}`,
1139
- color: wonderBlocksTokens.color.offBlack,
1167
+ background: states.error.background,
1168
+ border: `${wonderBlocksTokens.border.width.hairline}px solid ${states.error.border}`,
1169
+ color: states.error.foreground,
1140
1170
  "::placeholder": {
1141
- color: wonderBlocksTokens.color.offBlack64
1171
+ color: wonderBlocksTokens.semanticColor.text.secondary
1142
1172
  },
1143
1173
  ":focus-visible": {
1144
- outlineColor: wonderBlocksTokens.color.red,
1145
- borderColor: wonderBlocksTokens.color.red
1174
+ outlineColor: states.error.border,
1175
+ borderColor: states.error.border
1146
1176
  }
1147
1177
  }
1148
1178
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-form",
3
- "version": "7.0.0",
3
+ "version": "7.0.2",
4
4
  "design": "v1",
5
5
  "description": "Form components for Wonder Blocks.",
6
6
  "main": "dist/index.js",
@@ -17,12 +17,12 @@
17
17
  },
18
18
  "dependencies": {
19
19
  "@babel/runtime": "^7.18.6",
20
- "@khanacademy/wonder-blocks-clickable": "^5.0.6",
21
- "@khanacademy/wonder-blocks-core": "^11.1.0",
22
- "@khanacademy/wonder-blocks-icon": "^5.0.5",
23
- "@khanacademy/wonder-blocks-layout": "^3.0.6",
24
- "@khanacademy/wonder-blocks-tokens": "^4.0.0",
25
- "@khanacademy/wonder-blocks-typography": "^3.0.5"
20
+ "@khanacademy/wonder-blocks-clickable": "^6.0.0",
21
+ "@khanacademy/wonder-blocks-core": "^12.0.0",
22
+ "@khanacademy/wonder-blocks-icon": "^5.0.6",
23
+ "@khanacademy/wonder-blocks-layout": "^3.0.8",
24
+ "@khanacademy/wonder-blocks-tokens": "^4.1.0",
25
+ "@khanacademy/wonder-blocks-typography": "^3.0.6"
26
26
  },
27
27
  "peerDependencies": {
28
28
  "aphrodite": "^1.2.5",