@khanacademy/wonder-blocks-modal 8.3.1 → 8.4.1

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

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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/wonder-blocks-modal
 
+## 8.4.1
+
+### Patch Changes
+
+- Updated dependencies [ede6085]
+- Updated dependencies [a70f274]
+    - @khanacademy/wonder-blocks-tokens@13.0.0
+    - @khanacademy/wonder-blocks-breadcrumbs@3.2.3
+    - @khanacademy/wonder-blocks-icon-button@10.4.2
+    - @khanacademy/wonder-blocks-layout@3.1.36
+    - @khanacademy/wonder-blocks-styles@0.2.31
+    - @khanacademy/wonder-blocks-typography@4.2.21
+
+## 8.4.0
+
+### Minor Changes
+
+- 45655a7: Add support for no padding to DrawerDialog and FlexibleDialog
+
 ## 8.3.1
 
 ### Patch Changes

package/dist/components/drawer-dialog.d.ts

@@ -58,6 +58,7 @@ export type DrawerDialogStyles = {
     root?: StyleType;
     dialog?: StyleType;
     panel?: StyleType;
+    content?: StyleType;
     closeButton?: StyleType;
 };
 type RenderProps = {
@@ -97,6 +98,16 @@ type RenderProps = {
  *     }
  * />
  * ```
+ *
+ * ### Custom styling
+ *
+ * You can optionally pass in the `styles` prop to override various parts of a DrawerDialog.
+ *
+ * - `styles.root` -  The outermost container of the dialog itself: alignment styles, box shadow, minWidth, maxWidth, width, height, maxHeight, etc.
+ * - `styles.dialog` - The actual dialog element with minWidth/minHeight, mostly to override View default styles
+ * - `styles.panel` - The inner dialog panel, targeting the internal `FlexiblePanel` component
+ * - `styles.content` - The internal `ModalContent` component, which sets padding
+ * - `styles.closeButton` - The close button, including absolute positioning
  */
 declare const DrawerDialog: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default DrawerDialog;

package/dist/components/flexible-dialog.d.ts

@@ -58,6 +58,7 @@ export type FlexibleDialogStyles = {
     root?: StyleType;
     dialog?: StyleType;
     panel?: StyleType;
+    content?: StyleType;
     closeButton?: StyleType;
 };
 type RenderProps = {
@@ -99,6 +100,16 @@ type RenderProps = {
  *     }
  * />
  * ```
+ *
+ * ### Custom styling
+ *
+ * You can optionally pass in the `styles` prop to override various parts of a DrawerDialog.
+ *
+ * - `styles.root` -  The outermost container of the dialog: box shadow, minWidth, maxWidth, width, height, maxHeight, etc.
+ * - `styles.dialog` - The actual dialog element with minWidth/minHeight, mostly to override View default styles
+ * - `styles.panel` - The inner dialog flex panel, targeting the internal `FlexiblePanel` component
+ * - `styles.content` - The internal `ModalContent` component, which sets padding
+ * - `styles.closeButton` - The close button, including absolute positioning
  */
 declare const FlexibleDialog: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default FlexibleDialog;

package/dist/components/flexible-panel.d.ts

@@ -24,6 +24,7 @@ type Props = {
      */
     styles?: {
         panel?: StyleType;
+        content?: StyleType;
         closeButton?: StyleType;
     };
     /**

package/dist/es/index.js

@@ -43,9 +43,9 @@ function ModalPanel({closeButtonVisible=true,scrollOverflow=true,content,footer,
 
 class OnePaneDialog extends React.Component{renderHeader(uniqueId){const{title,breadcrumbs=undefined,subtitle=undefined,testId}=this.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`})}}render(){const{onClose,footer,content,above,below,style,closeButtonVisible,testId,titleId,role,"aria-describedby":ariaDescribedBy}=this.props;return jsx(MediaLayout,{styleSheets:styleSheets,children:({styles})=>jsx(Id,{id:titleId,children:uniqueId=>jsx(ModalDialog,{style:[styles.dialog,style],above:above,below:below,testId:testId,"aria-labelledby":uniqueId,"aria-describedby":ariaDescribedBy,role:role,children:jsx(ModalPanel,{onClose:onClose,header:this.renderHeader(uniqueId),content:content,footer:footer,closeButtonVisible:closeButtonVisible,testId:testId})})})})}}OnePaneDialog.defaultProps={closeButtonVisible:true};const styleSheets={small:StyleSheet.create({dialog:{width:"100%",height:"100%",overflow:"hidden"}}),mdOrLarger:StyleSheet.create({dialog:{width:"93.75%",maxWidth:576,height:"81.25%",maxHeight:624}})};
 
-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,{children:contentNode});if(!mainContent){return mainContent}return React.cloneElement(mainContent,{style:[mainContent.props.style]})},[title,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,scrollOverflow: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,children:contentNode});if(!mainContent){return mainContent}return React.cloneElement(mainContent,{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,scrollOverflow: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,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%",[breakpoint.mediaQuery.sm]:{height:"100vh",maxHeight:"100vh",width:"100%"}}});
+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%",[breakpoint.mediaQuery.sm]:{height:"100vh",maxHeight:"100vh",width:"100%"}}});
 
 const DEFAULT_DRAWER_TIMING_DURATION_MS=400;const DEFAULT_DRAWER_ANIMATED=true;const DEFAULT_DRAWER_BACKDROP_DISMISS_ENABLED=true;const DEFAULT_DRAWER_IS_EXITING=false;const defaultDrawerContextValue={animated:DEFAULT_DRAWER_ANIMATED,isExiting:DEFAULT_DRAWER_IS_EXITING,timingDuration:DEFAULT_DRAWER_TIMING_DURATION_MS};const DrawerContext=React.createContext(defaultDrawerContextValue);const useDrawerContext=()=>{return React.useContext(DrawerContext)};
 
@@ -55,7 +55,7 @@ const defaultProps={backdropDismissEnabled:DEFAULT_DRAWER_BACKDROP_DISMISS_ENABL
 
 function useDirectionDetection(elementRef,options={}){const{direction:explicitDirection,defaultDirection="ltr"}=options;if(explicitDirection){return explicitDirection}if(elementRef?.current){const elementWithDir=elementRef.current.closest("[dir]");if(elementWithDir){const dirValue=elementWithDir.getAttribute("dir");return dirValue==="rtl"||dirValue==="ltr"?dirValue:defaultDirection}}const documentDir=document.documentElement.getAttribute("dir")||document.body.getAttribute("dir");if(documentDir==="rtl"||documentDir==="ltr"){return documentDir}return defaultDirection}
 
-const DrawerDialog=React.forwardRef(function DrawerDialog(props,ref){const contextProps=useDrawerContext();const alignment=contextProps.alignment;const animated=contextProps.animated??DEFAULT_DRAWER_ANIMATED;const isExiting=contextProps.isExiting??DEFAULT_DRAWER_IS_EXITING;const timingDuration=contextProps.timingDuration??DEFAULT_DRAWER_TIMING_DURATION_MS;const{styles}=props;const direction=useDirectionDetection();const isRtl=direction==="rtl";const componentStyles=getComponentStyles({alignment,isRtl,animated,isExiting,timingDuration});const alignmentStyles=alignment&&componentStyles[alignment]||componentStyles.inlineEnd;return jsx(FlexibleDialog,{...props,ref:ref,styles:{root:[componentStyles.root,alignmentStyles,styles?.root].filter(Boolean),dialog:[componentStyles.dialog,styles?.dialog].filter(Boolean),panel:styles?.panel,closeButton:styles?.closeButton}})});const getTransformValue=(isRtl,alignment,percentage)=>{if(alignment==="blockEnd"){return `translate3d(0, ${percentage}%, 0)`}const directionMultiplier=isRtl?alignment==="inlineEnd"?-1:1:alignment==="inlineEnd"?1:-1;return `translate3d(${directionMultiplier*percentage}%, 0, 0)`};const createKeyframes=(isRtl,alignment)=>({slideIn:{"0%":{transform:getTransformValue(isRtl,alignment,100),opacity:0},"100%":{transform:getTransformValue(isRtl,alignment,0),opacity:1}},slideOut:{"0%":{transform:getTransformValue(isRtl,alignment,0),opacity:1},"100%":{transform:getTransformValue(isRtl,alignment,100),opacity:0}}});const getComponentStyles=({alignment,isRtl,animated,isExiting,timingDuration})=>{const alignmentKeyframes=alignment?createKeyframes(isRtl,alignment):null;return StyleSheet.create({root:{boxShadow:theme.dialog.shadow.default,color:semanticColor.core.foreground.neutral.strong,overflow:"auto",position:"relative",willChange:"transform, opacity",height:"100%",minHeight:"100vh",minWidth:breakpoint.width.xsMax,maxWidth:breakpoint.width.smMax,width:"100%",[breakpoint.mediaQuery.smOrSmaller]:{minWidth:"unset",maxWidth:"unset"}},dialog:{minHeight:alignment==="blockEnd"?"unset":"100vh",minWidth:"unset"},inlineStart:{animationName:animated&&alignmentKeyframes&&(isExiting?alignmentKeyframes.slideOut:alignmentKeyframes.slideIn),animationDuration:`${timingDuration}ms`,animationTimingFunction:"linear",animationFillMode:"forwards"},inlineEnd:{animationName:animated&&alignmentKeyframes&&(isExiting?alignmentKeyframes.slideOut:alignmentKeyframes.slideIn),animationDuration:`${timingDuration}ms`,animationTimingFunction:"linear",animationFillMode:"forwards"},blockEnd:{animationName:animated&&alignmentKeyframes&&(isExiting?alignmentKeyframes.slideOut:alignmentKeyframes.slideIn),animationDuration:`${timingDuration}ms`,animationTimingFunction:"linear",animationFillMode:"forwards",height:"auto",minHeight:"unset",maxWidth:"unset",[breakpoint.mediaQuery.smOrSmaller]:{height:"auto"}}})};DrawerDialog.displayName="DrawerDialog";
+const DrawerDialog=React.forwardRef(function DrawerDialog(props,ref){const contextProps=useDrawerContext();const alignment=contextProps.alignment;const animated=contextProps.animated??DEFAULT_DRAWER_ANIMATED;const isExiting=contextProps.isExiting??DEFAULT_DRAWER_IS_EXITING;const timingDuration=contextProps.timingDuration??DEFAULT_DRAWER_TIMING_DURATION_MS;const{styles}=props;const direction=useDirectionDetection();const isRtl=direction==="rtl";const componentStyles=getComponentStyles({alignment,isRtl,animated,isExiting,timingDuration});const alignmentStyles=alignment&&componentStyles[alignment]||componentStyles.inlineEnd;return jsx(FlexibleDialog,{...props,ref:ref,styles:{root:[componentStyles.root,alignmentStyles,styles?.root].filter(Boolean),dialog:[componentStyles.dialog,styles?.dialog].filter(Boolean),panel:styles?.panel,content:styles?.content,closeButton:styles?.closeButton}})});const getTransformValue=(isRtl,alignment,percentage)=>{if(alignment==="blockEnd"){return `translate3d(0, ${percentage}%, 0)`}const directionMultiplier=isRtl?alignment==="inlineEnd"?-1:1:alignment==="inlineEnd"?1:-1;return `translate3d(${directionMultiplier*percentage}%, 0, 0)`};const createKeyframes=(isRtl,alignment)=>({slideIn:{"0%":{transform:getTransformValue(isRtl,alignment,100),opacity:0},"100%":{transform:getTransformValue(isRtl,alignment,0),opacity:1}},slideOut:{"0%":{transform:getTransformValue(isRtl,alignment,0),opacity:1},"100%":{transform:getTransformValue(isRtl,alignment,100),opacity:0}}});const getComponentStyles=({alignment,isRtl,animated,isExiting,timingDuration})=>{const alignmentKeyframes=alignment?createKeyframes(isRtl,alignment):null;return StyleSheet.create({root:{boxShadow:theme.dialog.shadow.default,color:semanticColor.core.foreground.neutral.strong,overflow:"auto",position:"relative",willChange:"transform, opacity",height:"100%",minHeight:"100vh",minWidth:breakpoint.width.xsMax,maxWidth:breakpoint.width.smMax,width:"100%",[breakpoint.mediaQuery.smOrSmaller]:{minWidth:"unset",maxWidth:"unset"}},dialog:{minHeight:alignment==="blockEnd"?"unset":"100vh",minWidth:"unset"},inlineStart:{animationName:animated&&alignmentKeyframes&&(isExiting?alignmentKeyframes.slideOut:alignmentKeyframes.slideIn),animationDuration:`${timingDuration}ms`,animationTimingFunction:"linear",animationFillMode:"forwards"},inlineEnd:{animationName:animated&&alignmentKeyframes&&(isExiting?alignmentKeyframes.slideOut:alignmentKeyframes.slideIn),animationDuration:`${timingDuration}ms`,animationTimingFunction:"linear",animationFillMode:"forwards"},blockEnd:{animationName:animated&&alignmentKeyframes&&(isExiting?alignmentKeyframes.slideOut:alignmentKeyframes.slideIn),animationDuration:`${timingDuration}ms`,animationTimingFunction:"linear",animationFillMode:"forwards",height:"auto",minHeight:"unset",maxWidth:"unset",[breakpoint.mediaQuery.smOrSmaller]:{height:"auto"}}})};DrawerDialog.displayName="DrawerDialog";
 
 function maybeGetNextAncestorModalLauncherPortal(element){let candidateElement=element&&element.parentElement;while(candidateElement&&!candidateElement.hasAttribute(ModalLauncherPortalAttributeName)){candidateElement=candidateElement.parentElement;}return candidateElement}function maybeGetPortalMountedModalHostElement(element){return maybeGetNextAncestorModalLauncherPortal(element)}
 

package/dist/index.js

@@ -72,9 +72,9 @@ function ModalPanel({closeButtonVisible=true,scrollOverflow=true,content,footer,
 
 class OnePaneDialog extends React__namespace.Component{renderHeader(uniqueId){const{title,breadcrumbs=undefined,subtitle=undefined,testId}=this.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`})}}render(){const{onClose,footer,content,above,below,style,closeButtonVisible,testId,titleId,role,"aria-describedby":ariaDescribedBy}=this.props;return jsxRuntime.jsx(wonderBlocksLayout.MediaLayout,{styleSheets:styleSheets,children:({styles})=>jsxRuntime.jsx(wonderBlocksCore.Id,{id:titleId,children:uniqueId=>jsxRuntime.jsx(ModalDialog,{style:[styles.dialog,style],above:above,below:below,testId:testId,"aria-labelledby":uniqueId,"aria-describedby":ariaDescribedBy,role:role,children:jsxRuntime.jsx(ModalPanel,{onClose:onClose,header:this.renderHeader(uniqueId),content:content,footer:footer,closeButtonVisible:closeButtonVisible,testId:testId})})})})}}OnePaneDialog.defaultProps={closeButtonVisible:true};const styleSheets={small:aphrodite.StyleSheet.create({dialog:{width:"100%",height:"100%",overflow:"hidden"}}),mdOrLarger:aphrodite.StyleSheet.create({dialog:{width:"93.75%",maxWidth:576,height:"81.25%",maxHeight:624}})};
 
-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,{children:contentNode});if(!mainContent){return mainContent}return React__namespace.cloneElement(mainContent,{style:[mainContent.props.style]})},[title,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,scrollOverflow: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,children:contentNode});if(!mainContent){return mainContent}return React__namespace.cloneElement(mainContent,{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,scrollOverflow: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,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%",[wonderBlocksTokens.breakpoint.mediaQuery.sm]:{height:"100vh",maxHeight:"100vh",width:"100%"}}});
+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%",[wonderBlocksTokens.breakpoint.mediaQuery.sm]:{height:"100vh",maxHeight:"100vh",width:"100%"}}});
 
 const DEFAULT_DRAWER_TIMING_DURATION_MS=400;const DEFAULT_DRAWER_ANIMATED=true;const DEFAULT_DRAWER_BACKDROP_DISMISS_ENABLED=true;const DEFAULT_DRAWER_IS_EXITING=false;const defaultDrawerContextValue={animated:DEFAULT_DRAWER_ANIMATED,isExiting:DEFAULT_DRAWER_IS_EXITING,timingDuration:DEFAULT_DRAWER_TIMING_DURATION_MS};const DrawerContext=React__namespace.createContext(defaultDrawerContextValue);const useDrawerContext=()=>{return React__namespace.useContext(DrawerContext)};
 
@@ -84,7 +84,7 @@ const defaultProps={backdropDismissEnabled:DEFAULT_DRAWER_BACKDROP_DISMISS_ENABL
 
 function useDirectionDetection(elementRef,options={}){const{direction:explicitDirection,defaultDirection="ltr"}=options;if(explicitDirection){return explicitDirection}if(elementRef?.current){const elementWithDir=elementRef.current.closest("[dir]");if(elementWithDir){const dirValue=elementWithDir.getAttribute("dir");return dirValue==="rtl"||dirValue==="ltr"?dirValue:defaultDirection}}const documentDir=document.documentElement.getAttribute("dir")||document.body.getAttribute("dir");if(documentDir==="rtl"||documentDir==="ltr"){return documentDir}return defaultDirection}
 
-const DrawerDialog=React__namespace.forwardRef(function DrawerDialog(props,ref){const contextProps=useDrawerContext();const alignment=contextProps.alignment;const animated=contextProps.animated??DEFAULT_DRAWER_ANIMATED;const isExiting=contextProps.isExiting??DEFAULT_DRAWER_IS_EXITING;const timingDuration=contextProps.timingDuration??DEFAULT_DRAWER_TIMING_DURATION_MS;const{styles}=props;const direction=useDirectionDetection();const isRtl=direction==="rtl";const componentStyles=getComponentStyles({alignment,isRtl,animated,isExiting,timingDuration});const alignmentStyles=alignment&&componentStyles[alignment]||componentStyles.inlineEnd;return jsxRuntime.jsx(FlexibleDialog,{...props,ref:ref,styles:{root:[componentStyles.root,alignmentStyles,styles?.root].filter(Boolean),dialog:[componentStyles.dialog,styles?.dialog].filter(Boolean),panel:styles?.panel,closeButton:styles?.closeButton}})});const getTransformValue=(isRtl,alignment,percentage)=>{if(alignment==="blockEnd"){return `translate3d(0, ${percentage}%, 0)`}const directionMultiplier=isRtl?alignment==="inlineEnd"?-1:1:alignment==="inlineEnd"?1:-1;return `translate3d(${directionMultiplier*percentage}%, 0, 0)`};const createKeyframes=(isRtl,alignment)=>({slideIn:{"0%":{transform:getTransformValue(isRtl,alignment,100),opacity:0},"100%":{transform:getTransformValue(isRtl,alignment,0),opacity:1}},slideOut:{"0%":{transform:getTransformValue(isRtl,alignment,0),opacity:1},"100%":{transform:getTransformValue(isRtl,alignment,100),opacity:0}}});const getComponentStyles=({alignment,isRtl,animated,isExiting,timingDuration})=>{const alignmentKeyframes=alignment?createKeyframes(isRtl,alignment):null;return aphrodite.StyleSheet.create({root:{boxShadow:theme.dialog.shadow.default,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,overflow:"auto",position:"relative",willChange:"transform, opacity",height:"100%",minHeight:"100vh",minWidth:wonderBlocksTokens.breakpoint.width.xsMax,maxWidth:wonderBlocksTokens.breakpoint.width.smMax,width:"100%",[wonderBlocksTokens.breakpoint.mediaQuery.smOrSmaller]:{minWidth:"unset",maxWidth:"unset"}},dialog:{minHeight:alignment==="blockEnd"?"unset":"100vh",minWidth:"unset"},inlineStart:{animationName:animated&&alignmentKeyframes&&(isExiting?alignmentKeyframes.slideOut:alignmentKeyframes.slideIn),animationDuration:`${timingDuration}ms`,animationTimingFunction:"linear",animationFillMode:"forwards"},inlineEnd:{animationName:animated&&alignmentKeyframes&&(isExiting?alignmentKeyframes.slideOut:alignmentKeyframes.slideIn),animationDuration:`${timingDuration}ms`,animationTimingFunction:"linear",animationFillMode:"forwards"},blockEnd:{animationName:animated&&alignmentKeyframes&&(isExiting?alignmentKeyframes.slideOut:alignmentKeyframes.slideIn),animationDuration:`${timingDuration}ms`,animationTimingFunction:"linear",animationFillMode:"forwards",height:"auto",minHeight:"unset",maxWidth:"unset",[wonderBlocksTokens.breakpoint.mediaQuery.smOrSmaller]:{height:"auto"}}})};DrawerDialog.displayName="DrawerDialog";
+const DrawerDialog=React__namespace.forwardRef(function DrawerDialog(props,ref){const contextProps=useDrawerContext();const alignment=contextProps.alignment;const animated=contextProps.animated??DEFAULT_DRAWER_ANIMATED;const isExiting=contextProps.isExiting??DEFAULT_DRAWER_IS_EXITING;const timingDuration=contextProps.timingDuration??DEFAULT_DRAWER_TIMING_DURATION_MS;const{styles}=props;const direction=useDirectionDetection();const isRtl=direction==="rtl";const componentStyles=getComponentStyles({alignment,isRtl,animated,isExiting,timingDuration});const alignmentStyles=alignment&&componentStyles[alignment]||componentStyles.inlineEnd;return jsxRuntime.jsx(FlexibleDialog,{...props,ref:ref,styles:{root:[componentStyles.root,alignmentStyles,styles?.root].filter(Boolean),dialog:[componentStyles.dialog,styles?.dialog].filter(Boolean),panel:styles?.panel,content:styles?.content,closeButton:styles?.closeButton}})});const getTransformValue=(isRtl,alignment,percentage)=>{if(alignment==="blockEnd"){return `translate3d(0, ${percentage}%, 0)`}const directionMultiplier=isRtl?alignment==="inlineEnd"?-1:1:alignment==="inlineEnd"?1:-1;return `translate3d(${directionMultiplier*percentage}%, 0, 0)`};const createKeyframes=(isRtl,alignment)=>({slideIn:{"0%":{transform:getTransformValue(isRtl,alignment,100),opacity:0},"100%":{transform:getTransformValue(isRtl,alignment,0),opacity:1}},slideOut:{"0%":{transform:getTransformValue(isRtl,alignment,0),opacity:1},"100%":{transform:getTransformValue(isRtl,alignment,100),opacity:0}}});const getComponentStyles=({alignment,isRtl,animated,isExiting,timingDuration})=>{const alignmentKeyframes=alignment?createKeyframes(isRtl,alignment):null;return aphrodite.StyleSheet.create({root:{boxShadow:theme.dialog.shadow.default,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,overflow:"auto",position:"relative",willChange:"transform, opacity",height:"100%",minHeight:"100vh",minWidth:wonderBlocksTokens.breakpoint.width.xsMax,maxWidth:wonderBlocksTokens.breakpoint.width.smMax,width:"100%",[wonderBlocksTokens.breakpoint.mediaQuery.smOrSmaller]:{minWidth:"unset",maxWidth:"unset"}},dialog:{minHeight:alignment==="blockEnd"?"unset":"100vh",minWidth:"unset"},inlineStart:{animationName:animated&&alignmentKeyframes&&(isExiting?alignmentKeyframes.slideOut:alignmentKeyframes.slideIn),animationDuration:`${timingDuration}ms`,animationTimingFunction:"linear",animationFillMode:"forwards"},inlineEnd:{animationName:animated&&alignmentKeyframes&&(isExiting?alignmentKeyframes.slideOut:alignmentKeyframes.slideIn),animationDuration:`${timingDuration}ms`,animationTimingFunction:"linear",animationFillMode:"forwards"},blockEnd:{animationName:animated&&alignmentKeyframes&&(isExiting?alignmentKeyframes.slideOut:alignmentKeyframes.slideIn),animationDuration:`${timingDuration}ms`,animationTimingFunction:"linear",animationFillMode:"forwards",height:"auto",minHeight:"unset",maxWidth:"unset",[wonderBlocksTokens.breakpoint.mediaQuery.smOrSmaller]:{height:"auto"}}})};DrawerDialog.displayName="DrawerDialog";
 
 function maybeGetNextAncestorModalLauncherPortal(element){let candidateElement=element&&element.parentElement;while(candidateElement&&!candidateElement.hasAttribute(ModalLauncherPortalAttributeName)){candidateElement=candidateElement.parentElement;}return candidateElement}function maybeGetPortalMountedModalHostElement(element){return maybeGetNextAncestorModalLauncherPortal(element)}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "8.3.1",
+  "version": "8.4.1",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -20,14 +20,14 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@khanacademy/wonder-blocks-breadcrumbs": "3.2.2",
+    "@khanacademy/wonder-blocks-breadcrumbs": "3.2.3",
     "@khanacademy/wonder-blocks-core": "12.4.0",
-    "@khanacademy/wonder-blocks-icon-button": "10.4.1",
-    "@khanacademy/wonder-blocks-layout": "3.1.35",
-    "@khanacademy/wonder-blocks-styles": "0.2.30",
+    "@khanacademy/wonder-blocks-icon-button": "10.4.2",
+    "@khanacademy/wonder-blocks-layout": "3.1.36",
+    "@khanacademy/wonder-blocks-styles": "0.2.31",
     "@khanacademy/wonder-blocks-timing": "7.0.2",
-    "@khanacademy/wonder-blocks-tokens": "12.2.1",
-    "@khanacademy/wonder-blocks-typography": "4.2.20"
+    "@khanacademy/wonder-blocks-tokens": "13.0.0",
+    "@khanacademy/wonder-blocks-typography": "4.2.21"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",