@khanacademy/wonder-blocks-banner 4.2.15 → 4.3.0

package/.turbo/turbo-build$colon$css.log

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-banner@4.2.15 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-banner
+> @khanacademy/wonder-blocks-banner@4.3.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-banner
 > pnpm exec wonder-blocks-tokens .
 
 CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-banner/dist/css

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @khanacademy/wonder-blocks-banner
 
+## 4.3.0
+
+### Minor Changes
+
+- 0e48cb5: Banner: Adds support for hiding the icon by setting the `icon` prop to `none`
+
+### Patch Changes
+
+- 0e1bb54: Banner: Update jsdocs for `text` prop to encourage using the default typography styles provided by the component
+
+## 4.2.16
+
+### Patch Changes
+
+- Updated dependencies [4aad557]
+- Updated dependencies [4aad557]
+- Updated dependencies [4aad557]
+    - @khanacademy/wonder-blocks-link@9.2.0
+    - @khanacademy/wonder-blocks-tokens@12.1.0
+    - @khanacademy/wonder-blocks-button@11.0.2
+    - @khanacademy/wonder-blocks-icon@5.2.16
+    - @khanacademy/wonder-blocks-icon-button@10.3.17
+    - @khanacademy/wonder-blocks-typography@4.2.18
+
 ## 4.2.15
 
 ### Patch Changes

package/dist/components/banner.d.ts

