@khanacademy/wonder-blocks-pill 3.1.10 → 3.1.11

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 +12 -0
  2. package/dist/es/index.js +2 -174
  3. package/dist/index.js +2 -176
  4. package/package.json +6 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @khanacademy/wonder-blocks-pill
2
2
 
3
+ ## 3.1.11
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [b9e4946]
8
+ - Updated dependencies [b9e4946]
9
+ - @khanacademy/wonder-blocks-tokens@10.0.0
10
+ - @khanacademy/wonder-blocks-typography@3.2.0
11
+ - @khanacademy/wonder-blocks-clickable@7.0.4
12
+ - @khanacademy/wonder-blocks-link@9.0.4
13
+ - @khanacademy/wonder-blocks-core@12.2.1
14
+
3
15
  ## 3.1.10
4
16
 
5
17
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -1,5 +1,4 @@
1
- import _extends from '@babel/runtime/helpers/extends';
2
- import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
1
+ import { jsx } from 'react/jsx-runtime';
3
2
  import * as React from 'react';
4
3
  import { StyleSheet } from 'aphrodite';
5
4
  import Clickable from '@khanacademy/wonder-blocks-clickable';
@@ -7,177 +6,6 @@ import { View } from '@khanacademy/wonder-blocks-core';
7
6
  import { LabelXSmall, Body, LabelSmall } from '@khanacademy/wonder-blocks-typography';
8
7
  import * as tokens from '@khanacademy/wonder-blocks-tokens';
9
8
 
