@khanacademy/wonder-blocks-banner 4.1.12 → 4.1.13

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @khanacademy/wonder-blocks-banner
 
+## 4.1.13
+
+### Patch Changes
+
+- Updated dependencies [b9e4946]
+- Updated dependencies [b9e4946]
+- Updated dependencies [b9e4946]
+    - @khanacademy/wonder-blocks-tokens@10.0.0
+    - @khanacademy/wonder-blocks-typography@3.2.0
+    - @khanacademy/wonder-blocks-button@9.0.1
+    - @khanacademy/wonder-blocks-icon-button@9.0.5
+    - @khanacademy/wonder-blocks-link@9.0.4
+    - @khanacademy/wonder-blocks-core@12.2.1
+    - @khanacademy/wonder-blocks-icon@5.1.3
+
 ## 4.1.12
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
 import { StyleSheet } from 'aphrodite';
 import xIcon from '@phosphor-icons/core/regular/x.svg';
 import Button from '@khanacademy/wonder-blocks-button';
@@ -13,191 +14,6 @@ import successIcon from '@phosphor-icons/core/regular/smiley.svg';
 import warningIcon from '@phosphor-icons/core/regular/warning.svg';
 import criticalIcon from '@phosphor-icons/core/regular/warning-circle.svg';
 
