@khanacademy/wonder-blocks-modal 0.0.0-PR2918-20260108160834 → 0.0.0-PR2921-20260107172502

package/CHANGELOG.md

@@ -1,11 +1,21 @@
 # @khanacademy/wonder-blocks-modal
 
-## 0.0.0-PR2918-20260108160834
+## 0.0.0-PR2921-20260107172502
+
+### Minor Changes
+
+- 8a3ee1f: Support SYL Dark
 
 ### Patch Changes
 
 - f6457be: Adjust scroll behavior for small screens in DrawerDialog and FlexibleDialog
-    - @khanacademy/wonder-blocks-icon-button@0.0.0-PR2918-20260108160834
+- Updated dependencies [8a3ee1f]
+    - @khanacademy/wonder-blocks-icon-button@0.0.0-PR2921-20260107172502
+    - @khanacademy/wonder-blocks-typography@0.0.0-PR2921-20260107172502
+    - @khanacademy/wonder-blocks-tokens@0.0.0-PR2921-20260107172502
+    - @khanacademy/wonder-blocks-breadcrumbs@0.0.0-PR2921-20260107172502
+    - @khanacademy/wonder-blocks-layout@0.0.0-PR2921-20260107172502
+    - @khanacademy/wonder-blocks-styles@0.0.0-PR2921-20260107172502
 
 ## 8.5.10
 

package/dist/css/vars.css

@@ -14,6 +14,22 @@
 --wb-c-modal-closeButton-layout-gapRight: var(--wb-sizing-size_080);
 --wb-c-modal-closeButton-layout-gapTop: var(--wb-sizing-size_080);}
 