10
- const _excluded = ["id", "children", "kind", "size", "role", "onClick", "style", "tabIndex", "testId"];
11
- const {
12
- semanticColor
13
- } = tokens;
14
- const PillInner = props => {
15
- const {
16
- children,
17
- size
18
- } = props;
19
- if (typeof children !== "string") {
20
- return children;
21
- }
22
- if (size === "small") {
23
- return React.createElement(LabelXSmall, null, props.children);
24
- }
25
- if (size === "large") {
26
- return React.createElement(Body, null, children);
27
- }
28
- return React.createElement(LabelSmall, null, children);
29
- };
30
- const Pill = React.forwardRef(function Pill(props, ref) {
31
- const {
32
- id,
33
- children,
34
- kind = "neutral",
35
- size = "medium",
36
- role,
37
- onClick,
38
- style,
39
- tabIndex,
40
- testId
41
- } = props,
42
- ariaProps = _objectWithoutPropertiesLoose(props, _excluded);
43
- let wrapperSizeStyle;
44
- switch (size) {
45
- case "small":
46
- wrapperSizeStyle = pillStyles.wrapperSmall;
47
- break;
48
- case "large":
49
- wrapperSizeStyle = pillStyles.wrapperLarge;
50
- break;
51
- default:
52
- wrapperSizeStyle = pillStyles.wrapperMedium;
53
- }
54
- const colorStyles = _generateColorStyles(!!onClick, kind);
55
- const defaultStyles = [pillStyles.wrapper, colorStyles.pill, wrapperSizeStyle];
56
- if (onClick) {
57
- return React.createElement(Clickable, _extends({
58
- id: id,
59
- role: role,
60
- onClick: onClick,
61
- style: [defaultStyles, colorStyles.clickableWrapper, style],
62
- testId: testId,
63
- ref: ref,
64
- tabIndex: tabIndex
65
- }, ariaProps), () => React.createElement(PillInner, {
66
- size: size
67
- }, children));
68
- }
69
- return React.createElement(View, _extends({
70
- id: id,
71
- role: role,
72
- style: [defaultStyles, style],
73
- testId: testId,
74
- ref: ref
75
- }, ariaProps), React.createElement(PillInner, {
76
- size: size
77
- }, children));
78
- });
79
- const pillStyles = StyleSheet.create({
80
- wrapper: {
81
- display: "inline-flex",
82
- width: "fit-content"
83
- },
84
- wrapperSmall: {
85
- paddingLeft: tokens.spacing.xSmall_8,
86
- paddingRight: tokens.spacing.xSmall_8,
87
- borderRadius: tokens.border.radius.radius_040,
88
- height: 20
89
- },
90
- wrapperMedium: {
91
- paddingLeft: tokens.spacing.xSmall_8,
92
- paddingRight: tokens.spacing.xSmall_8,
93
- borderRadius: tokens.border.radius.radius_040,
94
- height: tokens.spacing.large_24
95
- },
96
- wrapperLarge: {
97
- paddingLeft: tokens.spacing.small_12,
98
- paddingRight: tokens.spacing.small_12,
99
- paddingTop: tokens.spacing.xxSmall_6,
100
- paddingBottom: tokens.spacing.xxSmall_6,
101
- borderRadius: tokens.sizing.size_240,
102
- height: tokens.spacing.xLarge_32
103
- }
104
- });
105
- const styles = {};
106
- const _generateColorStyles = (clickable, kind) => {
107
- const pillType = `${kind}-${clickable.toString()}`;
108
- if (styles[pillType]) {
109
- return styles[pillType];
110
- }
111
- let backgroundColor;
112
- switch (kind) {
113
- case "accent":
114
- backgroundColor = semanticColor.status.notice.foreground;
115
- break;
116
- case "info":
117
- backgroundColor = semanticColor.status.notice.background;
118
- break;
119
- case "success":
120
- backgroundColor = semanticColor.status.success.background;
121
- break;
122
- case "warning":
123
- backgroundColor = semanticColor.status.warning.background;
124
- break;
125
- case "critical":
126
- backgroundColor = semanticColor.status.critical.background;
127
- break;
128
- case "transparent":
129
- backgroundColor = "transparent";
130
- break;
131
- case "neutral":
132
- default:
133
- backgroundColor = semanticColor.status.neutral.background;
134
- }
135
- const pressColor = kind === "transparent" || kind === "neutral" ? tokens.color.offBlack16 : kind === "accent" ? tokens.color.activeBlue : `color-mix(in srgb, ${tokens.color.offBlack32}, ${backgroundColor})`;
136
- const textColor = kind === "accent" ? semanticColor.text.inverse : semanticColor.text.primary;
137
- const theme = {
138
- default: {
139
- border: kind === "transparent" ? `1px solid ${semanticColor.border.primary}` : "none",
140
- background: backgroundColor,
141
- foreground: textColor
142
- },
143
- focus: {
144
- border: semanticColor.focus.outer
145
- },
146
- hover: {
147
- border: semanticColor.action.primary.progressive.hover.border
148
- },
149
- press: {
150
- border: semanticColor.action.primary.progressive.press.border,
151
- background: pressColor
152
- }
153
- };
154
- const colorStyles = {
155
- pill: {
156
- backgroundColor: theme.default.background,
157
- outline: theme.default.border,
158
- color: theme.default.foreground,
159
- alignItems: "center",
160
- justifyContent: "center"
161
- },
162
- clickableWrapper: {
163
- outline: theme.default.border,
164
- ":hover": {
165
- outline: `2px solid ${theme.hover.border}`,
166
- outlineOffset: tokens.spacing.xxxxSmall_2
167
- },
168
- ":active": {
169
- backgroundColor: theme.press.background,
170
- outline: `2px solid ${theme.press.border}`,
171
- outlineOffset: tokens.spacing.xxxxSmall_2
172
- },
173
- ":focus-visible": {
174
- outline: `2px solid ${theme.focus.border}`,
175
- outlineOffset: tokens.spacing.xxxxSmall_2
176
- }
177
- }
178
- };
179
- styles[pillType] = StyleSheet.create(colorStyles);
180
- return styles[pillType];
181
- };
9
+ const{semanticColor}=tokens;const PillInner=props=>{const{children,size}=props;if(typeof children!=="string"){return children}if(size==="small"){return jsx(LabelXSmall,{children:props.children})}if(size==="large"){return jsx(Body,{children:children})}return jsx(LabelSmall,{children:children})};const Pill=React.forwardRef(function Pill(props,ref){const{id,children,kind="neutral",size="medium",role,onClick,style,tabIndex,testId,...ariaProps}=props;let wrapperSizeStyle;switch(size){case"small":wrapperSizeStyle=pillStyles.wrapperSmall;break;case"large":wrapperSizeStyle=pillStyles.wrapperLarge;break;default:wrapperSizeStyle=pillStyles.wrapperMedium;}const colorStyles=_generateColorStyles(!!onClick,kind);const defaultStyles=[pillStyles.wrapper,colorStyles.pill,wrapperSizeStyle];if(onClick){return jsx(Clickable,{id:id,role:role,onClick:onClick,style:[defaultStyles,colorStyles.clickableWrapper,style],testId:testId,ref:ref,tabIndex:tabIndex,...ariaProps,children:()=>jsx(PillInner,{size:size,children:children})})}return jsx(View,{id:id,role:role,style:[defaultStyles,style],testId:testId,ref:ref,...ariaProps,children:jsx(PillInner,{size:size,children:children})})});const pillStyles=StyleSheet.create({wrapper:{display:"inline-flex",width:"fit-content"},wrapperSmall:{paddingLeft:tokens.spacing.xSmall_8,paddingRight:tokens.spacing.xSmall_8,borderRadius:tokens.border.radius.radius_040,height:20},wrapperMedium:{paddingLeft:tokens.spacing.xSmall_8,paddingRight:tokens.spacing.xSmall_8,borderRadius:tokens.border.radius.radius_040,height:tokens.spacing.large_24},wrapperLarge:{paddingLeft:tokens.spacing.small_12,paddingRight:tokens.spacing.small_12,paddingTop:tokens.spacing.xxSmall_6,paddingBottom:tokens.spacing.xxSmall_6,borderRadius:tokens.sizing.size_240,height:tokens.spacing.xLarge_32}});const styles={};const _generateColorStyles=(clickable,kind)=>{const pillType=`${kind}-${clickable.toString()}`;if(styles[pillType]){return styles[pillType]}let backgroundColor;switch(kind){case"accent":backgroundColor=semanticColor.status.notice.foreground;break;case"info":backgroundColor=semanticColor.status.notice.background;break;case"success":backgroundColor=semanticColor.status.success.background;break;case"warning":backgroundColor=semanticColor.status.warning.background;break;case"critical":backgroundColor=semanticColor.status.critical.background;break;case"transparent":backgroundColor="transparent";break;case"neutral":default:backgroundColor=semanticColor.status.neutral.background;}const pressColor=kind==="transparent"||kind==="neutral"?tokens.color.offBlack16:kind==="accent"?tokens.color.activeBlue:`color-mix(in srgb, ${tokens.color.offBlack32}, ${backgroundColor})`;const textColor=kind==="accent"?semanticColor.text.inverse:semanticColor.text.primary;const theme={default:{border:kind==="transparent"?`1px solid ${semanticColor.border.primary}`:"none",background:backgroundColor,foreground:textColor},focus:{border:semanticColor.focus.outer},hover:{border:semanticColor.action.primary.progressive.hover.border},press:{border:semanticColor.action.primary.progressive.press.border,background:pressColor}};const colorStyles={pill:{backgroundColor:theme.default.background,outline:theme.default.border,color:theme.default.foreground,alignItems:"center",justifyContent:"center"},clickableWrapper:{outline:theme.default.border,":hover":{outline:`2px solid ${theme.hover.border}`,outlineOffset:tokens.spacing.xxxxSmall_2},":active":{backgroundColor:theme.press.background,outline:`2px solid ${theme.press.border}`,outlineOffset:tokens.spacing.xxxxSmall_2},":focus-visible":{outline:`2px solid ${theme.focus.border}`,outlineOffset:tokens.spacing.xxxxSmall_2}}};styles[pillType]=StyleSheet.create(colorStyles);return styles[pillType]};
182
10
 