-const getValuesForKind = kind => {
-  switch (kind) {
-    case "success":
-      return {
-        color: semanticColor.status.success.foreground,
-        icon: successIcon,
-        role: "status"
-      };
-    case "warning":
-      return {
-        color: semanticColor.status.warning.foreground,
-        icon: warningIcon,
-        role: "alert",
-        ariaLive: "polite"
-      };
-    case "critical":
-      return {
-        color: semanticColor.status.critical.foreground,
-        icon: criticalIcon,
-        role: "alert"
-      };
-    default:
-      return {
-        color: semanticColor.status.notice.foreground,
-        icon: infoIcon,
-        role: "status"
-      };
-  }
-};
-const Banner = props => {
-  const {
-    actions,
-    "aria-label": ariaLabel,
-    dismissAriaLabel = "Dismiss banner.",
-    onDismiss,
-    kind = "info",
-    layout,
-    text,
-    testId,
-    icon
-  } = props;
-  const renderActions = () => {
-    return actions == null ? void 0 : actions.filter(Boolean).map((action, i) => {
-      if (action.type === "custom") {
-        return React.createElement(View, {
-          style: styles.action,
-          key: `custom-action-${i}`
-        }, action.node);
-      }
-      const handleClick = action.onClick;
-      if (action.type === "link") {
-        var _action$ariaLabel;
-        return React.createElement(View, {
-          style: styles.action,
-          key: action.title
-        }, React.createElement(Link, {
-          href: action.href,
-          onClick: handleClick,
-          "aria-label": (_action$ariaLabel = action.ariaLabel) != null ? _action$ariaLabel : action.title,
-          style: styles.link
-        }, action.title));
-      } else {
-        var _action$ariaLabel2;
-        return React.createElement(View, {
-          style: styles.action,
-          key: action.title
-        }, React.createElement(Button, {
-          kind: "tertiary",
-          size: "small",
-          "aria-label": (_action$ariaLabel2 = action.ariaLabel) != null ? _action$ariaLabel2 : action.title,
-          onClick: handleClick
-        }, action.title));
-      }
-    });
-  };
-  const valuesForKind = getValuesForKind(kind);
-  return React.createElement(View, {
-    style: [styles.containerOuter, layout === "floating" && styles.floatingBorder, {
-      borderInlineStartColor: valuesForKind.color
-    }],
-    role: valuesForKind.role,
-    "aria-label": ariaLabel,
-    "aria-live": valuesForKind.ariaLive,
-    testId: testId
-  }, React.createElement(View, {
-    style: [styles.backgroundColor, {
-      backgroundColor: valuesForKind.color
-    }]
-  }), React.createElement(View, {
-    style: styles.containerInner
-  }, React.createElement(PhosphorIcon, {
-    icon: icon || valuesForKind.icon,
-    size: "medium",
-    style: styles.icon,
-    "aria-label": kind,
-    testId: "banner-kind-icon",
-    role: "img"
-  }), React.createElement(View, {
-    style: styles.labelAndButtonsContainer
-  }, React.createElement(View, {
-    style: styles.labelContainer
-  }, React.createElement(LabelSmall, null, text)), actions && React.createElement(View, {
-    style: styles.actionsContainer
-  }, renderActions())), onDismiss ? React.createElement(View, {
-    style: styles.dismissContainer
-  }, React.createElement(IconButton, {
-    icon: xIcon,
-    kind: "tertiary",
-    actionType: "neutral",
-    onClick: onDismiss,
-    style: styles.dismiss,
-    "aria-label": dismissAriaLabel
-  })) : null));
-};
-const styles = StyleSheet.create({
-  backgroundColor: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    opacity: 0.08
-  },
-  containerOuter: {
-    borderInlineStartWidth: spacing.xxSmall_6,
-    width: "100%",
-    backgroundColor: semanticColor.surface.primary
-  },
-  containerInner: {
-    flexDirection: "row",
-    padding: spacing.xSmall_8
-  },
-  icon: {
-    marginTop: spacing.xSmall_8,
-    marginBottom: spacing.xSmall_8,
-    marginInlineStart: spacing.xxxxSmall_2,
-    marginInlineEnd: spacing.xSmall_8,
-    alignSelf: "flex-start",
-    color: semanticColor.icon.primary
-  },
-  labelAndButtonsContainer: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    alignContent: "center",
-    flexWrap: "wrap",
-    justifyContent: "space-between"
-  },
-  labelContainer: {
-    flexShrink: 1,
-    margin: spacing.xSmall_8,
-    textAlign: "start",
-    overflowWrap: "break-word"
-  },
-  actionsContainer: {
-    flexDirection: "row",
-    justifyContent: "flex-start",
-    marginTop: spacing.xSmall_8,
-    marginBottom: spacing.xSmall_8,
-    height: 18,
-    alignItems: "center"
-  },
-  action: {
-    marginLeft: spacing.xSmall_8,
-    marginRight: spacing.xSmall_8,
-    justifyContent: "center"
-  },
-  link: {
-    fontSize: font.size.small
-  },
-  dismiss: {
-    flexShrink: 1
-  },
-  dismissContainer: {
-    height: 40,
-    width: 40,
-    justifyContent: "center",
-    alignItems: "center",
-    marginLeft: spacing.xSmall_8,
-    marginRight: spacing.xSmall_8
-  },
-  floatingBorder: {
-    borderRadius: border.radius.radius_040,
-    overflow: "hidden"
-  }
-});
+const getValuesForKind=kind=>{switch(kind){case"success":return {color:semanticColor.status.success.foreground,icon:successIcon,role:"status"};case"warning":return {color:semanticColor.status.warning.foreground,icon:warningIcon,role:"alert",ariaLive:"polite"};case"critical":return {color:semanticColor.status.critical.foreground,icon:criticalIcon,role:"alert"};default:return {color:semanticColor.status.notice.foreground,icon:infoIcon,role:"status"}}};const Banner=props=>{const{actions,"aria-label":ariaLabel,dismissAriaLabel="Dismiss banner.",onDismiss,kind="info",layout,text,testId,icon}=props;const renderActions=()=>{return actions?.filter(Boolean).map((action,i)=>{if(action.type==="custom"){return jsx(View,{style:styles.action,children:action.node},`custom-action-${i}`)}const handleClick=action.onClick;if(action.type==="link"){return jsx(View,{style:styles.action,children:jsx(Link,{href:action.href,onClick:handleClick,"aria-label":action.ariaLabel??action.title,style:styles.link,children:action.title})},action.title)}else {return jsx(View,{style:styles.action,children:jsx(Button,{kind:"tertiary",size:"small","aria-label":action.ariaLabel??action.title,onClick:handleClick,children:action.title})},action.title)}})};const valuesForKind=getValuesForKind(kind);return jsxs(View,{style:[styles.containerOuter,layout==="floating"&&styles.floatingBorder,{borderInlineStartColor:valuesForKind.color}],role:valuesForKind.role,"aria-label":ariaLabel,"aria-live":valuesForKind.ariaLive,testId:testId,children:[jsx(View,{style:[styles.backgroundColor,{backgroundColor:valuesForKind.color}]}),jsxs(View,{style:styles.containerInner,children:[jsx(PhosphorIcon,{icon:icon||valuesForKind.icon,size:"medium",style:styles.icon,"aria-label":kind,testId:"banner-kind-icon",role:"img"}),jsxs(View,{style:styles.labelAndButtonsContainer,children:[jsx(View,{style:styles.labelContainer,children:jsx(LabelSmall,{children:text})}),actions&&jsx(View,{style:styles.actionsContainer,children:renderActions()})]}),onDismiss?jsx(View,{style:styles.dismissContainer,children:jsx(IconButton,{icon:xIcon,kind:"tertiary",actionType:"neutral",onClick:onDismiss,style:styles.dismiss,"aria-label":dismissAriaLabel})}):null]})]})};const styles=StyleSheet.create({backgroundColor:{position:"absolute",top:0,bottom:0,left:0,right:0,opacity:.08},containerOuter:{borderInlineStartWidth:spacing.xxSmall_6,width:"100%",backgroundColor:semanticColor.surface.primary},containerInner:{flexDirection:"row",padding:spacing.xSmall_8},icon:{marginTop:spacing.xSmall_8,marginBottom:spacing.xSmall_8,marginInlineStart:spacing.xxxxSmall_2,marginInlineEnd:spacing.xSmall_8,alignSelf:"flex-start",color:semanticColor.icon.primary},labelAndButtonsContainer:{flex:1,flexDirection:"row",alignItems:"center",alignContent:"center",flexWrap:"wrap",justifyContent:"space-between"},labelContainer:{flexShrink:1,margin:spacing.xSmall_8,textAlign:"start",overflowWrap:"break-word"},actionsContainer:{flexDirection:"row",justifyContent:"flex-start",marginTop:spacing.xSmall_8,marginBottom:spacing.xSmall_8,height:18,alignItems:"center"},action:{marginLeft:spacing.xSmall_8,marginRight:spacing.xSmall_8,justifyContent:"center"},link:{fontSize:font.size.small},dismiss:{flexShrink:1},dismissContainer:{height:40,width:40,justifyContent:"center",alignItems:"center",marginLeft:spacing.xSmall_8,marginRight:spacing.xSmall_8},floatingBorder:{borderRadius:border.radius.radius_040,overflow:"hidden"}});
 
 export { Banner as default };

