@khanacademy/wonder-blocks-labeled-field 3.0.13 → 3.0.15

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @khanacademy/wonder-blocks-labeled-field
 
+## 3.0.15
+
+### Patch Changes
+
+- Updated dependencies [7811eb1]
+    - @khanacademy/wonder-blocks-tokens@10.6.0
+    - @khanacademy/wonder-blocks-layout@3.1.18
+    - @khanacademy/wonder-blocks-typography@4.2.2
+
+## 3.0.14
+
+### Patch Changes
+
+- Updated dependencies [8468d8d]
+    - @khanacademy/wonder-blocks-tokens@10.5.0
+    - @khanacademy/wonder-blocks-layout@3.1.17
+    - @khanacademy/wonder-blocks-typography@4.2.1
+
 ## 3.0.13
 
 ### Patch Changes

package/dist/es/index.js

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
 import WarningCircle from '@phosphor-icons/core/bold/warning-circle-bold.svg';
 import { addStyle, View } from '@khanacademy/wonder-blocks-core';
-import { semanticColor, sizing } from '@khanacademy/wonder-blocks-tokens';
+import { sizing, semanticColor } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography';
 
-const viewportPixelsForSize=size=>({small:16,medium:24,large:48,xlarge:96})[size];const StyledSpan$1=addStyle("span");const PhosphorIcon=React.forwardRef(function PhosphorIcon(props,ref){const{color="currentColor",icon,size="small",style,testId,className,role,...sharedProps}=props;const pixelSize=viewportPixelsForSize(size);const classNames=`${className??""}`;const iconStyles=_generateStyles(color,pixelSize);return jsx(StyledSpan$1,{...sharedProps,className:classNames,style:[styles$1.svg,iconStyles.icon,{maskImage:`url(${icon})`},style],"data-testid":testId,ref:ref,role:role??sharedProps["aria-label"]?"img":undefined})});const dynamicStyles={};const _generateStyles=(color,size)=>{const iconStyle=`${color}-${size}`;if(styles$1[iconStyle]){return styles$1[iconStyle]}const newStyles={icon:{backgroundColor:color,width:size,height:size}};dynamicStyles[iconStyle]=StyleSheet.create(newStyles);return dynamicStyles[iconStyle]};const styles$1=StyleSheet.create({svg:{display:"inline-block",verticalAlign:"text-bottom",flexShrink:0,flexGrow:0,maskSize:"100%",maskRepeat:"no-repeat",maskPosition:"center"}});PhosphorIcon.displayName="PhosphorIcon";
+function getSize(size){switch(size){case"small":default:{return styles$1.small}case"medium":{return styles$1.medium}case"large":{return styles$1.large}case"xlarge":{return styles$1.xlarge}}}const StyledDiv=addStyle("div");React.forwardRef((props,ref)=>{const{size="small",id,testId,style,children,...otherProps}=props;const childrenElement=React.cloneElement(children,{style:{width:"100%",height:"100%"}});return jsx(StyledDiv,{style:[getSize(size),style],id:id,"data-testid":testId,ref:ref,...otherProps,children:childrenElement})});const styles$1=StyleSheet.create({small:{width:sizing.size_160,height:sizing.size_160},medium:{width:sizing.size_240,height:sizing.size_240},large:{width:sizing.size_480,height:sizing.size_480},xlarge:{width:sizing.size_960,height:sizing.size_960}});const viewportPixelsForSize=size=>({small:16,medium:24,large:48,xlarge:96})[size];const StyledSpan$1=addStyle("span");const PhosphorIcon=React.forwardRef(function PhosphorIcon(props,ref){const{color="currentColor",icon,size="small",style,testId,className,role,...sharedProps}=props;const pixelSize=viewportPixelsForSize(size);const classNames=`${className??""}`;const iconStyles=_generateStyles(color,pixelSize);return jsx(StyledSpan$1,{...sharedProps,className:classNames,style:[styles$2.svg,iconStyles.icon,{maskImage:`url(${icon})`},style],"data-testid":testId,ref:ref,role:role??sharedProps["aria-label"]?"img":undefined})});const dynamicStyles={};const _generateStyles=(color,size)=>{const iconStyle=`${color}-${size}`;if(styles$2[iconStyle]){return styles$2[iconStyle]}const newStyles={icon:{backgroundColor:color,width:size,height:size}};dynamicStyles[iconStyle]=StyleSheet.create(newStyles);return dynamicStyles[iconStyle]};const styles$2=StyleSheet.create({svg:{display:"inline-block",verticalAlign:"text-bottom",flexShrink:0,flexGrow:0,maskSize:"100%",maskRepeat:"no-repeat",maskPosition:"center"}});PhosphorIcon.displayName="PhosphorIcon";function useImageRoleAttributes(props){const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy}=props;const presentationOnlyAttributes={"aria-hidden":true};const iconMeaningAttributes={"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role:"img"};const attributes=ariaLabel||ariaLabelledBy?iconMeaningAttributes:presentationOnlyAttributes;return attributes}const StyledSvg$1=addStyle("svg");React.forwardRef((props,ref)=>{const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,id,testId,style,...otherProps}=props;const attributes=useImageRoleAttributes({"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy});return jsxs(StyledSvg$1,{id:id,"data-testid":testId,style:style,ref:ref,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...attributes,...otherProps,children:[jsx("path",{d:"M1.246 5.38105L2.36444 3.66654C2.63609 3.25012 3.0934 3 3.58311 3H12.4169C12.9066 3 13.3639 3.25012 13.6356 3.66654L14.754 5.38105C15.1278 5.95411 15.0708 6.71389 14.6158 7.22195L9.08044 13.4027C8.49982 14.051 7.50018 14.051 6.91956 13.4027L1.38423 7.22195C0.929229 6.71389 0.872177 5.95411 1.246 5.38105Z",fill:semanticColor.core.foreground.gems.default}),jsx("path",{d:"M9.45654 7.01492L8.34027 10.0102C8.07911 10.711 8.97464 11.2595 9.48018 10.7084L12.6345 7.26989C13.0351 6.83317 12.7253 6.12858 12.1327 6.12858H10.7327C10.164 6.12858 9.65515 6.48199 9.45654 7.01492Z",fill:semanticColor.core.foreground.gems.subtle})]})});const StyledSvg=addStyle("svg");React.forwardRef((props,ref)=>{const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,id,testId,style,...otherProps}=props;const attributes=useImageRoleAttributes({"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy});return jsxs(StyledSvg,{id:id,"data-testid":testId,style:style,ref:ref,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...attributes,...otherProps,children:[jsx("path",{d:"M9.14653 0.628361C9.07012 0.571421 8.97956 0.531782 8.88248 0.512785C8.78539 0.493787 8.68464 0.49599 8.5887 0.519205C8.49277 0.542421 8.40447 0.585969 8.33125 0.64618C8.25802 0.70639 8.20202 0.781496 8.16797 0.865168L5.47556 5.06034L4.59152 3.43463C4.52866 3.37998 4.45359 3.33789 4.37125 3.31114C4.28892 3.28438 4.2012 3.27357 4.11387 3.27941C4.02653 3.28525 3.94157 3.30761 3.86458 3.34502C3.78759 3.38243 3.72032 3.43403 3.66719 3.49644C1.98899 5.46729 1.13672 7.44994 1.13672 9.38884C1.13672 11.0096 1.85506 12.564 3.13372 13.7101C4.41238 14.8561 6.14661 15.5 7.9549 15.5C9.7632 15.5 11.4974 14.8561 12.7761 13.7101C14.0547 12.564 14.7731 11.0096 14.7731 9.38884C14.7731 5.26034 10.8379 1.88879 9.14653 0.628361Z",fill:semanticColor.core.foreground.streak.default}),jsx("path",{d:"M10.8067 10.5315C10.8067 12.0965 9.53809 13.3651 7.97318 13.3651C6.40826 13.3651 5.13965 12.0965 5.13965 10.5315C5.13965 8.96663 7.2648 6.28125 7.97318 6.28125C8.68156 6.28125 10.8067 8.96663 10.8067 10.5315Z",fill:semanticColor.core.foreground.streak.subtle})]})});
 
 const defaultLabeledFieldLabels={errorIconAriaLabel:"Error:"};const StyledSpan=addStyle("span");function LabeledField(props){const{field,styles:stylesProp,label,id,required,testId,description,errorMessage,labels=defaultLabeledFieldLabels}=props;const generatedUniqueId=React.useId();const uniqueId=id??`${generatedUniqueId}-labeled-field`;const labelId=`${uniqueId}-label`;const descriptionId=`${uniqueId}-description`;const fieldId=`${uniqueId}-field`;const errorId=`${uniqueId}-error`;const isRequired=!!required||!!field.props.required;const hasError=!!errorMessage||!!field.props.error;function renderLabel(){const requiredIcon=jsxs(StyledSpan,{style:[styles.textWordBreak,styles.required],"aria-hidden":true,children:[" ","*"]});return jsx(React.Fragment,{children:jsxs(LabelMedium,{style:[styles.textWordBreak,styles.label,description?styles.labelWithDescription:styles.labelWithNoDescription,stylesProp?.label],tag:"label",htmlFor:fieldId,testId:testId&&`${testId}-label`,id:labelId,children:[label,isRequired&&requiredIcon]})})}function maybeRenderDescription(){if(!description){return null}return jsx(React.Fragment,{children:jsx(LabelSmall,{style:[styles.textWordBreak,styles.description,stylesProp?.description],testId:testId&&`${testId}-description`,id:descriptionId,children:description})})}function maybeRenderError(){return jsx(React.Fragment,{children:jsx(View,{style:[styles.errorSection,errorMessage?styles.errorSectionWithContent:undefined,stylesProp?.error],id:errorId,testId:testId&&`${testId}-error`,"aria-live":"assertive","aria-atomic":"true",children:errorMessage&&jsxs(Fragment,{children:[jsx(PhosphorIcon,{icon:WarningCircle,style:[styles.errorIcon,styles.error],role:"img","aria-label":labels.errorIconAriaLabel}),jsx(LabelSmall,{style:[styles.textWordBreak,styles.errorMessage,styles.error],children:errorMessage})]})})})}function renderField(){return React.cloneElement(field,{id:fieldId,"aria-describedby":[errorMessage&&errorId,description&&descriptionId].filter(Boolean).join(" "),required:required||field.props.required,error:hasError,testId:testId?`${testId}-field`:undefined})}return jsxs(View,{style:stylesProp?.root,children:[renderLabel(),maybeRenderDescription(),renderField(),maybeRenderError()]})}const styles=StyleSheet.create({label:{color:semanticColor.text.primary},labelWithDescription:{paddingBlockEnd:sizing.size_040},labelWithNoDescription:{paddingBlockEnd:sizing.size_120},description:{color:semanticColor.text.secondary,paddingBlockEnd:sizing.size_120},errorSection:{flexDirection:"row",gap:sizing.size_080},errorSectionWithContent:{paddingBlockStart:sizing.size_120},error:{color:semanticColor.status.critical.foreground},errorIcon:{marginTop:"1px"},errorMessage:{minWidth:"0"},required:{color:semanticColor.status.critical.foreground},textWordBreak:{overflowWrap:"break-word"}});
 

package/dist/index.js

@@ -33,7 +33,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var WarningCircle__default = /*#__PURE__*/_interopDefaultLegacy(WarningCircle);
 
-const viewportPixelsForSize=size=>({small:16,medium:24,large:48,xlarge:96})[size];const StyledSpan$1=wonderBlocksCore.addStyle("span");const PhosphorIcon=React__namespace.forwardRef(function PhosphorIcon(props,ref){const{color="currentColor",icon,size="small",style,testId,className,role,...sharedProps}=props;const pixelSize=viewportPixelsForSize(size);const classNames=`${className??""}`;const iconStyles=_generateStyles(color,pixelSize);return jsxRuntime.jsx(StyledSpan$1,{...sharedProps,className:classNames,style:[styles$1.svg,iconStyles.icon,{maskImage:`url(${icon})`},style],"data-testid":testId,ref:ref,role:role??sharedProps["aria-label"]?"img":undefined})});const dynamicStyles={};const _generateStyles=(color,size)=>{const iconStyle=`${color}-${size}`;if(styles$1[iconStyle]){return styles$1[iconStyle]}const newStyles={icon:{backgroundColor:color,width:size,height:size}};dynamicStyles[iconStyle]=aphrodite.StyleSheet.create(newStyles);return dynamicStyles[iconStyle]};const styles$1=aphrodite.StyleSheet.create({svg:{display:"inline-block",verticalAlign:"text-bottom",flexShrink:0,flexGrow:0,maskSize:"100%",maskRepeat:"no-repeat",maskPosition:"center"}});PhosphorIcon.displayName="PhosphorIcon";
+function getSize(size){switch(size){case"small":default:{return styles$1.small}case"medium":{return styles$1.medium}case"large":{return styles$1.large}case"xlarge":{return styles$1.xlarge}}}const StyledDiv=wonderBlocksCore.addStyle("div");React__namespace.forwardRef((props,ref)=>{const{size="small",id,testId,style,children,...otherProps}=props;const childrenElement=React__namespace.cloneElement(children,{style:{width:"100%",height:"100%"}});return jsxRuntime.jsx(StyledDiv,{style:[getSize(size),style],id:id,"data-testid":testId,ref:ref,...otherProps,children:childrenElement})});const styles$1=aphrodite.StyleSheet.create({small:{width:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160},medium:{width:wonderBlocksTokens.sizing.size_240,height:wonderBlocksTokens.sizing.size_240},large:{width:wonderBlocksTokens.sizing.size_480,height:wonderBlocksTokens.sizing.size_480},xlarge:{width:wonderBlocksTokens.sizing.size_960,height:wonderBlocksTokens.sizing.size_960}});const viewportPixelsForSize=size=>({small:16,medium:24,large:48,xlarge:96})[size];const StyledSpan$1=wonderBlocksCore.addStyle("span");const PhosphorIcon=React__namespace.forwardRef(function PhosphorIcon(props,ref){const{color="currentColor",icon,size="small",style,testId,className,role,...sharedProps}=props;const pixelSize=viewportPixelsForSize(size);const classNames=`${className??""}`;const iconStyles=_generateStyles(color,pixelSize);return jsxRuntime.jsx(StyledSpan$1,{...sharedProps,className:classNames,style:[styles$2.svg,iconStyles.icon,{maskImage:`url(${icon})`},style],"data-testid":testId,ref:ref,role:role??sharedProps["aria-label"]?"img":undefined})});const dynamicStyles={};const _generateStyles=(color,size)=>{const iconStyle=`${color}-${size}`;if(styles$2[iconStyle]){return styles$2[iconStyle]}const newStyles={icon:{backgroundColor:color,width:size,height:size}};dynamicStyles[iconStyle]=aphrodite.StyleSheet.create(newStyles);return dynamicStyles[iconStyle]};const styles$2=aphrodite.StyleSheet.create({svg:{display:"inline-block",verticalAlign:"text-bottom",flexShrink:0,flexGrow:0,maskSize:"100%",maskRepeat:"no-repeat",maskPosition:"center"}});PhosphorIcon.displayName="PhosphorIcon";function useImageRoleAttributes(props){const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy}=props;const presentationOnlyAttributes={"aria-hidden":true};const iconMeaningAttributes={"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role:"img"};const attributes=ariaLabel||ariaLabelledBy?iconMeaningAttributes:presentationOnlyAttributes;return attributes}const StyledSvg$1=wonderBlocksCore.addStyle("svg");React__namespace.forwardRef((props,ref)=>{const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,id,testId,style,...otherProps}=props;const attributes=useImageRoleAttributes({"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy});return jsxRuntime.jsxs(StyledSvg$1,{id:id,"data-testid":testId,style:style,ref:ref,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...attributes,...otherProps,children:[jsxRuntime.jsx("path",{d:"M1.246 5.38105L2.36444 3.66654C2.63609 3.25012 3.0934 3 3.58311 3H12.4169C12.9066 3 13.3639 3.25012 13.6356 3.66654L14.754 5.38105C15.1278 5.95411 15.0708 6.71389 14.6158 7.22195L9.08044 13.4027C8.49982 14.051 7.50018 14.051 6.91956 13.4027L1.38423 7.22195C0.929229 6.71389 0.872177 5.95411 1.246 5.38105Z",fill:wonderBlocksTokens.semanticColor.core.foreground.gems.default}),jsxRuntime.jsx("path",{d:"M9.45654 7.01492L8.34027 10.0102C8.07911 10.711 8.97464 11.2595 9.48018 10.7084L12.6345 7.26989C13.0351 6.83317 12.7253 6.12858 12.1327 6.12858H10.7327C10.164 6.12858 9.65515 6.48199 9.45654 7.01492Z",fill:wonderBlocksTokens.semanticColor.core.foreground.gems.subtle})]})});const StyledSvg=wonderBlocksCore.addStyle("svg");React__namespace.forwardRef((props,ref)=>{const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,id,testId,style,...otherProps}=props;const attributes=useImageRoleAttributes({"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy});return jsxRuntime.jsxs(StyledSvg,{id:id,"data-testid":testId,style:style,ref:ref,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...attributes,...otherProps,children:[jsxRuntime.jsx("path",{d:"M9.14653 0.628361C9.07012 0.571421 8.97956 0.531782 8.88248 0.512785C8.78539 0.493787 8.68464 0.49599 8.5887 0.519205C8.49277 0.542421 8.40447 0.585969 8.33125 0.64618C8.25802 0.70639 8.20202 0.781496 8.16797 0.865168L5.47556 5.06034L4.59152 3.43463C4.52866 3.37998 4.45359 3.33789 4.37125 3.31114C4.28892 3.28438 4.2012 3.27357 4.11387 3.27941C4.02653 3.28525 3.94157 3.30761 3.86458 3.34502C3.78759 3.38243 3.72032 3.43403 3.66719 3.49644C1.98899 5.46729 1.13672 7.44994 1.13672 9.38884C1.13672 11.0096 1.85506 12.564 3.13372 13.7101C4.41238 14.8561 6.14661 15.5 7.9549 15.5C9.7632 15.5 11.4974 14.8561 12.7761 13.7101C14.0547 12.564 14.7731 11.0096 14.7731 9.38884C14.7731 5.26034 10.8379 1.88879 9.14653 0.628361Z",fill:wonderBlocksTokens.semanticColor.core.foreground.streak.default}),jsxRuntime.jsx("path",{d:"M10.8067 10.5315C10.8067 12.0965 9.53809 13.3651 7.97318 13.3651C6.40826 13.3651 5.13965 12.0965 5.13965 10.5315C5.13965 8.96663 7.2648 6.28125 7.97318 6.28125C8.68156 6.28125 10.8067 8.96663 10.8067 10.5315Z",fill:wonderBlocksTokens.semanticColor.core.foreground.streak.subtle})]})});
 
 const defaultLabeledFieldLabels={errorIconAriaLabel:"Error:"};const StyledSpan=wonderBlocksCore.addStyle("span");function LabeledField(props){const{field,styles:stylesProp,label,id,required,testId,description,errorMessage,labels=defaultLabeledFieldLabels}=props;const generatedUniqueId=React__namespace.useId();const uniqueId=id??`${generatedUniqueId}-labeled-field`;const labelId=`${uniqueId}-label`;const descriptionId=`${uniqueId}-description`;const fieldId=`${uniqueId}-field`;const errorId=`${uniqueId}-error`;const isRequired=!!required||!!field.props.required;const hasError=!!errorMessage||!!field.props.error;function renderLabel(){const requiredIcon=jsxRuntime.jsxs(StyledSpan,{style:[styles.textWordBreak,styles.required],"aria-hidden":true,children:[" ","*"]});return jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsxs(wonderBlocksTypography.LabelMedium,{style:[styles.textWordBreak,styles.label,description?styles.labelWithDescription:styles.labelWithNoDescription,stylesProp?.label],tag:"label",htmlFor:fieldId,testId:testId&&`${testId}-label`,id:labelId,children:[label,isRequired&&requiredIcon]})})}function maybeRenderDescription(){if(!description){return null}return jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:[styles.textWordBreak,styles.description,stylesProp?.description],testId:testId&&`${testId}-description`,id:descriptionId,children:description})})}function maybeRenderError(){return jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.errorSection,errorMessage?styles.errorSectionWithContent:undefined,stylesProp?.error],id:errorId,testId:testId&&`${testId}-error`,"aria-live":"assertive","aria-atomic":"true",children:errorMessage&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(PhosphorIcon,{icon:WarningCircle__default["default"],style:[styles.errorIcon,styles.error],role:"img","aria-label":labels.errorIconAriaLabel}),jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:[styles.textWordBreak,styles.errorMessage,styles.error],children:errorMessage})]})})})}function renderField(){return React__namespace.cloneElement(field,{id:fieldId,"aria-describedby":[errorMessage&&errorId,description&&descriptionId].filter(Boolean).join(" "),required:required||field.props.required,error:hasError,testId:testId?`${testId}-field`:undefined})}return jsxRuntime.jsxs(wonderBlocksCore.View,{style:stylesProp?.root,children:[renderLabel(),maybeRenderDescription(),renderField(),maybeRenderError()]})}const styles=aphrodite.StyleSheet.create({label:{color:wonderBlocksTokens.semanticColor.text.primary},labelWithDescription:{paddingBlockEnd:wonderBlocksTokens.sizing.size_040},labelWithNoDescription:{paddingBlockEnd:wonderBlocksTokens.sizing.size_120},description:{color:wonderBlocksTokens.semanticColor.text.secondary,paddingBlockEnd:wonderBlocksTokens.sizing.size_120},errorSection:{flexDirection:"row",gap:wonderBlocksTokens.sizing.size_080},errorSectionWithContent:{paddingBlockStart:wonderBlocksTokens.sizing.size_120},error:{color:wonderBlocksTokens.semanticColor.status.critical.foreground},errorIcon:{marginTop:"1px"},errorMessage:{minWidth:"0"},required:{color:wonderBlocksTokens.semanticColor.status.critical.foreground},textWordBreak:{overflowWrap:"break-word"}});
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-labeled-field",
-  "version": "3.0.13",
+  "version": "3.0.15",
   "design": "v1",
   "description": "LabeledField handles accessibility and layout for associating labels with form components.",
   "main": "dist/index.js",
@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@khanacademy/wonder-blocks-core": "12.3.0",
-    "@khanacademy/wonder-blocks-layout": "3.1.16",
-    "@khanacademy/wonder-blocks-tokens": "10.4.0",
-    "@khanacademy/wonder-blocks-typography": "4.2.0"
+    "@khanacademy/wonder-blocks-tokens": "10.6.0",
+    "@khanacademy/wonder-blocks-layout": "3.1.18",
+    "@khanacademy/wonder-blocks-typography": "4.2.2"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",