183
11
  export { Pill as default };
package/dist/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var _extends = require('@babel/runtime/helpers/extends');
4
- var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
3
+ var jsxRuntime = require('react/jsx-runtime');
5
4
  var React = require('react');
6
5
  var aphrodite = require('aphrodite');
7
6
  var Clickable = require('@khanacademy/wonder-blocks-clickable');
@@ -29,183 +28,10 @@ function _interopNamespace(e) {
29
28
  return Object.freeze(n);
30
29
  }
31
30
 
32
- var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
33
- var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
34
31
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
35
32
  var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
36
33
  var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens);
37
34
 
38
- const _excluded = ["id", "children", "kind", "size", "role", "onClick", "style", "tabIndex", "testId"];
39
- const {
40
- semanticColor
41
- } = tokens__namespace;
42
- const PillInner = props => {
43
- const {
44
- children,
45
- size
46
- } = props;
47
- if (typeof children !== "string") {
48
- return children;
49
- }
50
- if (size === "small") {
51
- return React__namespace.createElement(wonderBlocksTypography.LabelXSmall, null, props.children);
52
- }
53
- if (size === "large") {
54
- return React__namespace.createElement(wonderBlocksTypography.Body, null, children);
55
- }
56
- return React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, children);
57
- };
58
- const Pill = React__namespace.forwardRef(function Pill(props, ref) {
59
- const {
60
- id,
61
- children,
62
- kind = "neutral",
63
- size = "medium",
64
- role,
65
- onClick,
66
- style,
67
- tabIndex,
68
- testId
69
- } = props,
70
- ariaProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
71
- let wrapperSizeStyle;
72
- switch (size) {
73
- case "small":
74
- wrapperSizeStyle = pillStyles.wrapperSmall;
75
- break;
76
- case "large":
77
- wrapperSizeStyle = pillStyles.wrapperLarge;
78
- break;
79
- default:
80
- wrapperSizeStyle = pillStyles.wrapperMedium;
81
- }
82
- const colorStyles = _generateColorStyles(!!onClick, kind);
83
- const defaultStyles = [pillStyles.wrapper, colorStyles.pill, wrapperSizeStyle];
84
- if (onClick) {
85
- return React__namespace.createElement(Clickable__default["default"], _extends__default["default"]({
86
- id: id,
87
- role: role,
88
- onClick: onClick,
89
- style: [defaultStyles, colorStyles.clickableWrapper, style],
90
- testId: testId,
91
- ref: ref,
92
- tabIndex: tabIndex
93
- }, ariaProps), () => React__namespace.createElement(PillInner, {
94
- size: size
95
- }, children));
96
- }
97
- return React__namespace.createElement(wonderBlocksCore.View, _extends__default["default"]({
98
- id: id,
99
- role: role,
100
- style: [defaultStyles, style],
101
- testId: testId,
102
- ref: ref
103
- }, ariaProps), React__namespace.createElement(PillInner, {
104
- size: size
105
- }, children));
106
- });
107
- const pillStyles = aphrodite.StyleSheet.create({
108
- wrapper: {
109
- display: "inline-flex",
110
- width: "fit-content"
111
- },
112
- wrapperSmall: {
113
- paddingLeft: tokens__namespace.spacing.xSmall_8,
114
- paddingRight: tokens__namespace.spacing.xSmall_8,
115
- borderRadius: tokens__namespace.border.radius.radius_040,
116
- height: 20
117
- },
118
- wrapperMedium: {
119
- paddingLeft: tokens__namespace.spacing.xSmall_8,
120
- paddingRight: tokens__namespace.spacing.xSmall_8,
121
- borderRadius: tokens__namespace.border.radius.radius_040,
122
- height: tokens__namespace.spacing.large_24
123
- },
124
- wrapperLarge: {
125
- paddingLeft: tokens__namespace.spacing.small_12,
126
- paddingRight: tokens__namespace.spacing.small_12,
127
- paddingTop: tokens__namespace.spacing.xxSmall_6,
128
- paddingBottom: tokens__namespace.spacing.xxSmall_6,
129
- borderRadius: tokens__namespace.sizing.size_240,
130
- height: tokens__namespace.spacing.xLarge_32
131
- }
132
- });
133
- const styles = {};
134
- const _generateColorStyles = (clickable, kind) => {
135
- const pillType = `${kind}-${clickable.toString()}`;
136
- if (styles[pillType]) {
137
- return styles[pillType];
138
- }
139
- let backgroundColor;
140
- switch (kind) {
141
- case "accent":
142
- backgroundColor = semanticColor.status.notice.foreground;
143
- break;
144
- case "info":
145
- backgroundColor = semanticColor.status.notice.background;
146
- break;
147
- case "success":
148
- backgroundColor = semanticColor.status.success.background;
149
- break;
150
- case "warning":
151
- backgroundColor = semanticColor.status.warning.background;
152
- break;
153
- case "critical":
154
- backgroundColor = semanticColor.status.critical.background;
155
- break;
156
- case "transparent":
157
- backgroundColor = "transparent";
158
- break;
159
- case "neutral":
160
- default:
161
- backgroundColor = semanticColor.status.neutral.background;
162
- }
163
- const pressColor = kind === "transparent" || kind === "neutral" ? tokens__namespace.color.offBlack16 : kind === "accent" ? tokens__namespace.color.activeBlue : `color-mix(in srgb, ${tokens__namespace.color.offBlack32}, ${backgroundColor})`;
164
- const textColor = kind === "accent" ? semanticColor.text.inverse : semanticColor.text.primary;
165
- const theme = {
166
- default: {
167
- border: kind === "transparent" ? `1px solid ${semanticColor.border.primary}` : "none",
168
- background: backgroundColor,
169
- foreground: textColor
170
- },
171
- focus: {
172
- border: semanticColor.focus.outer
173
- },
174
- hover: {
175
- border: semanticColor.action.primary.progressive.hover.border
176
- },
177
- press: {
178
- border: semanticColor.action.primary.progressive.press.border,
179
- background: pressColor
180
- }
181
- };
182
- const colorStyles = {
183
- pill: {
184
- backgroundColor: theme.default.background,
185
- outline: theme.default.border,
186
- color: theme.default.foreground,
187
- alignItems: "center",
188
- justifyContent: "center"
189
- },
190
- clickableWrapper: {
191
- outline: theme.default.border,
192
- ":hover": {
193
- outline: `2px solid ${theme.hover.border}`,
194
- outlineOffset: tokens__namespace.spacing.xxxxSmall_2
195
- },
196
- ":active": {
197
- backgroundColor: theme.press.background,
198
- outline: `2px solid ${theme.press.border}`,
199
- outlineOffset: tokens__namespace.spacing.xxxxSmall_2
200
- },
201
- ":focus-visible": {
202
- outline: `2px solid ${theme.focus.border}`,
203
- outlineOffset: tokens__namespace.spacing.xxxxSmall_2
204
- }
205
- }
206
- };
207
- styles[pillType] = aphrodite.StyleSheet.create(colorStyles);
208
- return styles[pillType];
209
- };
35
+ const{semanticColor}=tokens__namespace;const PillInner=props=>{const{children,size}=props;if(typeof children!=="string"){return children}if(size==="small"){return jsxRuntime.jsx(wonderBlocksTypography.LabelXSmall,{children:props.children})}if(size==="large"){return jsxRuntime.jsx(wonderBlocksTypography.Body,{children:children})}return jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{children:children})};const Pill=React__namespace.forwardRef(function Pill(props,ref){const{id,children,kind="neutral",size="medium",role,onClick,style,tabIndex,testId,...ariaProps}=props;let wrapperSizeStyle;switch(size){case"small":wrapperSizeStyle=pillStyles.wrapperSmall;break;case"large":wrapperSizeStyle=pillStyles.wrapperLarge;break;default:wrapperSizeStyle=pillStyles.wrapperMedium;}const colorStyles=_generateColorStyles(!!onClick,kind);const defaultStyles=[pillStyles.wrapper,colorStyles.pill,wrapperSizeStyle];if(onClick){return jsxRuntime.jsx(Clickable__default["default"],{id:id,role:role,onClick:onClick,style:[defaultStyles,colorStyles.clickableWrapper,style],testId:testId,ref:ref,tabIndex:tabIndex,...ariaProps,children:()=>jsxRuntime.jsx(PillInner,{size:size,children:children})})}return jsxRuntime.jsx(wonderBlocksCore.View,{id:id,role:role,style:[defaultStyles,style],testId:testId,ref:ref,...ariaProps,children:jsxRuntime.jsx(PillInner,{size:size,children:children})})});const pillStyles=aphrodite.StyleSheet.create({wrapper:{display:"inline-flex",width:"fit-content"},wrapperSmall:{paddingLeft:tokens__namespace.spacing.xSmall_8,paddingRight:tokens__namespace.spacing.xSmall_8,borderRadius:tokens__namespace.border.radius.radius_040,height:20},wrapperMedium:{paddingLeft:tokens__namespace.spacing.xSmall_8,paddingRight:tokens__namespace.spacing.xSmall_8,borderRadius:tokens__namespace.border.radius.radius_040,height:tokens__namespace.spacing.large_24},wrapperLarge:{paddingLeft:tokens__namespace.spacing.small_12,paddingRight:tokens__namespace.spacing.small_12,paddingTop:tokens__namespace.spacing.xxSmall_6,paddingBottom:tokens__namespace.spacing.xxSmall_6,borderRadius:tokens__namespace.sizing.size_240,height:tokens__namespace.spacing.xLarge_32}});const styles={};const _generateColorStyles=(clickable,kind)=>{const pillType=`${kind}-${clickable.toString()}`;if(styles[pillType]){return styles[pillType]}let backgroundColor;switch(kind){case"accent":backgroundColor=semanticColor.status.notice.foreground;break;case"info":backgroundColor=semanticColor.status.notice.background;break;case"success":backgroundColor=semanticColor.status.success.background;break;case"warning":backgroundColor=semanticColor.status.warning.background;break;case"critical":backgroundColor=semanticColor.status.critical.background;break;case"transparent":backgroundColor="transparent";break;case"neutral":default:backgroundColor=semanticColor.status.neutral.background;}const pressColor=kind==="transparent"||kind==="neutral"?tokens__namespace.color.offBlack16:kind==="accent"?tokens__namespace.color.activeBlue:`color-mix(in srgb, ${tokens__namespace.color.offBlack32}, ${backgroundColor})`;const textColor=kind==="accent"?semanticColor.text.inverse:semanticColor.text.primary;const theme={default:{border:kind==="transparent"?`1px solid ${semanticColor.border.primary}`:"none",background:backgroundColor,foreground:textColor},focus:{border:semanticColor.focus.outer},hover:{border:semanticColor.action.primary.progressive.hover.border},press:{border:semanticColor.action.primary.progressive.press.border,background:pressColor}};const colorStyles={pill:{backgroundColor:theme.default.background,outline:theme.default.border,color:theme.default.foreground,alignItems:"center",justifyContent:"center"},clickableWrapper:{outline:theme.default.border,":hover":{outline:`2px solid ${theme.hover.border}`,outlineOffset:tokens__namespace.spacing.xxxxSmall_2},":active":{backgroundColor:theme.press.background,outline:`2px solid ${theme.press.border}`,outlineOffset:tokens__namespace.spacing.xxxxSmall_2},":focus-visible":{outline:`2px solid ${theme.focus.border}`,outlineOffset:tokens__namespace.spacing.xxxxSmall_2}}};styles[pillType]=aphrodite.StyleSheet.create(colorStyles);return styles[pillType]};
210
36
 