+[data-wb-theme='syl-dark'] {--wb-c-modal-root-border-radius: var(--wb-border-radius-radius_120);
+--wb-c-modal-dialog-layout-padding: var(--wb-sizing-size_160);
+--wb-c-modal-dialog-shadow-default: var(--wb-boxShadow-high);
+--wb-c-modal-header-layout-padding-block: var(--wb-sizing-size_220);
+--wb-c-modal-header-layout-padding-inline-default: var(--wb-sizing-size_240);
+--wb-c-modal-header-layout-padding-inline-small: var(--wb-sizing-size_160);
+--wb-c-modal-header-layout-gap-default: var(--wb-sizing-size_080);
+--wb-c-modal-header-layout-gap-title-default: var(--wb-sizing-size_160);
+--wb-c-modal-header-layout-gap-title-small: var(--wb-sizing-size_320);
+--wb-c-modal-panel-layout-gap-default: var(--wb-sizing-size_240);
+--wb-c-modal-panel-layout-gap-small: var(--wb-sizing-size_160);
+--wb-c-modal-footer-layout-padding-inline: var(--wb-sizing-size_160);
+--wb-c-modal-footer-layout-padding-block: var(--wb-sizing-size_160);
+--wb-c-modal-closeButton-layout-gapRight: var(--wb-sizing-size_120);
+--wb-c-modal-closeButton-layout-gapTop: var(--wb-sizing-size_160);}
+
 [data-wb-theme='thunderblocks'] {--wb-c-modal-root-border-radius: var(--wb-border-radius-radius_120);
 --wb-c-modal-dialog-layout-padding: var(--wb-sizing-size_160);
 --wb-c-modal-dialog-shadow-default: var(--wb-boxShadow-high);

package/dist/es/index.js

@@ -38,11 +38,11 @@ function ModalContent(props){const{scrollOverflow,style,children,applySmallHeigh
 
 const CloseButton=({onClick,style,testId})=>{return jsx(ModalContext.Consumer,{children:({closeModal})=>{if(closeModal&&onClick){throw new Error("You've specified 'onClose' on a modal when using ModalLauncher.  Please specify 'onClose' on the ModalLauncher instead")}return jsx(IconButton,{icon:xIcon,"aria-label":"Close modal",onClick:onClick||closeModal,kind:"tertiary",actionType:"neutral",style:style,testId:testId})}})};
 
-function ModalPanel({closeButtonVisible=true,scrollOverflow=true,content,footer,header,onClose,style,testId}){const renderMainContent=React.useCallback(()=>{const mainContent=ModalContent.isComponentOf(content)?content:jsx(ModalContent,{children:content});if(!mainContent){return mainContent}return React.cloneElement(mainContent,{scrollOverflow,style:[!!footer&&styles$2.hasFooter,mainContent.props.style]})},[content,footer,scrollOverflow]);const mainContent=renderMainContent();return jsxs(View,{style:[styles$2.wrapper,style],testId:testId&&`${testId}-panel`,children:[closeButtonVisible&&jsx(CloseButton,{onClick:onClose,style:[styles$2.closeButton],testId:testId&&`${testId}-close`}),header,mainContent,!footer||ModalFooter.isComponentOf(footer)?footer:jsx(ModalFooter,{children:footer})]})}ModalPanel.defaultProps={closeButtonVisible:true,scrollOverflow:true};const styles$2=StyleSheet.create({wrapper:{flex:"1 1 auto",flexDirection:"column",background:semanticColor.core.background.base.default,boxSizing:"border-box",overflow:"hidden",height:"100%",width:"100%",[modalMediaQuery.smMinOrSmallerHeight]:{overflow:"auto"}},closeButton:{position:"absolute",insetInlineEnd:theme.closeButton.layout.gapRight,top:theme.closeButton.layout.gapTop,zIndex:1,":focus":focusStyles.focus[":focus-visible"]},hasFooter:{paddingBlockEnd:theme.panel.layout.gap.default}});
+function ModalPanel({closeButtonVisible=true,scrollOverflow=true,content,footer,header,onClose,style,testId}){const renderMainContent=React.useCallback(()=>{const mainContent=ModalContent.isComponentOf(content)?content:jsx(ModalContent,{children:content});if(!mainContent){return mainContent}return React.cloneElement(mainContent,{scrollOverflow,style:[!!footer&&styles$2.hasFooter,mainContent.props.style]})},[content,footer,scrollOverflow]);const mainContent=renderMainContent();return jsxs(View,{style:[styles$2.wrapper,style],testId:testId&&`${testId}-panel`,children:[closeButtonVisible&&jsx(CloseButton,{onClick:onClose,style:[styles$2.closeButton],testId:testId&&`${testId}-close`}),header,mainContent,!footer||ModalFooter.isComponentOf(footer)?footer:jsx(ModalFooter,{children:footer})]})}ModalPanel.defaultProps={closeButtonVisible:true,scrollOverflow:true};const styles$2=StyleSheet.create({wrapper:{flex:"1 1 auto",flexDirection:"column",background:semanticColor.core.background.base.subtle,boxSizing:"border-box",overflow:"hidden",height:"100%",width:"100%",[modalMediaQuery.smMinOrSmallerHeight]:{overflow:"auto"}},closeButton:{position:"absolute",insetInlineEnd:theme.closeButton.layout.gapRight,top:theme.closeButton.layout.gapTop,zIndex:1,":focus":focusStyles.focus[":focus-visible"]},hasFooter:{paddingBlockEnd:theme.panel.layout.gap.default}});
 
 const renderHeader=(props,uniqueId)=>{const{title,breadcrumbs=undefined,subtitle=undefined,testId}=props;if(breadcrumbs){return jsx(ModalHeader,{title:title,breadcrumbs:breadcrumbs,titleId:uniqueId,testId:testId&&`${testId}-header`})}else if(subtitle){return jsx(ModalHeader,{title:title,subtitle:subtitle,titleId:uniqueId,testId:testId&&`${testId}-header`})}else {return jsx(ModalHeader,{title:title,titleId:uniqueId,testId:testId&&`${testId}-header`})}};const OnePaneDialog=props=>{const{onClose,footer,content,above,below,style,closeButtonVisible=true,testId,titleId,role,"aria-describedby":ariaDescribedBy}=props;return jsx(Id,{id:titleId,children:uniqueId=>jsx(ModalDialog,{style:[styles$1.dialog,style],above:above,below:below,testId:testId,"aria-labelledby":uniqueId,"aria-describedby":ariaDescribedBy,role:role,children:jsx(ModalPanel,{onClose:onClose,header:renderHeader(props,uniqueId),content:content,footer:footer,closeButtonVisible:closeButtonVisible,testId:testId})})})};const styles$1=StyleSheet.create({dialog:{maxInlineSize:576,width:"93.75%",height:"81.25%",maxBlockSize:624,[modalMediaQuery.midOrSmaller]:{width:"100%",height:"100%",overflow:"hidden"}}});
 
-function FlexiblePanel({closeButtonVisible=true,content,title,onClose,styles,testId}){const panelRef=React.useRef(null);const renderMainContent=React.useCallback(()=>{const contentNode=typeof content==="function"?content({title}):jsxs(Fragment,{children:[title,content]});const mainContent=ModalContent.isComponentOf(contentNode)?contentNode:jsx(ModalContent,{style:styles?.content,applySmallHeightStyles:false,children:contentNode});if(!mainContent){return mainContent}return React.cloneElement(mainContent,{applySmallHeightStyles:false,style:[mainContent.props.style]})},[title,content,styles?.content]);const mainContent=renderMainContent();const defaultBackgroundStyle={backgroundColor:semanticColor.core.background.base.default};const combinedBackgroundStyles={...defaultBackgroundStyle,...styles?.panel};return jsxs(View,{style:[componentStyles$1.wrapper,combinedBackgroundStyles],testId:testId&&`${testId}-panel`,ref:panelRef,children:[closeButtonVisible&&jsx(CloseButton,{onClick:onClose,style:[componentStyles$1.closeButton,styles?.closeButton],testId:testId&&`${testId}-close`}),mainContent]})}FlexiblePanel.defaultProps={closeButtonVisible:true};const componentStyles$1=StyleSheet.create({wrapper:{flex:"1 1 auto",flexDirection:"column",boxSizing:"border-box",overflow:"hidden",height:"100%",width:"100%"},closeButton:{position:"absolute",insetInlineEnd:theme.closeButton.layout.gapRight,top:theme.closeButton.layout.gapTop,zIndex:1,":focus":focusStyles.focus[":focus-visible"]}});
+function FlexiblePanel({closeButtonVisible=true,content,title,onClose,styles,testId}){const panelRef=React.useRef(null);const renderMainContent=React.useCallback(()=>{const contentNode=typeof content==="function"?content({title}):jsxs(Fragment,{children:[title,content]});const mainContent=ModalContent.isComponentOf(contentNode)?contentNode:jsx(ModalContent,{style:styles?.content,applySmallHeightStyles:false,children:contentNode});if(!mainContent){return mainContent}return React.cloneElement(mainContent,{applySmallHeightStyles:false,style:[mainContent.props.style]})},[title,content,styles?.content]);const mainContent=renderMainContent();const defaultBackgroundStyle={backgroundColor:semanticColor.core.background.base.subtle};const combinedBackgroundStyles={...defaultBackgroundStyle,...styles?.panel};return jsxs(View,{style:[componentStyles$1.wrapper,combinedBackgroundStyles],testId:testId&&`${testId}-panel`,ref:panelRef,children:[closeButtonVisible&&jsx(CloseButton,{onClick:onClose,style:[componentStyles$1.closeButton,styles?.closeButton],testId:testId&&`${testId}-close`}),mainContent]})}FlexiblePanel.defaultProps={closeButtonVisible:true};const componentStyles$1=StyleSheet.create({wrapper:{flex:"1 1 auto",flexDirection:"column",boxSizing:"border-box",overflow:"hidden",height:"100%",width:"100%"},closeButton:{position:"absolute",insetInlineEnd:theme.closeButton.layout.gapRight,top:theme.closeButton.layout.gapTop,zIndex:1,":focus":focusStyles.focus[":focus-visible"]}});
 
 const FlexibleDialog=React.forwardRef(function FlexibleDialog(props,ref){const{onClose,title,content,styles,closeButtonVisible=true,testId,titleId,role="dialog",...accessibilityProps}=props;const uniqueId=React.useId();const headingId=titleId??uniqueId;const renderedTitle=title==null?null:typeof title==="string"?jsx(Heading,{id:headingId,children:title}):React.cloneElement(title,{id:headingId,testId:"title-heading-wrapper"});return jsx(View,{style:[componentStyles.root,styles?.root],children:jsx(View,{role:role,"aria-modal":"true","aria-label":accessibilityProps["aria-label"],"aria-labelledby":headingId,"aria-describedby":accessibilityProps["aria-describedby"],ref:ref,testId:testId,style:[componentStyles.dialog,styles?.dialog],children:jsx(FlexiblePanel,{styles:{panel:styles?.panel,content:styles?.content,closeButton:styles?.closeButton},onClose:onClose,title:renderedTitle,content:content,closeButtonVisible:closeButtonVisible,testId:testId})})})});const componentStyles=StyleSheet.create({root:{boxShadow:theme.dialog.shadow.default,color:semanticColor.core.foreground.neutral.strong,overflow:"auto",position:"relative",willChange:"transform, opacity",height:"auto",maxHeight:"100vh",maxWidth:576,width:"93.75%"}});
 

package/dist/index.js

@@ -67,11 +67,11 @@ function ModalContent(props){const{scrollOverflow,style,children,applySmallHeigh
 
 const CloseButton=({onClick,style,testId})=>{return jsxRuntime.jsx(ModalContext.Consumer,{children:({closeModal})=>{if(closeModal&&onClick){throw new Error("You've specified 'onClose' on a modal when using ModalLauncher.  Please specify 'onClose' on the ModalLauncher instead")}return jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],"aria-label":"Close modal",onClick:onClick||closeModal,kind:"tertiary",actionType:"neutral",style:style,testId:testId})}})};
 
-function ModalPanel({closeButtonVisible=true,scrollOverflow=true,content,footer,header,onClose,style,testId}){const renderMainContent=React__namespace.useCallback(()=>{const mainContent=ModalContent.isComponentOf(content)?content:jsxRuntime.jsx(ModalContent,{children:content});if(!mainContent){return mainContent}return React__namespace.cloneElement(mainContent,{scrollOverflow,style:[!!footer&&styles$2.hasFooter,mainContent.props.style]})},[content,footer,scrollOverflow]);const mainContent=renderMainContent();return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles$2.wrapper,style],testId:testId&&`${testId}-panel`,children:[closeButtonVisible&&jsxRuntime.jsx(CloseButton,{onClick:onClose,style:[styles$2.closeButton],testId:testId&&`${testId}-close`}),header,mainContent,!footer||ModalFooter.isComponentOf(footer)?footer:jsxRuntime.jsx(ModalFooter,{children:footer})]})}ModalPanel.defaultProps={closeButtonVisible:true,scrollOverflow:true};const styles$2=aphrodite.StyleSheet.create({wrapper:{flex:"1 1 auto",flexDirection:"column",background:wonderBlocksTokens.semanticColor.core.background.base.default,boxSizing:"border-box",overflow:"hidden",height:"100%",width:"100%",[modalMediaQuery.smMinOrSmallerHeight]:{overflow:"auto"}},closeButton:{position:"absolute",insetInlineEnd:theme.closeButton.layout.gapRight,top:theme.closeButton.layout.gapTop,zIndex:1,":focus":wonderBlocksStyles.focusStyles.focus[":focus-visible"]},hasFooter:{paddingBlockEnd:theme.panel.layout.gap.default}});
+function ModalPanel({closeButtonVisible=true,scrollOverflow=true,content,footer,header,onClose,style,testId}){const renderMainContent=React__namespace.useCallback(()=>{const mainContent=ModalContent.isComponentOf(content)?content:jsxRuntime.jsx(ModalContent,{children:content});if(!mainContent){return mainContent}return React__namespace.cloneElement(mainContent,{scrollOverflow,style:[!!footer&&styles$2.hasFooter,mainContent.props.style]})},[content,footer,scrollOverflow]);const mainContent=renderMainContent();return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles$2.wrapper,style],testId:testId&&`${testId}-panel`,children:[closeButtonVisible&&jsxRuntime.jsx(CloseButton,{onClick:onClose,style:[styles$2.closeButton],testId:testId&&`${testId}-close`}),header,mainContent,!footer||ModalFooter.isComponentOf(footer)?footer:jsxRuntime.jsx(ModalFooter,{children:footer})]})}ModalPanel.defaultProps={closeButtonVisible:true,scrollOverflow:true};const styles$2=aphrodite.StyleSheet.create({wrapper:{flex:"1 1 auto",flexDirection:"column",background:wonderBlocksTokens.semanticColor.core.background.base.subtle,boxSizing:"border-box",overflow:"hidden",height:"100%",width:"100%",[modalMediaQuery.smMinOrSmallerHeight]:{overflow:"auto"}},closeButton:{position:"absolute",insetInlineEnd:theme.closeButton.layout.gapRight,top:theme.closeButton.layout.gapTop,zIndex:1,":focus":wonderBlocksStyles.focusStyles.focus[":focus-visible"]},hasFooter:{paddingBlockEnd:theme.panel.layout.gap.default}});
 
 const renderHeader=(props,uniqueId)=>{const{title,breadcrumbs=undefined,subtitle=undefined,testId}=props;if(breadcrumbs){return jsxRuntime.jsx(ModalHeader,{title:title,breadcrumbs:breadcrumbs,titleId:uniqueId,testId:testId&&`${testId}-header`})}else if(subtitle){return jsxRuntime.jsx(ModalHeader,{title:title,subtitle:subtitle,titleId:uniqueId,testId:testId&&`${testId}-header`})}else {return jsxRuntime.jsx(ModalHeader,{title:title,titleId:uniqueId,testId:testId&&`${testId}-header`})}};const OnePaneDialog=props=>{const{onClose,footer,content,above,below,style,closeButtonVisible=true,testId,titleId,role,"aria-describedby":ariaDescribedBy}=props;return jsxRuntime.jsx(wonderBlocksCore.Id,{id:titleId,children:uniqueId=>jsxRuntime.jsx(ModalDialog,{style:[styles$1.dialog,style],above:above,below:below,testId:testId,"aria-labelledby":uniqueId,"aria-describedby":ariaDescribedBy,role:role,children:jsxRuntime.jsx(ModalPanel,{onClose:onClose,header:renderHeader(props,uniqueId),content:content,footer:footer,closeButtonVisible:closeButtonVisible,testId:testId})})})};const styles$1=aphrodite.StyleSheet.create({dialog:{maxInlineSize:576,width:"93.75%",height:"81.25%",maxBlockSize:624,[modalMediaQuery.midOrSmaller]:{width:"100%",height:"100%",overflow:"hidden"}}});
 