package/dist/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
 var aphrodite = require('aphrodite');
 var xIcon = require('@phosphor-icons/core/regular/x.svg');
 var Button = require('@khanacademy/wonder-blocks-button');
@@ -17,25 +18,6 @@ var criticalIcon = require('@phosphor-icons/core/regular/warning-circle.svg');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
@@ -45,191 +27,6 @@ var successIcon__default = /*#__PURE__*/_interopDefaultLegacy(successIcon);
 var warningIcon__default = /*#__PURE__*/_interopDefaultLegacy(warningIcon);
 var criticalIcon__default = /*#__PURE__*/_interopDefaultLegacy(criticalIcon);
 
-const getValuesForKind = kind => {
-  switch (kind) {
-    case "success":
-      return {
-        color: wonderBlocksTokens.semanticColor.status.success.foreground,
-        icon: successIcon__default["default"],
-        role: "status"
-      };
-    case "warning":
-      return {
-        color: wonderBlocksTokens.semanticColor.status.warning.foreground,
-        icon: warningIcon__default["default"],
-        role: "alert",
-        ariaLive: "polite"
-      };
-    case "critical":
-      return {
-        color: wonderBlocksTokens.semanticColor.status.critical.foreground,
-        icon: criticalIcon__default["default"],
-        role: "alert"
-      };
-    default:
-      return {
-        color: wonderBlocksTokens.semanticColor.status.notice.foreground,
-        icon: infoIcon__default["default"],
-        role: "status"
-      };
-  }
-};
-const Banner = props => {
-  const {
-    actions,
-    "aria-label": ariaLabel,
-    dismissAriaLabel = "Dismiss banner.",
-    onDismiss,
-    kind = "info",
-    layout,
-    text,
-    testId,
-    icon
-  } = props;
-  const renderActions = () => {
-    return actions == null ? void 0 : actions.filter(Boolean).map((action, i) => {
-      if (action.type === "custom") {
-        return React__namespace.createElement(wonderBlocksCore.View, {
-          style: styles.action,
-          key: `custom-action-${i}`
-        }, action.node);
-      }
-      const handleClick = action.onClick;
-      if (action.type === "link") {
-        var _action$ariaLabel;
-        return React__namespace.createElement(wonderBlocksCore.View, {
-          style: styles.action,
-          key: action.title
-        }, React__namespace.createElement(Link__default["default"], {
-          href: action.href,
-          onClick: handleClick,
-          "aria-label": (_action$ariaLabel = action.ariaLabel) != null ? _action$ariaLabel : action.title,
-          style: styles.link
-        }, action.title));
-      } else {
-        var _action$ariaLabel2;
-        return React__namespace.createElement(wonderBlocksCore.View, {
-          style: styles.action,
-          key: action.title
-        }, React__namespace.createElement(Button__default["default"], {
-          kind: "tertiary",
-          size: "small",
-          "aria-label": (_action$ariaLabel2 = action.ariaLabel) != null ? _action$ariaLabel2 : action.title,
-          onClick: handleClick
-        }, action.title));
-      }
-    });
-  };
-  const valuesForKind = getValuesForKind(kind);
-  return React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles.containerOuter, layout === "floating" && styles.floatingBorder, {
-      borderInlineStartColor: valuesForKind.color
-    }],
-    role: valuesForKind.role,
-    "aria-label": ariaLabel,
-    "aria-live": valuesForKind.ariaLive,
-    testId: testId
-  }, React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles.backgroundColor, {
-      backgroundColor: valuesForKind.color
-    }]
-  }), React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles.containerInner
-  }, React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-    icon: icon || valuesForKind.icon,
-    size: "medium",
-    style: styles.icon,
-    "aria-label": kind,
-    testId: "banner-kind-icon",
-    role: "img"
-  }), React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles.labelAndButtonsContainer
-  }, React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles.labelContainer
-  }, React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, text)), actions && React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles.actionsContainer
-  }, renderActions())), onDismiss ? React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles.dismissContainer
-  }, React__namespace.createElement(IconButton__default["default"], {
-    icon: xIcon__default["default"],
-    kind: "tertiary",
-    actionType: "neutral",
-    onClick: onDismiss,
-    style: styles.dismiss,
-    "aria-label": dismissAriaLabel
-  })) : null));
-};
-const styles = aphrodite.StyleSheet.create({
-  backgroundColor: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    opacity: 0.08
-  },
-  containerOuter: {
-    borderInlineStartWidth: wonderBlocksTokens.spacing.xxSmall_6,
-    width: "100%",
-    backgroundColor: wonderBlocksTokens.semanticColor.surface.primary
-  },
-  containerInner: {
-    flexDirection: "row",
-    padding: wonderBlocksTokens.spacing.xSmall_8
-  },
-  icon: {
-    marginTop: wonderBlocksTokens.spacing.xSmall_8,
-    marginBottom: wonderBlocksTokens.spacing.xSmall_8,
-    marginInlineStart: wonderBlocksTokens.spacing.xxxxSmall_2,
-    marginInlineEnd: wonderBlocksTokens.spacing.xSmall_8,
-    alignSelf: "flex-start",
-    color: wonderBlocksTokens.semanticColor.icon.primary
-  },
-  labelAndButtonsContainer: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    alignContent: "center",
-    flexWrap: "wrap",
-    justifyContent: "space-between"
-  },
-  labelContainer: {
-    flexShrink: 1,
-    margin: wonderBlocksTokens.spacing.xSmall_8,
-    textAlign: "start",
-    overflowWrap: "break-word"
-  },
-  actionsContainer: {
-    flexDirection: "row",
-    justifyContent: "flex-start",
-    marginTop: wonderBlocksTokens.spacing.xSmall_8,
-    marginBottom: wonderBlocksTokens.spacing.xSmall_8,
-    height: 18,
-    alignItems: "center"
-  },
-  action: {
-    marginLeft: wonderBlocksTokens.spacing.xSmall_8,
-    marginRight: wonderBlocksTokens.spacing.xSmall_8,
-    justifyContent: "center"
-  },
-  link: {
-    fontSize: wonderBlocksTokens.font.size.small
-  },
-  dismiss: {
-    flexShrink: 1
-  },
-  dismissContainer: {
-    height: 40,
-    width: 40,
-    justifyContent: "center",
-    alignItems: "center",
-    marginLeft: wonderBlocksTokens.spacing.xSmall_8,
-    marginRight: wonderBlocksTokens.spacing.xSmall_8
-  },
-  floatingBorder: {
-    borderRadius: wonderBlocksTokens.border.radius.radius_040,
-    overflow: "hidden"
-  }
-});
+const getValuesForKind=kind=>{switch(kind){case"success":return {color:wonderBlocksTokens.semanticColor.status.success.foreground,icon:successIcon__default["default"],role:"status"};case"warning":return {color:wonderBlocksTokens.semanticColor.status.warning.foreground,icon:warningIcon__default["default"],role:"alert",ariaLive:"polite"};case"critical":return {color:wonderBlocksTokens.semanticColor.status.critical.foreground,icon:criticalIcon__default["default"],role:"alert"};default:return {color:wonderBlocksTokens.semanticColor.status.notice.foreground,icon:infoIcon__default["default"],role:"status"}}};const Banner=props=>{const{actions,"aria-label":ariaLabel,dismissAriaLabel="Dismiss banner.",onDismiss,kind="info",layout,text,testId,icon}=props;const renderActions=()=>{return actions?.filter(Boolean).map((action,i)=>{if(action.type==="custom"){return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.action,children:action.node},`custom-action-${i}`)}const handleClick=action.onClick;if(action.type==="link"){return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.action,children:jsxRuntime.jsx(Link__default["default"],{href:action.href,onClick:handleClick,"aria-label":action.ariaLabel??action.title,style:styles.link,children:action.title})},action.title)}else {return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.action,children:jsxRuntime.jsx(Button__default["default"],{kind:"tertiary",size:"small","aria-label":action.ariaLabel??action.title,onClick:handleClick,children:action.title})},action.title)}})};const valuesForKind=getValuesForKind(kind);return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles.containerOuter,layout==="floating"&&styles.floatingBorder,{borderInlineStartColor:valuesForKind.color}],role:valuesForKind.role,"aria-label":ariaLabel,"aria-live":valuesForKind.ariaLive,testId:testId,children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.backgroundColor,{backgroundColor:valuesForKind.color}]}),jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles.containerInner,children:[jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:icon||valuesForKind.icon,size:"medium",style:styles.icon,"aria-label":kind,testId:"banner-kind-icon",role:"img"}),jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles.labelAndButtonsContainer,children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.labelContainer,children:jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{children:text})}),actions&&jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.actionsContainer,children:renderActions()})]}),onDismiss?jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.dismissContainer,children:jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],kind:"tertiary",actionType:"neutral",onClick:onDismiss,style:styles.dismiss,"aria-label":dismissAriaLabel})}):null]})]})};const styles=aphrodite.StyleSheet.create({backgroundColor:{position:"absolute",top:0,bottom:0,left:0,right:0,opacity:.08},containerOuter:{borderInlineStartWidth:wonderBlocksTokens.spacing.xxSmall_6,width:"100%",backgroundColor:wonderBlocksTokens.semanticColor.surface.primary},containerInner:{flexDirection:"row",padding:wonderBlocksTokens.spacing.xSmall_8},icon:{marginTop:wonderBlocksTokens.spacing.xSmall_8,marginBottom:wonderBlocksTokens.spacing.xSmall_8,marginInlineStart:wonderBlocksTokens.spacing.xxxxSmall_2,marginInlineEnd:wonderBlocksTokens.spacing.xSmall_8,alignSelf:"flex-start",color:wonderBlocksTokens.semanticColor.icon.primary},labelAndButtonsContainer:{flex:1,flexDirection:"row",alignItems:"center",alignContent:"center",flexWrap:"wrap",justifyContent:"space-between"},labelContainer:{flexShrink:1,margin:wonderBlocksTokens.spacing.xSmall_8,textAlign:"start",overflowWrap:"break-word"},actionsContainer:{flexDirection:"row",justifyContent:"flex-start",marginTop:wonderBlocksTokens.spacing.xSmall_8,marginBottom:wonderBlocksTokens.spacing.xSmall_8,height:18,alignItems:"center"},action:{marginLeft:wonderBlocksTokens.spacing.xSmall_8,marginRight:wonderBlocksTokens.spacing.xSmall_8,justifyContent:"center"},link:{fontSize:wonderBlocksTokens.font.size.small},dismiss:{flexShrink:1},dismissContainer:{height:40,width:40,justifyContent:"center",alignItems:"center",marginLeft:wonderBlocksTokens.spacing.xSmall_8,marginRight:wonderBlocksTokens.spacing.xSmall_8},floatingBorder:{borderRadius:wonderBlocksTokens.border.radius.radius_040,overflow:"hidden"}});
 
 module.exports = Banner;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-banner",
-  "version": "4.1.12",
+  "version": "4.1.13",
   "design": "v1",
   "description": "Banner components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -12,14 +12,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-button": "9.0.0",
+    "@khanacademy/wonder-blocks-button": "9.0.1",
     "@khanacademy/wonder-blocks-core": "12.2.1",
     "@khanacademy/wonder-blocks-icon": "5.1.3",
-    "@khanacademy/wonder-blocks-icon-button": "9.0.4",
-    "@khanacademy/wonder-blocks-link": "9.0.3",
-    "@khanacademy/wonder-blocks-tokens": "9.0.0",
-    "@khanacademy/wonder-blocks-typography": "3.1.3"
+    "@khanacademy/wonder-blocks-icon-button": "9.0.5",
+    "@khanacademy/wonder-blocks-link": "9.0.4",
+    "@khanacademy/wonder-blocks-tokens": "10.0.0",
+    "@khanacademy/wonder-blocks-typography": "3.2.0"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
@@ -27,7 +26,7 @@
     "react": "18.2.0"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "2.1.1"
+    "@khanacademy/wb-dev-build-settings": "3.0.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"