@@ -66,7 +66,9 @@ type Props = {
      */
     layout: BannerLayout;
     /**
-     * Text on the banner (LabelSmall) or a node if you want something different.
+     * Text on the banner or a node if you want something different. For the
+     * best results, use the default styles provided by the Banner component and
+     * avoid using typography components for the `text` prop.
      */
     text: string | React.ReactNode;
     /**
@@ -96,8 +98,13 @@ type Props = {
      * It supports the following types:
      * - `PhosphorIconAsset`: a reference to a Phosphor SVG asset.
      * - `string`: an import referencing an arbitrary SVG file.
+     * - `"none"`: no icon is displayed.
+     *
+     * Note: When using `icon="none"`, make sure important information is
+     * conveyed in the text of the banner, since color should not be the only
+     * way to convey status information.
      */
-    icon?: PhosphorIconAsset | string;
+    icon?: PhosphorIconAsset | string | "none";
     /**
      * Custom styles for the elements in the Banner component.
      * - `root`: Styles the root element

package/dist/es/index.js

@@ -17,6 +17,6 @@ const theme$1={root:{border:{radius:border.radius.radius_040,width:{inlineStart:
 
 var theme = mapValuesToCssVars(theme$1,"--wb-c-banner-");
 
-const getValuesForKind=kind=>{switch(kind){case"success":return {icon:successIcon,role:"status"};case"warning":return {icon:warningIcon,role:"alert",ariaLive:"polite"};case"critical":return {icon:criticalIcon,role:"alert"};default:return {icon:infoIcon,role:"status"}}};const getBannerKindStyle=kind=>{switch(kind){case"success":return styles.successBanner;case"info":return styles.infoBanner;case"warning":return styles.warningBanner;case"critical":return styles.criticalBanner}};const getBannerIconKindStyle=kind=>{switch(kind){case"success":return styles.successIcon;case"info":return styles.infoIcon;case"warning":return styles.warningIcon;case"critical":return styles.criticalIcon}};const StyledDiv=addStyle("div");const Banner=props=>{const{actions,"aria-label":ariaLabel,dismissAriaLabel="Dismiss banner.",onDismiss,kind="info",text,testId,icon,styles:stylesProp}=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,style:styles.button,children:action.title})},action.title)}})};const valuesForKind=getValuesForKind(kind);const bannerKindStyle=getBannerKindStyle(kind);const bannerIconKindStyle=getBannerIconKindStyle(kind);return jsx(View,{style:[styles.containerOuter,bannerKindStyle,stylesProp?.root],role:valuesForKind.role,"aria-label":ariaLabel,"aria-live":valuesForKind.ariaLive,testId:testId,children:jsxs(View,{style:styles.containerInner,children:[jsx(PhosphorIcon,{icon:icon||valuesForKind.icon,style:[styles.icon,bannerIconKindStyle],"aria-label":kind,testId:"banner-kind-icon",role:"img"}),jsxs(View,{style:styles.labelAndButtonsContainer,children:[jsx(View,{style:styles.labelContainer,children:jsx(StyledDiv,{style:styles.labelTypography,children:text})}),actions&&jsx(View,{style:styles.actionsContainer,children:renderActions()})]}),onDismiss?jsx(View,{children:jsx(IconButton,{icon:xIcon,kind:"tertiary",actionType:"neutral",onClick:onDismiss,style:styles.dismiss,"aria-label":dismissAriaLabel,size:"xsmall"})}):null]})})};const styles=StyleSheet.create({containerOuter:{borderInlineStartWidth:theme.root.border.width.inlineStart,borderInlineEndWidth:theme.root.border.width.inlineEnd,borderBlockStartWidth:theme.root.border.width.blockStart,borderBlockEndWidth:theme.root.border.width.blockEnd,width:"100%",borderRadius:theme.root.border.radius,overflow:"hidden",padding:sizing.size_160,paddingInlineStart:theme.root.layout.paddingInlineStart},containerInner:{flexDirection:"row",gap:theme.root.layout.gap},icon:{alignSelf:"flex-start",width:theme.icon.sizing.width,height:theme.icon.sizing.height},labelAndButtonsContainer:{flex:1,flexDirection:"row",alignItems:"center",alignContent:"center",flexWrap:"wrap",justifyContent:"space-between",gap:theme.root.layout.gap},labelContainer:{flexShrink:1,textAlign:"start",overflowWrap:"break-word"},labelTypography:{fontSize:theme.label.font.size,fontWeight:font.weight.semi,lineHeight:font.body.lineHeight.small,fontFamily:font.family.sans},actionsContainer:{flexDirection:"row",justifyContent:"flex-start",height:sizing.size_180,alignItems:"center",gap:theme.root.layout.gap},action:{justifyContent:"center"},link:{fontFamily:font.family.sans,fontSize:font.body.size.small,fontWeight:font.weight.semi,lineHeight:font.body.lineHeight.small,textDecoration:theme.link.font.decoration,textUnderlineOffset:theme.link.font.underlineOffset},button:{marginInline:theme.button.layout.marginInline},dismiss:{flexShrink:1,marginBlock:theme.dismiss.layout.marginBlock},successBanner:{backgroundColor:semanticColor.feedback.success.subtle.background,borderColor:theme.root.color.border.success,color:semanticColor.feedback.success.subtle.text},infoBanner:{backgroundColor:semanticColor.feedback.info.subtle.background,borderColor:theme.root.color.border.info,color:semanticColor.feedback.info.subtle.text},warningBanner:{backgroundColor:semanticColor.feedback.warning.subtle.background,borderColor:theme.root.color.border.warning,color:semanticColor.feedback.warning.subtle.text},criticalBanner:{backgroundColor:semanticColor.feedback.critical.subtle.background,borderColor:theme.root.color.border.critical,color:semanticColor.feedback.critical.subtle.text},successIcon:{color:theme.icon.color.success},infoIcon:{color:theme.icon.color.info},warningIcon:{color:theme.icon.color.warning},criticalIcon:{color:theme.icon.color.critical}});
+const getValuesForKind=kind=>{switch(kind){case"success":return {icon:successIcon,role:"status"};case"warning":return {icon:warningIcon,role:"alert",ariaLive:"polite"};case"critical":return {icon:criticalIcon,role:"alert"};default:return {icon:infoIcon,role:"status"}}};const getBannerKindStyle=kind=>{switch(kind){case"success":return styles.successBanner;case"info":return styles.infoBanner;case"warning":return styles.warningBanner;case"critical":return styles.criticalBanner}};const getBannerIconKindStyle=kind=>{switch(kind){case"success":return styles.successIcon;case"info":return styles.infoIcon;case"warning":return styles.warningIcon;case"critical":return styles.criticalIcon}};const StyledDiv=addStyle("div");const Banner=props=>{const{actions,"aria-label":ariaLabel,dismissAriaLabel="Dismiss banner.",onDismiss,kind="info",text,testId,icon,styles:stylesProp}=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,style:styles.button,children:action.title})},action.title)}})};const valuesForKind=getValuesForKind(kind);const bannerKindStyle=getBannerKindStyle(kind);const bannerIconKindStyle=getBannerIconKindStyle(kind);return jsx(View,{style:[styles.containerOuter,bannerKindStyle,stylesProp?.root],role:valuesForKind.role,"aria-label":ariaLabel,"aria-live":valuesForKind.ariaLive,testId:testId,children:jsxs(View,{style:styles.containerInner,children:[icon!=="none"&&jsx(PhosphorIcon,{icon:icon||valuesForKind.icon,style:[styles.icon,bannerIconKindStyle],"aria-label":kind,testId:"banner-kind-icon",role:"img"}),jsxs(View,{style:styles.labelAndButtonsContainer,children:[jsx(View,{style:styles.labelContainer,children:jsx(StyledDiv,{style:styles.labelTypography,children:text})}),actions&&jsx(View,{style:styles.actionsContainer,children:renderActions()})]}),onDismiss?jsx(View,{children:jsx(IconButton,{icon:xIcon,kind:"tertiary",actionType:"neutral",onClick:onDismiss,style:styles.dismiss,"aria-label":dismissAriaLabel,size:"xsmall"})}):null]})})};const styles=StyleSheet.create({containerOuter:{borderInlineStartWidth:theme.root.border.width.inlineStart,borderInlineEndWidth:theme.root.border.width.inlineEnd,borderBlockStartWidth:theme.root.border.width.blockStart,borderBlockEndWidth:theme.root.border.width.blockEnd,width:"100%",borderRadius:theme.root.border.radius,overflow:"hidden",padding:sizing.size_160,paddingInlineStart:theme.root.layout.paddingInlineStart},containerInner:{flexDirection:"row",gap:theme.root.layout.gap},icon:{alignSelf:"flex-start",width:theme.icon.sizing.width,height:theme.icon.sizing.height},labelAndButtonsContainer:{flex:1,flexDirection:"row",alignItems:"center",alignContent:"center",flexWrap:"wrap",justifyContent:"space-between",gap:theme.root.layout.gap},labelContainer:{flexShrink:1,textAlign:"start",overflowWrap:"break-word"},labelTypography:{fontSize:theme.label.font.size,fontWeight:font.weight.semi,lineHeight:font.body.lineHeight.small,fontFamily:font.family.sans},actionsContainer:{flexDirection:"row",justifyContent:"flex-start",height:sizing.size_180,alignItems:"center",gap:theme.root.layout.gap},action:{justifyContent:"center"},link:{fontFamily:font.family.sans,fontSize:font.body.size.small,fontWeight:font.weight.semi,lineHeight:font.body.lineHeight.small,textDecoration:theme.link.font.decoration,textUnderlineOffset:theme.link.font.underlineOffset},button:{marginInline:theme.button.layout.marginInline},dismiss:{flexShrink:1,marginBlock:theme.dismiss.layout.marginBlock},successBanner:{backgroundColor:semanticColor.feedback.success.subtle.background,borderColor:theme.root.color.border.success,color:semanticColor.feedback.success.subtle.text},infoBanner:{backgroundColor:semanticColor.feedback.info.subtle.background,borderColor:theme.root.color.border.info,color:semanticColor.feedback.info.subtle.text},warningBanner:{backgroundColor:semanticColor.feedback.warning.subtle.background,borderColor:theme.root.color.border.warning,color:semanticColor.feedback.warning.subtle.text},criticalBanner:{backgroundColor:semanticColor.feedback.critical.subtle.background,borderColor:theme.root.color.border.critical,color:semanticColor.feedback.critical.subtle.text},successIcon:{color:theme.icon.color.success},infoIcon:{color:theme.icon.color.info},warningIcon:{color:theme.icon.color.warning},criticalIcon:{color:theme.icon.color.critical}});
 
 export { Banner as default };

package/dist/index.js

@@ -30,6 +30,6 @@ const theme$1={root:{border:{radius:wonderBlocksTokens.border.radius.radius_040,
 
 var theme = wonderBlocksTokens.mapValuesToCssVars(theme$1,"--wb-c-banner-");
 
-const getValuesForKind=kind=>{switch(kind){case"success":return {icon:successIcon__default["default"],role:"status"};case"warning":return {icon:warningIcon__default["default"],role:"alert",ariaLive:"polite"};case"critical":return {icon:criticalIcon__default["default"],role:"alert"};default:return {icon:infoIcon__default["default"],role:"status"}}};const getBannerKindStyle=kind=>{switch(kind){case"success":return styles.successBanner;case"info":return styles.infoBanner;case"warning":return styles.warningBanner;case"critical":return styles.criticalBanner}};const getBannerIconKindStyle=kind=>{switch(kind){case"success":return styles.successIcon;case"info":return styles.infoIcon;case"warning":return styles.warningIcon;case"critical":return styles.criticalIcon}};const StyledDiv=wonderBlocksCore.addStyle("div");const Banner=props=>{const{actions,"aria-label":ariaLabel,dismissAriaLabel="Dismiss banner.",onDismiss,kind="info",text,testId,icon,styles:stylesProp}=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,style:styles.button,children:action.title})},action.title)}})};const valuesForKind=getValuesForKind(kind);const bannerKindStyle=getBannerKindStyle(kind);const bannerIconKindStyle=getBannerIconKindStyle(kind);return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.containerOuter,bannerKindStyle,stylesProp?.root],role:valuesForKind.role,"aria-label":ariaLabel,"aria-live":valuesForKind.ariaLive,testId:testId,children:jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles.containerInner,children:[jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:icon||valuesForKind.icon,style:[styles.icon,bannerIconKindStyle],"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(StyledDiv,{style:styles.labelTypography,children:text})}),actions&&jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.actionsContainer,children:renderActions()})]}),onDismiss?jsxRuntime.jsx(wonderBlocksCore.View,{children:jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],kind:"tertiary",actionType:"neutral",onClick:onDismiss,style:styles.dismiss,"aria-label":dismissAriaLabel,size:"xsmall"})}):null]})})};const styles=aphrodite.StyleSheet.create({containerOuter:{borderInlineStartWidth:theme.root.border.width.inlineStart,borderInlineEndWidth:theme.root.border.width.inlineEnd,borderBlockStartWidth:theme.root.border.width.blockStart,borderBlockEndWidth:theme.root.border.width.blockEnd,width:"100%",borderRadius:theme.root.border.radius,overflow:"hidden",padding:wonderBlocksTokens.sizing.size_160,paddingInlineStart:theme.root.layout.paddingInlineStart},containerInner:{flexDirection:"row",gap:theme.root.layout.gap},icon:{alignSelf:"flex-start",width:theme.icon.sizing.width,height:theme.icon.sizing.height},labelAndButtonsContainer:{flex:1,flexDirection:"row",alignItems:"center",alignContent:"center",flexWrap:"wrap",justifyContent:"space-between",gap:theme.root.layout.gap},labelContainer:{flexShrink:1,textAlign:"start",overflowWrap:"break-word"},labelTypography:{fontSize:theme.label.font.size,fontWeight:wonderBlocksTokens.font.weight.semi,lineHeight:wonderBlocksTokens.font.body.lineHeight.small,fontFamily:wonderBlocksTokens.font.family.sans},actionsContainer:{flexDirection:"row",justifyContent:"flex-start",height:wonderBlocksTokens.sizing.size_180,alignItems:"center",gap:theme.root.layout.gap},action:{justifyContent:"center"},link:{fontFamily:wonderBlocksTokens.font.family.sans,fontSize:wonderBlocksTokens.font.body.size.small,fontWeight:wonderBlocksTokens.font.weight.semi,lineHeight:wonderBlocksTokens.font.body.lineHeight.small,textDecoration:theme.link.font.decoration,textUnderlineOffset:theme.link.font.underlineOffset},button:{marginInline:theme.button.layout.marginInline},dismiss:{flexShrink:1,marginBlock:theme.dismiss.layout.marginBlock},successBanner:{backgroundColor:wonderBlocksTokens.semanticColor.feedback.success.subtle.background,borderColor:theme.root.color.border.success,color:wonderBlocksTokens.semanticColor.feedback.success.subtle.text},infoBanner:{backgroundColor:wonderBlocksTokens.semanticColor.feedback.info.subtle.background,borderColor:theme.root.color.border.info,color:wonderBlocksTokens.semanticColor.feedback.info.subtle.text},warningBanner:{backgroundColor:wonderBlocksTokens.semanticColor.feedback.warning.subtle.background,borderColor:theme.root.color.border.warning,color:wonderBlocksTokens.semanticColor.feedback.warning.subtle.text},criticalBanner:{backgroundColor:wonderBlocksTokens.semanticColor.feedback.critical.subtle.background,borderColor:theme.root.color.border.critical,color:wonderBlocksTokens.semanticColor.feedback.critical.subtle.text},successIcon:{color:theme.icon.color.success},infoIcon:{color:theme.icon.color.info},warningIcon:{color:theme.icon.color.warning},criticalIcon:{color:theme.icon.color.critical}});
+const getValuesForKind=kind=>{switch(kind){case"success":return {icon:successIcon__default["default"],role:"status"};case"warning":return {icon:warningIcon__default["default"],role:"alert",ariaLive:"polite"};case"critical":return {icon:criticalIcon__default["default"],role:"alert"};default:return {icon:infoIcon__default["default"],role:"status"}}};const getBannerKindStyle=kind=>{switch(kind){case"success":return styles.successBanner;case"info":return styles.infoBanner;case"warning":return styles.warningBanner;case"critical":return styles.criticalBanner}};const getBannerIconKindStyle=kind=>{switch(kind){case"success":return styles.successIcon;case"info":return styles.infoIcon;case"warning":return styles.warningIcon;case"critical":return styles.criticalIcon}};const StyledDiv=wonderBlocksCore.addStyle("div");const Banner=props=>{const{actions,"aria-label":ariaLabel,dismissAriaLabel="Dismiss banner.",onDismiss,kind="info",text,testId,icon,styles:stylesProp}=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,style:styles.button,children:action.title})},action.title)}})};const valuesForKind=getValuesForKind(kind);const bannerKindStyle=getBannerKindStyle(kind);const bannerIconKindStyle=getBannerIconKindStyle(kind);return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.containerOuter,bannerKindStyle,stylesProp?.root],role:valuesForKind.role,"aria-label":ariaLabel,"aria-live":valuesForKind.ariaLive,testId:testId,children:jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles.containerInner,children:[icon!=="none"&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:icon||valuesForKind.icon,style:[styles.icon,bannerIconKindStyle],"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(StyledDiv,{style:styles.labelTypography,children:text})}),actions&&jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.actionsContainer,children:renderActions()})]}),onDismiss?jsxRuntime.jsx(wonderBlocksCore.View,{children:jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],kind:"tertiary",actionType:"neutral",onClick:onDismiss,style:styles.dismiss,"aria-label":dismissAriaLabel,size:"xsmall"})}):null]})})};const styles=aphrodite.StyleSheet.create({containerOuter:{borderInlineStartWidth:theme.root.border.width.inlineStart,borderInlineEndWidth:theme.root.border.width.inlineEnd,borderBlockStartWidth:theme.root.border.width.blockStart,borderBlockEndWidth:theme.root.border.width.blockEnd,width:"100%",borderRadius:theme.root.border.radius,overflow:"hidden",padding:wonderBlocksTokens.sizing.size_160,paddingInlineStart:theme.root.layout.paddingInlineStart},containerInner:{flexDirection:"row",gap:theme.root.layout.gap},icon:{alignSelf:"flex-start",width:theme.icon.sizing.width,height:theme.icon.sizing.height},labelAndButtonsContainer:{flex:1,flexDirection:"row",alignItems:"center",alignContent:"center",flexWrap:"wrap",justifyContent:"space-between",gap:theme.root.layout.gap},labelContainer:{flexShrink:1,textAlign:"start",overflowWrap:"break-word"},labelTypography:{fontSize:theme.label.font.size,fontWeight:wonderBlocksTokens.font.weight.semi,lineHeight:wonderBlocksTokens.font.body.lineHeight.small,fontFamily:wonderBlocksTokens.font.family.sans},actionsContainer:{flexDirection:"row",justifyContent:"flex-start",height:wonderBlocksTokens.sizing.size_180,alignItems:"center",gap:theme.root.layout.gap},action:{justifyContent:"center"},link:{fontFamily:wonderBlocksTokens.font.family.sans,fontSize:wonderBlocksTokens.font.body.size.small,fontWeight:wonderBlocksTokens.font.weight.semi,lineHeight:wonderBlocksTokens.font.body.lineHeight.small,textDecoration:theme.link.font.decoration,textUnderlineOffset:theme.link.font.underlineOffset},button:{marginInline:theme.button.layout.marginInline},dismiss:{flexShrink:1,marginBlock:theme.dismiss.layout.marginBlock},successBanner:{backgroundColor:wonderBlocksTokens.semanticColor.feedback.success.subtle.background,borderColor:theme.root.color.border.success,color:wonderBlocksTokens.semanticColor.feedback.success.subtle.text},infoBanner:{backgroundColor:wonderBlocksTokens.semanticColor.feedback.info.subtle.background,borderColor:theme.root.color.border.info,color:wonderBlocksTokens.semanticColor.feedback.info.subtle.text},warningBanner:{backgroundColor:wonderBlocksTokens.semanticColor.feedback.warning.subtle.background,borderColor:theme.root.color.border.warning,color:wonderBlocksTokens.semanticColor.feedback.warning.subtle.text},criticalBanner:{backgroundColor:wonderBlocksTokens.semanticColor.feedback.critical.subtle.background,borderColor:theme.root.color.border.critical,color:wonderBlocksTokens.semanticColor.feedback.critical.subtle.text},successIcon:{color:theme.icon.color.success},infoIcon:{color:theme.icon.color.info},warningIcon:{color:theme.icon.color.warning},criticalIcon:{color:theme.icon.color.critical}});
 
 module.exports = Banner;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-banner",
-  "version": "4.2.15",
+  "version": "4.3.0",
   "design": "v1",
   "description": "Banner components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -20,13 +20,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-button": "11.0.1",
+    "@khanacademy/wonder-blocks-button": "11.0.2",
     "@khanacademy/wonder-blocks-core": "12.4.0",
-    "@khanacademy/wonder-blocks-icon": "5.2.15",
-    "@khanacademy/wonder-blocks-icon-button": "10.3.16",
-    "@khanacademy/wonder-blocks-link": "9.1.21",
-    "@khanacademy/wonder-blocks-tokens": "12.0.2",
-    "@khanacademy/wonder-blocks-typography": "4.2.17"
+    "@khanacademy/wonder-blocks-icon": "5.2.16",
+    "@khanacademy/wonder-blocks-icon-button": "10.3.17",
+    "@khanacademy/wonder-blocks-link": "9.2.0",
+    "@khanacademy/wonder-blocks-tokens": "12.1.0",
+    "@khanacademy/wonder-blocks-typography": "4.2.18"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",