-function FlexiblePanel({closeButtonVisible=true,content,title,onClose,styles,testId}){const panelRef=React__namespace.useRef(null);const renderMainContent=React__namespace.useCallback(()=>{const contentNode=typeof content==="function"?content({title}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[title,content]});const mainContent=ModalContent.isComponentOf(contentNode)?contentNode:jsxRuntime.jsx(ModalContent,{style:styles?.content,applySmallHeightStyles:false,children:contentNode});if(!mainContent){return mainContent}return React__namespace.cloneElement(mainContent,{applySmallHeightStyles:false,style:[mainContent.props.style]})},[title,content,styles?.content]);const mainContent=renderMainContent();const defaultBackgroundStyle={backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default};const combinedBackgroundStyles={...defaultBackgroundStyle,...styles?.panel};return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[componentStyles$1.wrapper,combinedBackgroundStyles],testId:testId&&`${testId}-panel`,ref:panelRef,children:[closeButtonVisible&&jsxRuntime.jsx(CloseButton,{onClick:onClose,style:[componentStyles$1.closeButton,styles?.closeButton],testId:testId&&`${testId}-close`}),mainContent]})}FlexiblePanel.defaultProps={closeButtonVisible:true};const componentStyles$1=aphrodite.StyleSheet.create({wrapper:{flex:"1 1 auto",flexDirection:"column",boxSizing:"border-box",overflow:"hidden",height:"100%",width:"100%"},closeButton:{position:"absolute",insetInlineEnd:theme.closeButton.layout.gapRight,top:theme.closeButton.layout.gapTop,zIndex:1,":focus":wonderBlocksStyles.focusStyles.focus[":focus-visible"]}});
+function FlexiblePanel({closeButtonVisible=true,content,title,onClose,styles,testId}){const panelRef=React__namespace.useRef(null);const renderMainContent=React__namespace.useCallback(()=>{const contentNode=typeof content==="function"?content({title}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[title,content]});const mainContent=ModalContent.isComponentOf(contentNode)?contentNode:jsxRuntime.jsx(ModalContent,{style:styles?.content,applySmallHeightStyles:false,children:contentNode});if(!mainContent){return mainContent}return React__namespace.cloneElement(mainContent,{applySmallHeightStyles:false,style:[mainContent.props.style]})},[title,content,styles?.content]);const mainContent=renderMainContent();const defaultBackgroundStyle={backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.subtle};const combinedBackgroundStyles={...defaultBackgroundStyle,...styles?.panel};return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[componentStyles$1.wrapper,combinedBackgroundStyles],testId:testId&&`${testId}-panel`,ref:panelRef,children:[closeButtonVisible&&jsxRuntime.jsx(CloseButton,{onClick:onClose,style:[componentStyles$1.closeButton,styles?.closeButton],testId:testId&&`${testId}-close`}),mainContent]})}FlexiblePanel.defaultProps={closeButtonVisible:true};const componentStyles$1=aphrodite.StyleSheet.create({wrapper:{flex:"1 1 auto",flexDirection:"column",boxSizing:"border-box",overflow:"hidden",height:"100%",width:"100%"},closeButton:{position:"absolute",insetInlineEnd:theme.closeButton.layout.gapRight,top:theme.closeButton.layout.gapTop,zIndex:1,":focus":wonderBlocksStyles.focusStyles.focus[":focus-visible"]}});
 
 const FlexibleDialog=React__namespace.forwardRef(function FlexibleDialog(props,ref){const{onClose,title,content,styles,closeButtonVisible=true,testId,titleId,role="dialog",...accessibilityProps}=props;const uniqueId=React__namespace.useId();const headingId=titleId??uniqueId;const renderedTitle=title==null?null:typeof title==="string"?jsxRuntime.jsx(wonderBlocksTypography.Heading,{id:headingId,children:title}):React__namespace.cloneElement(title,{id:headingId,testId:"title-heading-wrapper"});return jsxRuntime.jsx(wonderBlocksCore.View,{style:[componentStyles.root,styles?.root],children:jsxRuntime.jsx(wonderBlocksCore.View,{role:role,"aria-modal":"true","aria-label":accessibilityProps["aria-label"],"aria-labelledby":headingId,"aria-describedby":accessibilityProps["aria-describedby"],ref:ref,testId:testId,style:[componentStyles.dialog,styles?.dialog],children:jsxRuntime.jsx(FlexiblePanel,{styles:{panel:styles?.panel,content:styles?.content,closeButton:styles?.closeButton},onClose:onClose,title:renderedTitle,content:content,closeButtonVisible:closeButtonVisible,testId:testId})})})});const componentStyles=aphrodite.StyleSheet.create({root:{boxShadow:theme.dialog.shadow.default,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,overflow:"auto",position:"relative",willChange:"transform, opacity",height:"auto",maxHeight:"100vh",maxWidth:576,width:"93.75%"}});
 