211
37
  module.exports = Pill;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-pill",
3
- "version": "3.1.10",
3
+ "version": "3.1.11",
4
4
  "design": "v1",
5
5
  "description": "Pill components for Wonder Blocks.",
6
6
  "main": "dist/index.js",
@@ -13,19 +13,18 @@
13
13
  "access": "public"
14
14
  },
15
15
  "dependencies": {
16
- "@babel/runtime": "^7.24.5",
17
- "@khanacademy/wonder-blocks-clickable": "7.0.3",
16
+ "@khanacademy/wonder-blocks-clickable": "7.0.4",
18
17
  "@khanacademy/wonder-blocks-core": "12.2.1",
19
- "@khanacademy/wonder-blocks-link": "9.0.3",
20
- "@khanacademy/wonder-blocks-tokens": "9.0.0",
21
- "@khanacademy/wonder-blocks-typography": "3.1.3"
18
+ "@khanacademy/wonder-blocks-link": "9.0.4",
19
+ "@khanacademy/wonder-blocks-tokens": "10.0.0",
20
+ "@khanacademy/wonder-blocks-typography": "3.2.0"
22
21
  },
23
22
  "peerDependencies": {
24
23
  "aphrodite": "^1.2.5",
25
24
  "react": "18.2.0"
26
25
  },
27
26
  "devDependencies": {
28
- "@khanacademy/wb-dev-build-settings": "2.1.1"
27
+ "@khanacademy/wb-dev-build-settings": "3.0.0"
29
28
  },
30
29
  "scripts": {
31
30
  "test": "echo \"Error: no test specified\" && exit 1"