package/dist/theme/syl-dark.d.ts

@@ -0,0 +1,56 @@
+declare const _default: {
+    root: {
+        border: {
+            radius: string;
+        };
+    };
+    dialog: {
+        layout: {
+            padding: string;
+        };
+        shadow: {
+            default: string;
+        };
+    };
+    header: {
+        layout: {
+            padding: {
+                block: string;
+                inline: {
+                    default: string;
+                    small: string;
+                };
+            };
+            gap: {
+                default: string;
+                title: {
+                    default: string;
+                    small: string;
+                };
+            };
+        };
+    };
+    panel: {
+        layout: {
+            gap: {
+                default: string;
+                small: string;
+            };
+        };
+    };
+    footer: {
+        layout: {
+            padding: {
+                inline: string;
+                block: string;
+            };
+        };
+    };
+    closeButton: {
+        layout: {
+            gapRight: string;
+            gapTop: string;
+        };
+    };
+};
+export default _default;

package/package.json

@@ -3,7 +3,7 @@
   "description": "",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "0.0.0-PR2918-20260108160834",
+  "version": "0.0.0-PR2921-20260107172502",
   "publishConfig": {
     "access": "public"
   },
@@ -28,14 +28,14 @@
     "./styles.css": "./dist/css/vars.css"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-breadcrumbs": "3.2.9",
+    "@khanacademy/wonder-blocks-breadcrumbs": "0.0.0-PR2921-20260107172502",
     "@khanacademy/wonder-blocks-core": "12.4.2",
-    "@khanacademy/wonder-blocks-icon-button": "0.0.0-PR2918-20260108160834",
-    "@khanacademy/wonder-blocks-layout": "3.1.42",
-    "@khanacademy/wonder-blocks-styles": "0.2.37",
+    "@khanacademy/wonder-blocks-icon-button": "0.0.0-PR2921-20260107172502",
+    "@khanacademy/wonder-blocks-layout": "0.0.0-PR2921-20260107172502",
+    "@khanacademy/wonder-blocks-styles": "0.0.0-PR2921-20260107172502",
     "@khanacademy/wonder-blocks-timing": "7.0.4",
-    "@khanacademy/wonder-blocks-tokens": "14.1.3",
-    "@khanacademy/wonder-blocks-typography": "4.2.27"
+    "@khanacademy/wonder-blocks-tokens": "0.0.0-PR2921-20260107172502",
+    "@khanacademy/wonder-blocks-typography": "0.0.0-PR2921-20260107172502"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",