@khanacademy/wonder-blocks-modal 8.6.5 → 8.7.1

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

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-modal@8.6.5 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-modal
+> @khanacademy/wonder-blocks-modal@8.7.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,37 @@
 # @khanacademy/wonder-blocks-modal
 
+## 8.7.1
+
+### Patch Changes
+
+- 40cb70f: Add `require-logical-properties-for-rtl` ESLint rule to `eslint-plugin-wonder-blocks` recommended config, and migrate all Wonder Blocks component source files to use CSS logical properties for improved RTL layout support.
+- 40cb70f: Enable RTL logical-properties ESLint rule in recommended config
+- Updated dependencies [40cb70f]
+- Updated dependencies [40cb70f]
+    - @khanacademy/wonder-blocks-core@12.4.4
+    - @khanacademy/wonder-blocks-announcer@1.1.1
+    - @khanacademy/wonder-blocks-breadcrumbs@3.2.19
+    - @khanacademy/wonder-blocks-icon-button@11.3.1
+    - @khanacademy/wonder-blocks-layout@3.1.52
+    - @khanacademy/wonder-blocks-typography@4.3.5
+
+## 8.7.0
+
+### Minor Changes
+
+- 27a211d: Add support for SYL Dark theme
+
+### Patch Changes
+
+- Updated dependencies [44bde5e]
+- Updated dependencies [27a211d]
+    - @khanacademy/wonder-blocks-tokens@16.5.0
+    - @khanacademy/wonder-blocks-icon-button@11.3.0
+    - @khanacademy/wonder-blocks-breadcrumbs@3.2.18
+    - @khanacademy/wonder-blocks-layout@3.1.51
+    - @khanacademy/wonder-blocks-styles@0.2.45
+    - @khanacademy/wonder-blocks-typography@4.3.4
+
 ## 8.6.5
 
 ### Patch Changes

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

@@ -19,17 +19,17 @@ const theme$1={root:{border:{radius:border.radius.radius_040}},dialog:{layout:{p
 
 var theme = mapValuesToCssVars(theme$1,"--wb-c-modal-");
 
-const ModalDialog=React.forwardRef(function ModalDialog(props,ref){const{above,below,role="dialog",style,children,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy}=props;const{ariaModalRef}=useModalAnnouncer(ref);return jsx(View,{style:componentStyles$2.paddingLayer,"data-modal-padding-layer":true,children:jsxs(View,{style:[componentStyles$2.wrapper,style],children:[below&&jsx(View,{style:componentStyles$2.below,children:below}),jsx(View,{role:role,"aria-modal":"true","aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy,ref:ariaModalRef,style:componentStyles$2.dialog,testId:testId,children:children}),above&&jsx(View,{style:componentStyles$2.above,children:above})]})})});const componentStyles$2=StyleSheet.create({paddingLayer:{alignItems:"center",height:"100%",justifyContent:"center",width:"100%",[modalMediaQuery.midOrSmaller]:{padding:theme.dialog.layout.padding}},wrapper:{alignItems:"stretch",borderRadius:theme.root.border.radius,boxShadow:theme.dialog.shadow.default,color:semanticColor.core.foreground.neutral.strong,flexDirection:"row",height:"100%",position:"relative",width:"100%",[modalMediaQuery.midOrSmaller]:{flexDirection:"column"},[modalMediaQuery.smMinOrSmallerHeight]:{overflow:"auto"}},dialog:{width:"100%",height:"100%",borderRadius:theme.root.border.radius,overflow:"hidden",[modalMediaQuery.smMinOrSmallerHeight]:{overflow:"auto"}},above:{pointerEvents:"none",position:"absolute",top:0,left:0,bottom:0,right:0,zIndex:1},below:{pointerEvents:"none",position:"absolute",top:0,left:0,bottom:0,right:0,zIndex:-1}});ModalDialog.displayName="ModalDialog";
+const ModalDialog=React.forwardRef(function ModalDialog(props,ref){const{above,below,role="dialog",style,children,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy}=props;const{ariaModalRef}=useModalAnnouncer(ref);return jsx(View,{style:componentStyles$2.paddingLayer,"data-modal-padding-layer":true,children:jsxs(View,{style:[componentStyles$2.wrapper,style],children:[below&&jsx(View,{style:componentStyles$2.below,children:below}),jsx(View,{role:role,"aria-modal":"true","aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy,ref:ariaModalRef,style:componentStyles$2.dialog,testId:testId,children:children}),above&&jsx(View,{style:componentStyles$2.above,children:above})]})})});const componentStyles$2=StyleSheet.create({paddingLayer:{alignItems:"center",height:"100%",justifyContent:"center",width:"100%",[modalMediaQuery.midOrSmaller]:{padding:theme.dialog.layout.padding}},wrapper:{alignItems:"stretch",borderRadius:theme.root.border.radius,boxShadow:theme.dialog.shadow.default,color:semanticColor.core.foreground.neutral.strong,flexDirection:"row",height:"100%",position:"relative",width:"100%",[modalMediaQuery.midOrSmaller]:{flexDirection:"column"},[modalMediaQuery.smMinOrSmallerHeight]:{overflow:"auto"}},dialog:{width:"100%",height:"100%",borderRadius:theme.root.border.radius,overflow:"hidden",[modalMediaQuery.smMinOrSmallerHeight]:{overflow:"auto"}},above:{pointerEvents:"none",position:"absolute",insetBlockStart:0,insetInlineStart:0,insetBlockEnd:0,insetInlineEnd:0,zIndex:1},below:{pointerEvents:"none",position:"absolute",insetBlockStart:0,insetInlineStart:0,insetBlockEnd:0,insetInlineEnd:0,zIndex:-1}});ModalDialog.displayName="ModalDialog";
 
-function ModalFooter({children}){return jsx(View,{style:styles$7.footer,children:children})}ModalFooter.__IS_MODAL_FOOTER__=true;ModalFooter.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_FOOTER__};const styles$7=StyleSheet.create({footer:{flex:"0 0 auto",boxSizing:"border-box",marginBlockStart:"auto",minHeight:sizing.size_640,paddingInline:theme.footer.layout.padding.inline,paddingBlock:theme.footer.layout.padding.block,display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-end",boxShadow:`0px -1px 0px ${semanticColor.core.border.neutral.subtle}`}});
+function ModalFooter({children}){return jsx(View,{style:styles$7.footer,children:children})}ModalFooter.__IS_MODAL_FOOTER__=true;ModalFooter.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_FOOTER__};const styles$7=StyleSheet.create({footer:{flex:"0 0 auto",boxSizing:"border-box",marginBlockStart:"auto",minBlockSize:sizing.size_640,paddingInline:theme.footer.layout.padding.inline,paddingBlock:theme.footer.layout.padding.block,display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-end",boxShadow:`0px -1px 0px ${semanticColor.core.border.neutral.subtle}`}});
 
-function ModalHeader(props){const{breadcrumbs=undefined,subtitle=undefined,testId,title,titleId}=props;if(subtitle&&breadcrumbs){throw new Error("'subtitle' and 'breadcrumbs' can't be used together")}return jsxs(View,{style:[styles$6.header],testId:testId,children:[breadcrumbs&&jsx(View,{style:styles$6.breadcrumbs,children:breadcrumbs}),jsx(Heading,{size:"large",tag:"h2",style:styles$6.title,id:titleId,testId:testId&&`${testId}-title`,children:title}),subtitle&&jsx(BodyText,{size:"small",style:styles$6.subtitle,testId:testId&&`${testId}-subtitle`,children:subtitle})]})}const styles$6=StyleSheet.create({header:{boxShadow:`0px 1px 0px ${semanticColor.core.border.neutral.subtle}`,display:"flex",flexDirection:"column",minHeight:66,paddingBlock:theme.header.layout.padding.block,paddingInline:theme.header.layout.padding.inline.default,position:"relative",width:"100%",[modalMediaQuery.midOrSmaller]:{paddingInline:theme.header.layout.padding.inline.small},[modalMediaQuery.smMinOrSmallerHeight]:{minHeight:"unset"}},breadcrumbs:{color:semanticColor.core.foreground.neutral.default,marginBlockEnd:theme.header.layout.gap.default},title:{paddingInlineEnd:theme.header.layout.gap.title.default,[modalMediaQuery.midOrSmaller]:{paddingInlineEnd:theme.header.layout.gap.title.small}},subtitle:{color:semanticColor.core.foreground.neutral.default,marginBlockStart:theme.header.layout.gap.default}});
+function ModalHeader(props){const{breadcrumbs=undefined,subtitle=undefined,testId,title,titleId}=props;if(subtitle&&breadcrumbs){throw new Error("'subtitle' and 'breadcrumbs' can't be used together")}return jsxs(View,{style:[styles$6.header],testId:testId,children:[breadcrumbs&&jsx(View,{style:styles$6.breadcrumbs,children:breadcrumbs}),jsx(Heading,{size:"large",tag:"h2",style:styles$6.title,id:titleId,testId:testId&&`${testId}-title`,children:title}),subtitle&&jsx(BodyText,{size:"small",style:styles$6.subtitle,testId:testId&&`${testId}-subtitle`,children:subtitle})]})}const styles$6=StyleSheet.create({header:{boxShadow:`0px 1px 0px ${semanticColor.core.border.neutral.subtle}`,display:"flex",flexDirection:"column",minBlockSize:66,paddingBlock:theme.header.layout.padding.block,paddingInline:theme.header.layout.padding.inline.default,position:"relative",width:"100%",[modalMediaQuery.midOrSmaller]:{paddingInline:theme.header.layout.padding.inline.small},[modalMediaQuery.smMinOrSmallerHeight]:{minBlockSize:"unset"}},breadcrumbs:{color:semanticColor.core.foreground.neutral.default,marginBlockEnd:theme.header.layout.gap.default},title:{paddingInlineEnd:theme.header.layout.gap.title.default,[modalMediaQuery.midOrSmaller]:{paddingInlineEnd:theme.header.layout.gap.title.small}},subtitle:{color:semanticColor.core.foreground.neutral.default,marginBlockStart:theme.header.layout.gap.default}});
 
 const FOCUSABLE_ELEMENTS$1='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';const FocusTrap=({children,style})=>{const modalRootRef=React.useRef(null);const tryToFocus=React.useCallback(node=>{if(node instanceof HTMLElement){try{node.focus();}catch(e){}return document.activeElement===node}},[]);const focusElementIn=React.useCallback(isLast=>{if(!modalRootRef.current){return}const modalRootAsHtmlEl=modalRootRef.current;const focusableNodes=Array.from(modalRootAsHtmlEl.querySelectorAll(FOCUSABLE_ELEMENTS$1)).filter(element=>{const style=window.getComputedStyle(element);return style.display!=="none"&&style.visibility!=="hidden"});const nodeIndex=!isLast?focusableNodes.length-1:0;const focusableNode=focusableNodes[nodeIndex];tryToFocus(focusableNode);},[tryToFocus]);const handleFocusMoveToLast=React.useCallback(()=>{focusElementIn(false);},[focusElementIn]);const handleFocusMoveToFirst=React.useCallback(()=>{focusElementIn(true);},[focusElementIn]);const getModalRoot=React.useCallback(node=>{if(!node){return}const modalRoot=ReactDOM.findDOMNode(node);if(!modalRoot){throw new Error("Assertion error: modal root should exist after mount")}modalRootRef.current=modalRoot;},[]);return jsxs(React.Fragment,{children:[jsx("div",{tabIndex:0,className:"modal-focus-trap-first",onFocus:handleFocusMoveToLast,style:{position:"fixed"}}),jsx(View,{style:style,ref:getModalRoot,children:children}),jsx("div",{tabIndex:0,className:"modal-focus-trap-last",onFocus:handleFocusMoveToFirst,style:{position:"fixed"}})]})};
 
 const FOCUSABLE_ELEMENTS="a[href], details, input, textarea, select, button";function findFocusableNodes(root){return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS))}
 
-const getInitialFocusElement=(node,initialFocusId)=>{if(!initialFocusId){return null}return ReactDOM.findDOMNode(node.querySelector(`#${initialFocusId}`))};const getFirstFocusableElement=node=>{const focusableElements=findFocusableNodes(node);if(!focusableElements){return null}return focusableElements[0]};const getDialogElement=node=>{const dialogElement=ReactDOM.findDOMNode(node.querySelector('[role="dialog"]'));dialogElement?.setAttribute("tabindex","-1");return dialogElement};const ModalBackdrop=({children,initialFocusId,onCloseModal,testId})=>{const backdropRef=React.useRef(null);const[mousePressedOutside,setMousePressedOutside]=React.useState(false);React.useEffect(()=>{const node=ReactDOM.findDOMNode(backdropRef.current);if(!node){return}const firstFocusableElement=getInitialFocusElement(node,initialFocusId)||getFirstFocusableElement(node)||getDialogElement(node);setTimeout(()=>{firstFocusableElement?.focus();},0);},[initialFocusId]);const handleMouseDown=React.useCallback(e=>{const target=e.target;const isBackdropClick=e.target===e.currentTarget;const isPaddingLayerClick=target?.hasAttribute?.("data-modal-padding-layer");setMousePressedOutside(isBackdropClick||isPaddingLayerClick);},[]);const handleMouseUp=React.useCallback(e=>{const target=e.target;const isBackdropClick=e.target===e.currentTarget;const isPaddingLayerClick=target?.hasAttribute?.("data-modal-padding-layer");if((isBackdropClick||isPaddingLayerClick)&&mousePressedOutside){onCloseModal();}setMousePressedOutside(false);},[mousePressedOutside,onCloseModal]);const backdropProps={[ModalLauncherPortalAttributeName]:true};return jsx(View,{ref:backdropRef,style:styles$5.modalPositioner,onMouseDown:handleMouseDown,onMouseUp:handleMouseUp,testId:testId,...backdropProps,children:children})};const styles$5=StyleSheet.create({modalPositioner:{position:"fixed",left:0,top:0,width:"100%",height:"100%",alignItems:"center",justifyContent:"center",overflow:"auto",background:semanticColor.core.background.overlay.default}});
+const getInitialFocusElement=(node,initialFocusId)=>{if(!initialFocusId){return null}return ReactDOM.findDOMNode(node.querySelector(`#${initialFocusId}`))};const getFirstFocusableElement=node=>{const focusableElements=findFocusableNodes(node);if(!focusableElements){return null}return focusableElements[0]};const getDialogElement=node=>{const dialogElement=ReactDOM.findDOMNode(node.querySelector('[role="dialog"]'));dialogElement?.setAttribute("tabindex","-1");return dialogElement};const ModalBackdrop=({children,initialFocusId,onCloseModal,testId})=>{const backdropRef=React.useRef(null);const[mousePressedOutside,setMousePressedOutside]=React.useState(false);React.useEffect(()=>{const node=ReactDOM.findDOMNode(backdropRef.current);if(!node){return}const firstFocusableElement=getInitialFocusElement(node,initialFocusId)||getFirstFocusableElement(node)||getDialogElement(node);setTimeout(()=>{firstFocusableElement?.focus();},0);},[initialFocusId]);const handleMouseDown=React.useCallback(e=>{const target=e.target;const isBackdropClick=e.target===e.currentTarget;const isPaddingLayerClick=target?.hasAttribute?.("data-modal-padding-layer");setMousePressedOutside(isBackdropClick||isPaddingLayerClick);},[]);const handleMouseUp=React.useCallback(e=>{const target=e.target;const isBackdropClick=e.target===e.currentTarget;const isPaddingLayerClick=target?.hasAttribute?.("data-modal-padding-layer");if((isBackdropClick||isPaddingLayerClick)&&mousePressedOutside){onCloseModal();}setMousePressedOutside(false);},[mousePressedOutside,onCloseModal]);const backdropProps={[ModalLauncherPortalAttributeName]:true};return jsx(View,{ref:backdropRef,style:styles$5.modalPositioner,onMouseDown:handleMouseDown,onMouseUp:handleMouseUp,testId:testId,...backdropProps,children:children})};const styles$5=StyleSheet.create({modalPositioner:{position:"fixed",insetInlineStart:0,insetBlockStart:0,width:"100%",height:"100%",alignItems:"center",justifyContent:"center",overflow:"auto",background:semanticColor.core.background.overlay.default}});
 
 const needsHackyMobileSafariScrollDisabler=(()=>{if(typeof window==="undefined"){return false}const userAgent=window.navigator.userAgent;return userAgent.indexOf("iPad")>-1||userAgent.indexOf("iPhone")>-1})();let numModalsOpened=0;let oldOverflow;let oldPosition;let oldScrollY;let oldWidth;let oldTop;const ScrollDisabler=_props=>{React.useEffect(()=>{if(numModalsOpened===0){const body=document.body;if(!body){throw new Error("couldn't find document.body")}oldOverflow=body.style.overflow;oldScrollY=window.scrollY;if(needsHackyMobileSafariScrollDisabler){oldPosition=body.style.position;oldWidth=body.style.width;oldTop=body.style.top;}body.style.overflow="hidden";if(needsHackyMobileSafariScrollDisabler){body.style.position="fixed";body.style.width="100%";body.style.top=`${-oldScrollY}px`;}}numModalsOpened++;return ()=>{numModalsOpened--;if(numModalsOpened===0){const body=document.body;if(!body){throw new Error("couldn't find document.body")}body.style.overflow=oldOverflow;if(needsHackyMobileSafariScrollDisabler){body.style.position=oldPosition;body.style.width=oldWidth;body.style.top=oldTop;}if(typeof window!=="undefined"&&window.scrollTo){window.scrollTo(0,oldScrollY);}}}},[]);return null};
 
@@ -37,27 +37,27 @@ const defaultContext={closeModal:undefined};const ModalContext=React.createConte
 
 const ModalLauncher=props=>{const{backdropDismissEnabled=true,children,closedFocusId,initialFocusId,modal,onClose,opened:controlledOpened,schedule,testId}=props;const lastElementFocusedOutsideModalRef=React.useRef(null);const[opened,setOpened]=React.useState(false);const isOpened=typeof controlledOpened==="boolean"?controlledOpened:opened;React.useEffect(()=>{if(typeof controlledOpened==="boolean"&&children){console.warn("'children' and 'opened' can't be used together");}if(typeof controlledOpened==="boolean"&&!onClose){console.warn("'onClose' should be used with 'opened'");}if(typeof controlledOpened!=="boolean"&&!children){console.warn("either 'children' or 'opened' must be set");}},[controlledOpened,children,onClose]);const saveLastElementFocused=React.useCallback(()=>{lastElementFocusedOutsideModalRef.current=document.activeElement;},[]);React.useEffect(()=>{if(!opened&&controlledOpened){saveLastElementFocused();}},[controlledOpened,opened,saveLastElementFocused]);const openModal=React.useCallback(()=>{saveLastElementFocused();setOpened(true);},[saveLastElementFocused]);const returnFocus=React.useCallback(()=>{if(closedFocusId){const focusElement=ReactDOM.findDOMNode(document.getElementById(closedFocusId));if(focusElement){schedule.animationFrame(()=>focusElement.focus(),{schedulePolicy:SchedulePolicy.Immediately,clearPolicy:ClearPolicy.Resolve});return}}const lastElement=lastElementFocusedOutsideModalRef.current;if(lastElement!=null){schedule.animationFrame(()=>{lastElement.focus();});}},[closedFocusId,schedule]);const handleCloseModal=React.useCallback(()=>{setOpened(false);onClose?.();returnFocus();},[onClose,returnFocus]);const renderModal=React.useCallback(()=>{if(typeof modal==="function"){return modal({closeModal:handleCloseModal})}else {return modal}},[modal,handleCloseModal]);const renderedChildren=children?children({openModal}):null;const{body}=document;if(!body){return null}return jsxs(ModalContext.Provider,{value:{closeModal:handleCloseModal},children:[renderedChildren,isOpened&&ReactDOM.createPortal(jsx(FocusTrap,{style:styles$4.container,children:jsx(ModalBackdrop,{initialFocusId:initialFocusId,testId:testId,onCloseModal:backdropDismissEnabled?handleCloseModal:()=>{},children:renderModal()})}),body),isOpened&&jsx(ModalLauncherKeypressListener,{onClose:handleCloseModal}),isOpened&&jsx(ScrollDisabler,{})]})};const ModalLauncherKeypressListener=({onClose})=>{const handleKeyup=React.useCallback(e=>{if(e.key==="Escape"){e.preventDefault();e.stopPropagation();onClose();}},[onClose]);React.useEffect(()=>{window.addEventListener("keyup",handleKeyup);return ()=>{window.removeEventListener("keyup",handleKeyup);}},[handleKeyup]);return null};const styles$4=StyleSheet.create({container:{zIndex:1080}});var modalLauncher = withActionScheduler(ModalLauncher);
 
-function ModalContent(props){const{scrollOverflow,style,children,applySmallHeightStyles=true}=props;return jsx(View,{style:[styles$3.wrapper,scrollOverflow&&styles$3.scrollOverflow,applySmallHeightStyles&&styles$3.wrapperSmallHeight],children:jsx(View,{style:[styles$3.content,applySmallHeightStyles&&styles$3.contentSmallHeight,style],children:children})})}ModalContent.__IS_MODAL_CONTENT__=true;ModalContent.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_CONTENT__};const styles$3=StyleSheet.create({wrapper:{flex:1,display:"block"},wrapperSmallHeight:{[modalMediaQuery.smMinOrSmallerHeight]:{flex:"unset",minHeight:"unset",overflow:"unset"}},scrollOverflow:{overflow:"auto"},content:{flex:1,minHeight:"100%",padding:theme.panel.layout.gap.default,boxSizing:"border-box",[modalMediaQuery.midOrSmaller]:{paddingInline:theme.panel.layout.gap.small}},contentSmallHeight:{[modalMediaQuery.smMinOrSmallerHeight]:{flex:"unset",minHeight:"unset",overflow:"unset"}}});ModalContent.defaultProps={scrollOverflow:true,applySmallHeightStyles:true};
+function ModalContent(props){const{scrollOverflow,style,children,applySmallHeightStyles=true}=props;return jsx(View,{style:[styles$3.wrapper,scrollOverflow&&styles$3.scrollOverflow,applySmallHeightStyles&&styles$3.wrapperSmallHeight],children:jsx(View,{style:[styles$3.content,applySmallHeightStyles&&styles$3.contentSmallHeight,style],children:children})})}ModalContent.__IS_MODAL_CONTENT__=true;ModalContent.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_CONTENT__};const styles$3=StyleSheet.create({wrapper:{flex:1,display:"block"},wrapperSmallHeight:{[modalMediaQuery.smMinOrSmallerHeight]:{flex:"unset",minBlockSize:"unset",overflow:"unset"}},scrollOverflow:{overflow:"auto"},content:{flex:1,minBlockSize:"100%",padding:theme.panel.layout.gap.default,boxSizing:"border-box",[modalMediaQuery.midOrSmaller]:{paddingInline:theme.panel.layout.gap.small}},contentSmallHeight:{[modalMediaQuery.smMinOrSmallerHeight]:{flex:"unset",minBlockSize:"unset",overflow:"unset"}}});ModalContent.defaultProps={scrollOverflow:true,applySmallHeightStyles:true};
 
 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.default,boxSizing:"border-box",overflow:"hidden",height:"100%",width:"100%",[modalMediaQuery.smMinOrSmallerHeight]:{overflow:"auto"}},closeButton:{position:"absolute",insetInlineEnd:theme.closeButton.layout.gapRight,insetBlockStart: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.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,insetBlockStart: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{ariaModalRef}=useModalAnnouncer(ref);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:ariaModalRef,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%"}});
+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{ariaModalRef}=useModalAnnouncer(ref);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:ariaModalRef,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",maxBlockSize:"100vh",maxInlineSize:576,width:"93.75%"}});
 
 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)};
 
-const DrawerBackdrop=({children,testId,initialFocusId,onCloseModal})=>{const{alignment,animated,timingDuration,isExiting}=useDrawerContext();const[mousePressedOutside,setMousePressedOutside]=React.useState(false);const backdropRef=React.useRef(null);const computedTimingDuration=animated?timingDuration:0;const getInitialFocusElement=React.useCallback(container=>{if(!initialFocusId){return null}return container.querySelector(`#${initialFocusId}`)},[initialFocusId]);const getFirstFocusableElement=React.useCallback(container=>{const focusableElements=findFocusableNodes(container);if(!focusableElements){return null}return focusableElements[0]},[]);const getDialogElement=React.useCallback(container=>{const dialogElement=container.querySelector('[role="dialog"]');if(dialogElement){dialogElement.tabIndex=-1;}return dialogElement},[]);React.useEffect(()=>{const container=backdropRef.current;if(!container){return}const firstFocusableElement=getInitialFocusElement(container)||getFirstFocusableElement(container)||getDialogElement(container);if(firstFocusableElement){setTimeout(()=>{firstFocusableElement.focus();},computedTimingDuration);}},[getInitialFocusElement,getFirstFocusableElement,getDialogElement,computedTimingDuration]);const handleMouseDown=e=>{if(e.target===e.currentTarget){setMousePressedOutside(true);}};const handleMouseUp=e=>{if(e.target===e.currentTarget&&mousePressedOutside){onCloseModal();}setMousePressedOutside(false);};const backdropProps={[ModalLauncherPortalAttributeName]:true};return jsx(View,{ref:backdropRef,style:[styles.drawerPositioner,alignment&&styles[alignment],animated&&(isExiting?styles.fadeOut:styles.fadeIn)].filter(Boolean),onMouseDown:handleMouseDown,onMouseUp:handleMouseUp,testId:testId,...backdropProps,children:children})};const keyframes={fadeIn:{"0%":{opacity:0},"100%":{opacity:1}},fadeOut:{"0%":{opacity:1},"100%":{opacity:0}}};const styles=StyleSheet.create({drawerPositioner:{position:"fixed",left:0,top:0,width:"100%",height:"100%",display:"flex",overflow:"hidden",background:semanticColor.core.background.overlay.default},inlineStart:{alignItems:"flex-start",justifyContent:"flex-start"},inlineEnd:{alignItems:"flex-end",justifyContent:"flex-start"},blockEnd:{alignItems:"center",justifyContent:"flex-end"},fadeIn:{animationName:keyframes.fadeIn,animationDuration:"400ms",animationTimingFunction:"linear",animationFillMode:"forwards"},fadeOut:{animationName:keyframes.fadeOut,animationDuration:"400ms",animationTimingFunction:"linear",animationFillMode:"forwards"}});
+const DrawerBackdrop=({children,testId,initialFocusId,onCloseModal})=>{const{alignment,animated,timingDuration,isExiting}=useDrawerContext();const[mousePressedOutside,setMousePressedOutside]=React.useState(false);const backdropRef=React.useRef(null);const computedTimingDuration=animated?timingDuration:0;const getInitialFocusElement=React.useCallback(container=>{if(!initialFocusId){return null}return container.querySelector(`#${initialFocusId}`)},[initialFocusId]);const getFirstFocusableElement=React.useCallback(container=>{const focusableElements=findFocusableNodes(container);if(!focusableElements){return null}return focusableElements[0]},[]);const getDialogElement=React.useCallback(container=>{const dialogElement=container.querySelector('[role="dialog"]');if(dialogElement){dialogElement.tabIndex=-1;}return dialogElement},[]);React.useEffect(()=>{const container=backdropRef.current;if(!container){return}const firstFocusableElement=getInitialFocusElement(container)||getFirstFocusableElement(container)||getDialogElement(container);if(firstFocusableElement){setTimeout(()=>{firstFocusableElement.focus();},computedTimingDuration);}},[getInitialFocusElement,getFirstFocusableElement,getDialogElement,computedTimingDuration]);const handleMouseDown=e=>{if(e.target===e.currentTarget){setMousePressedOutside(true);}};const handleMouseUp=e=>{if(e.target===e.currentTarget&&mousePressedOutside){onCloseModal();}setMousePressedOutside(false);};const backdropProps={[ModalLauncherPortalAttributeName]:true};return jsx(View,{ref:backdropRef,style:[styles.drawerPositioner,alignment&&styles[alignment],animated&&(isExiting?styles.fadeOut:styles.fadeIn)].filter(Boolean),onMouseDown:handleMouseDown,onMouseUp:handleMouseUp,testId:testId,...backdropProps,children:children})};const keyframes={fadeIn:{"0%":{opacity:0},"100%":{opacity:1}},fadeOut:{"0%":{opacity:1},"100%":{opacity:0}}};const styles=StyleSheet.create({drawerPositioner:{position:"fixed",insetInlineStart:0,insetBlockStart:0,width:"100%",height:"100%",display:"flex",overflow:"hidden",background:semanticColor.core.background.overlay.default},inlineStart:{alignItems:"flex-start",justifyContent:"flex-start"},inlineEnd:{alignItems:"flex-end",justifyContent:"flex-start"},blockEnd:{alignItems:"center",justifyContent:"flex-end"},fadeIn:{animationName:keyframes.fadeIn,animationDuration:"400ms",animationTimingFunction:"linear",animationFillMode:"forwards"},fadeOut:{animationName:keyframes.fadeOut,animationDuration:"400ms",animationTimingFunction:"linear",animationFillMode:"forwards"}});
 
 const defaultProps={backdropDismissEnabled:DEFAULT_DRAWER_BACKDROP_DISMISS_ENABLED,defaultTimingDuration:DEFAULT_DRAWER_TIMING_DURATION_MS};const DrawerLauncher=props=>{const{modal,backdropDismissEnabled=defaultProps.backdropDismissEnabled,initialFocusId,closedFocusId,testId,opened:controlledOpened,onClose,children,schedule,alignment,styles,animated=DEFAULT_DRAWER_ANIMATED,timingDuration=defaultProps.defaultTimingDuration}=props;const[uncontrolledOpened,setUncontrolledOpened]=React.useState(false);const[isExiting,setIsExiting]=React.useState(false);const lastElementFocusedOutsideModalRef=React.useRef(null);const opened=typeof controlledOpened==="boolean"?controlledOpened:uncontrolledOpened;const saveLastElementFocused=React.useCallback(()=>{lastElementFocusedOutsideModalRef.current=document.activeElement;},[]);React.useEffect(()=>{if(controlledOpened&&!prevControlledOpened.current){saveLastElementFocused();}prevControlledOpened.current=controlledOpened;},[controlledOpened,saveLastElementFocused]);const prevControlledOpened=React.useRef(controlledOpened);const returnFocus=React.useCallback(()=>{const focusElement=closedFocusId?document.getElementById(closedFocusId):null;schedule.animationFrame(()=>{if(focusElement){focusElement.focus();}else if(lastElementFocusedOutsideModalRef.current){lastElementFocusedOutsideModalRef.current.focus();}});},[closedFocusId,schedule]);const handleCloseModal=React.useCallback(()=>{if(animated){setIsExiting(true);setTimeout(()=>{setIsExiting(false);if(typeof controlledOpened==="boolean"){onClose?.();}else {setUncontrolledOpened(false);onClose?.();}returnFocus();},timingDuration);}else {if(typeof controlledOpened==="boolean"){onClose?.();}else {setUncontrolledOpened(false);onClose?.();}returnFocus();}},[controlledOpened,onClose,returnFocus,animated,timingDuration]);const openModal=React.useCallback(()=>{saveLastElementFocused();setUncontrolledOpened(true);},[saveLastElementFocused]);const drawerDialogProps=React.useMemo(()=>({alignment,animated,isExiting,timingDuration}),[alignment,animated,isExiting,timingDuration]);const renderModal=React.useCallback(()=>{if(typeof modal==="function"){const renderedModal=modal({closeModal:handleCloseModal});if(!renderedModal){return null}return renderedModal}if(!modal){return null}return modal},[modal,handleCloseModal]);const renderedChildren=children?children({openModal}):null;const body=document.body;if(!body){return null}return jsxs(ModalContext.Provider,{value:{closeModal:handleCloseModal},children:[renderedChildren,opened&&!isExiting||opened&&isExiting&&animated?ReactDOM.createPortal(jsx(DrawerContext.Provider,{value:drawerDialogProps,children:jsx(FocusTrap,{style:styles?.container,children:jsx(DrawerBackdrop,{initialFocusId:initialFocusId,testId:testId,onCloseModal:backdropDismissEnabled?handleCloseModal:()=>{},children:renderModal()})})}),body):null,opened&&!isExiting&&jsxs(Fragment,{children:[jsx(DrawerLauncherKeypressListener,{onClose:handleCloseModal}),jsx(ScrollDisabler,{})]})]})};function DrawerLauncherKeypressListener({onClose}){React.useEffect(()=>{const handleKeyup=e=>{if(e.key==="Escape"){e.preventDefault();e.stopPropagation();onClose();}};window.addEventListener("keyup",handleKeyup);return ()=>window.removeEventListener("keyup",handleKeyup)},[onClose]);return null}DrawerLauncher.displayName="DrawerLauncher";var drawerLauncher = withActionScheduler(DrawerLauncher);
 
 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,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";
+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%",minBlockSize:"100vh",minInlineSize:breakpoint.width.xsMax,maxInlineSize:breakpoint.width.smMax,width:"100%",[breakpoint.mediaQuery.smOrSmaller]:{minInlineSize:"unset",maxInlineSize:"unset"}},dialog:{minBlockSize:alignment==="blockEnd"?"unset":"100vh",minInlineSize:"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",minBlockSize:"unset",maxInlineSize:"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

@@ -48,17 +48,17 @@ const theme$1={root:{border:{radius:wonderBlocksTokens.border.radius.radius_040}
 
 var theme = wonderBlocksTokens.mapValuesToCssVars(theme$1,"--wb-c-modal-");
 
-const ModalDialog=React__namespace.forwardRef(function ModalDialog(props,ref){const{above,below,role="dialog",style,children,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy}=props;const{ariaModalRef}=useModalAnnouncer(ref);return jsxRuntime.jsx(wonderBlocksCore.View,{style:componentStyles$2.paddingLayer,"data-modal-padding-layer":true,children:jsxRuntime.jsxs(wonderBlocksCore.View,{style:[componentStyles$2.wrapper,style],children:[below&&jsxRuntime.jsx(wonderBlocksCore.View,{style:componentStyles$2.below,children:below}),jsxRuntime.jsx(wonderBlocksCore.View,{role:role,"aria-modal":"true","aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy,ref:ariaModalRef,style:componentStyles$2.dialog,testId:testId,children:children}),above&&jsxRuntime.jsx(wonderBlocksCore.View,{style:componentStyles$2.above,children:above})]})})});const componentStyles$2=aphrodite.StyleSheet.create({paddingLayer:{alignItems:"center",height:"100%",justifyContent:"center",width:"100%",[modalMediaQuery.midOrSmaller]:{padding:theme.dialog.layout.padding}},wrapper:{alignItems:"stretch",borderRadius:theme.root.border.radius,boxShadow:theme.dialog.shadow.default,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,flexDirection:"row",height:"100%",position:"relative",width:"100%",[modalMediaQuery.midOrSmaller]:{flexDirection:"column"},[modalMediaQuery.smMinOrSmallerHeight]:{overflow:"auto"}},dialog:{width:"100%",height:"100%",borderRadius:theme.root.border.radius,overflow:"hidden",[modalMediaQuery.smMinOrSmallerHeight]:{overflow:"auto"}},above:{pointerEvents:"none",position:"absolute",top:0,left:0,bottom:0,right:0,zIndex:1},below:{pointerEvents:"none",position:"absolute",top:0,left:0,bottom:0,right:0,zIndex:-1}});ModalDialog.displayName="ModalDialog";
+const ModalDialog=React__namespace.forwardRef(function ModalDialog(props,ref){const{above,below,role="dialog",style,children,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy}=props;const{ariaModalRef}=useModalAnnouncer(ref);return jsxRuntime.jsx(wonderBlocksCore.View,{style:componentStyles$2.paddingLayer,"data-modal-padding-layer":true,children:jsxRuntime.jsxs(wonderBlocksCore.View,{style:[componentStyles$2.wrapper,style],children:[below&&jsxRuntime.jsx(wonderBlocksCore.View,{style:componentStyles$2.below,children:below}),jsxRuntime.jsx(wonderBlocksCore.View,{role:role,"aria-modal":"true","aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy,ref:ariaModalRef,style:componentStyles$2.dialog,testId:testId,children:children}),above&&jsxRuntime.jsx(wonderBlocksCore.View,{style:componentStyles$2.above,children:above})]})})});const componentStyles$2=aphrodite.StyleSheet.create({paddingLayer:{alignItems:"center",height:"100%",justifyContent:"center",width:"100%",[modalMediaQuery.midOrSmaller]:{padding:theme.dialog.layout.padding}},wrapper:{alignItems:"stretch",borderRadius:theme.root.border.radius,boxShadow:theme.dialog.shadow.default,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,flexDirection:"row",height:"100%",position:"relative",width:"100%",[modalMediaQuery.midOrSmaller]:{flexDirection:"column"},[modalMediaQuery.smMinOrSmallerHeight]:{overflow:"auto"}},dialog:{width:"100%",height:"100%",borderRadius:theme.root.border.radius,overflow:"hidden",[modalMediaQuery.smMinOrSmallerHeight]:{overflow:"auto"}},above:{pointerEvents:"none",position:"absolute",insetBlockStart:0,insetInlineStart:0,insetBlockEnd:0,insetInlineEnd:0,zIndex:1},below:{pointerEvents:"none",position:"absolute",insetBlockStart:0,insetInlineStart:0,insetBlockEnd:0,insetInlineEnd:0,zIndex:-1}});ModalDialog.displayName="ModalDialog";
 
-function ModalFooter({children}){return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles$7.footer,children:children})}ModalFooter.__IS_MODAL_FOOTER__=true;ModalFooter.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_FOOTER__};const styles$7=aphrodite.StyleSheet.create({footer:{flex:"0 0 auto",boxSizing:"border-box",marginBlockStart:"auto",minHeight:wonderBlocksTokens.sizing.size_640,paddingInline:theme.footer.layout.padding.inline,paddingBlock:theme.footer.layout.padding.block,display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-end",boxShadow:`0px -1px 0px ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`}});
+function ModalFooter({children}){return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles$7.footer,children:children})}ModalFooter.__IS_MODAL_FOOTER__=true;ModalFooter.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_FOOTER__};const styles$7=aphrodite.StyleSheet.create({footer:{flex:"0 0 auto",boxSizing:"border-box",marginBlockStart:"auto",minBlockSize:wonderBlocksTokens.sizing.size_640,paddingInline:theme.footer.layout.padding.inline,paddingBlock:theme.footer.layout.padding.block,display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-end",boxShadow:`0px -1px 0px ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`}});
 
-function ModalHeader(props){const{breadcrumbs=undefined,subtitle=undefined,testId,title,titleId}=props;if(subtitle&&breadcrumbs){throw new Error("'subtitle' and 'breadcrumbs' can't be used together")}return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles$6.header],testId:testId,children:[breadcrumbs&&jsxRuntime.jsx(wonderBlocksCore.View,{style:styles$6.breadcrumbs,children:breadcrumbs}),jsxRuntime.jsx(wonderBlocksTypography.Heading,{size:"large",tag:"h2",style:styles$6.title,id:titleId,testId:testId&&`${testId}-title`,children:title}),subtitle&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",style:styles$6.subtitle,testId:testId&&`${testId}-subtitle`,children:subtitle})]})}const styles$6=aphrodite.StyleSheet.create({header:{boxShadow:`0px 1px 0px ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,display:"flex",flexDirection:"column",minHeight:66,paddingBlock:theme.header.layout.padding.block,paddingInline:theme.header.layout.padding.inline.default,position:"relative",width:"100%",[modalMediaQuery.midOrSmaller]:{paddingInline:theme.header.layout.padding.inline.small},[modalMediaQuery.smMinOrSmallerHeight]:{minHeight:"unset"}},breadcrumbs:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,marginBlockEnd:theme.header.layout.gap.default},title:{paddingInlineEnd:theme.header.layout.gap.title.default,[modalMediaQuery.midOrSmaller]:{paddingInlineEnd:theme.header.layout.gap.title.small}},subtitle:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,marginBlockStart:theme.header.layout.gap.default}});
+function ModalHeader(props){const{breadcrumbs=undefined,subtitle=undefined,testId,title,titleId}=props;if(subtitle&&breadcrumbs){throw new Error("'subtitle' and 'breadcrumbs' can't be used together")}return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles$6.header],testId:testId,children:[breadcrumbs&&jsxRuntime.jsx(wonderBlocksCore.View,{style:styles$6.breadcrumbs,children:breadcrumbs}),jsxRuntime.jsx(wonderBlocksTypography.Heading,{size:"large",tag:"h2",style:styles$6.title,id:titleId,testId:testId&&`${testId}-title`,children:title}),subtitle&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",style:styles$6.subtitle,testId:testId&&`${testId}-subtitle`,children:subtitle})]})}const styles$6=aphrodite.StyleSheet.create({header:{boxShadow:`0px 1px 0px ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,display:"flex",flexDirection:"column",minBlockSize:66,paddingBlock:theme.header.layout.padding.block,paddingInline:theme.header.layout.padding.inline.default,position:"relative",width:"100%",[modalMediaQuery.midOrSmaller]:{paddingInline:theme.header.layout.padding.inline.small},[modalMediaQuery.smMinOrSmallerHeight]:{minBlockSize:"unset"}},breadcrumbs:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,marginBlockEnd:theme.header.layout.gap.default},title:{paddingInlineEnd:theme.header.layout.gap.title.default,[modalMediaQuery.midOrSmaller]:{paddingInlineEnd:theme.header.layout.gap.title.small}},subtitle:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,marginBlockStart:theme.header.layout.gap.default}});
 
 const FOCUSABLE_ELEMENTS$1='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';const FocusTrap=({children,style})=>{const modalRootRef=React__namespace.useRef(null);const tryToFocus=React__namespace.useCallback(node=>{if(node instanceof HTMLElement){try{node.focus();}catch(e){}return document.activeElement===node}},[]);const focusElementIn=React__namespace.useCallback(isLast=>{if(!modalRootRef.current){return}const modalRootAsHtmlEl=modalRootRef.current;const focusableNodes=Array.from(modalRootAsHtmlEl.querySelectorAll(FOCUSABLE_ELEMENTS$1)).filter(element=>{const style=window.getComputedStyle(element);return style.display!=="none"&&style.visibility!=="hidden"});const nodeIndex=!isLast?focusableNodes.length-1:0;const focusableNode=focusableNodes[nodeIndex];tryToFocus(focusableNode);},[tryToFocus]);const handleFocusMoveToLast=React__namespace.useCallback(()=>{focusElementIn(false);},[focusElementIn]);const handleFocusMoveToFirst=React__namespace.useCallback(()=>{focusElementIn(true);},[focusElementIn]);const getModalRoot=React__namespace.useCallback(node=>{if(!node){return}const modalRoot=ReactDOM__namespace.findDOMNode(node);if(!modalRoot){throw new Error("Assertion error: modal root should exist after mount")}modalRootRef.current=modalRoot;},[]);return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx("div",{tabIndex:0,className:"modal-focus-trap-first",onFocus:handleFocusMoveToLast,style:{position:"fixed"}}),jsxRuntime.jsx(wonderBlocksCore.View,{style:style,ref:getModalRoot,children:children}),jsxRuntime.jsx("div",{tabIndex:0,className:"modal-focus-trap-last",onFocus:handleFocusMoveToFirst,style:{position:"fixed"}})]})};
 
 const FOCUSABLE_ELEMENTS="a[href], details, input, textarea, select, button";function findFocusableNodes(root){return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS))}
 
-const getInitialFocusElement=(node,initialFocusId)=>{if(!initialFocusId){return null}return ReactDOM__namespace.findDOMNode(node.querySelector(`#${initialFocusId}`))};const getFirstFocusableElement=node=>{const focusableElements=findFocusableNodes(node);if(!focusableElements){return null}return focusableElements[0]};const getDialogElement=node=>{const dialogElement=ReactDOM__namespace.findDOMNode(node.querySelector('[role="dialog"]'));dialogElement?.setAttribute("tabindex","-1");return dialogElement};const ModalBackdrop=({children,initialFocusId,onCloseModal,testId})=>{const backdropRef=React__namespace.useRef(null);const[mousePressedOutside,setMousePressedOutside]=React__namespace.useState(false);React__namespace.useEffect(()=>{const node=ReactDOM__namespace.findDOMNode(backdropRef.current);if(!node){return}const firstFocusableElement=getInitialFocusElement(node,initialFocusId)||getFirstFocusableElement(node)||getDialogElement(node);setTimeout(()=>{firstFocusableElement?.focus();},0);},[initialFocusId]);const handleMouseDown=React__namespace.useCallback(e=>{const target=e.target;const isBackdropClick=e.target===e.currentTarget;const isPaddingLayerClick=target?.hasAttribute?.("data-modal-padding-layer");setMousePressedOutside(isBackdropClick||isPaddingLayerClick);},[]);const handleMouseUp=React__namespace.useCallback(e=>{const target=e.target;const isBackdropClick=e.target===e.currentTarget;const isPaddingLayerClick=target?.hasAttribute?.("data-modal-padding-layer");if((isBackdropClick||isPaddingLayerClick)&&mousePressedOutside){onCloseModal();}setMousePressedOutside(false);},[mousePressedOutside,onCloseModal]);const backdropProps={[ModalLauncherPortalAttributeName]:true};return jsxRuntime.jsx(wonderBlocksCore.View,{ref:backdropRef,style:styles$5.modalPositioner,onMouseDown:handleMouseDown,onMouseUp:handleMouseUp,testId:testId,...backdropProps,children:children})};const styles$5=aphrodite.StyleSheet.create({modalPositioner:{position:"fixed",left:0,top:0,width:"100%",height:"100%",alignItems:"center",justifyContent:"center",overflow:"auto",background:wonderBlocksTokens.semanticColor.core.background.overlay.default}});
+const getInitialFocusElement=(node,initialFocusId)=>{if(!initialFocusId){return null}return ReactDOM__namespace.findDOMNode(node.querySelector(`#${initialFocusId}`))};const getFirstFocusableElement=node=>{const focusableElements=findFocusableNodes(node);if(!focusableElements){return null}return focusableElements[0]};const getDialogElement=node=>{const dialogElement=ReactDOM__namespace.findDOMNode(node.querySelector('[role="dialog"]'));dialogElement?.setAttribute("tabindex","-1");return dialogElement};const ModalBackdrop=({children,initialFocusId,onCloseModal,testId})=>{const backdropRef=React__namespace.useRef(null);const[mousePressedOutside,setMousePressedOutside]=React__namespace.useState(false);React__namespace.useEffect(()=>{const node=ReactDOM__namespace.findDOMNode(backdropRef.current);if(!node){return}const firstFocusableElement=getInitialFocusElement(node,initialFocusId)||getFirstFocusableElement(node)||getDialogElement(node);setTimeout(()=>{firstFocusableElement?.focus();},0);},[initialFocusId]);const handleMouseDown=React__namespace.useCallback(e=>{const target=e.target;const isBackdropClick=e.target===e.currentTarget;const isPaddingLayerClick=target?.hasAttribute?.("data-modal-padding-layer");setMousePressedOutside(isBackdropClick||isPaddingLayerClick);},[]);const handleMouseUp=React__namespace.useCallback(e=>{const target=e.target;const isBackdropClick=e.target===e.currentTarget;const isPaddingLayerClick=target?.hasAttribute?.("data-modal-padding-layer");if((isBackdropClick||isPaddingLayerClick)&&mousePressedOutside){onCloseModal();}setMousePressedOutside(false);},[mousePressedOutside,onCloseModal]);const backdropProps={[ModalLauncherPortalAttributeName]:true};return jsxRuntime.jsx(wonderBlocksCore.View,{ref:backdropRef,style:styles$5.modalPositioner,onMouseDown:handleMouseDown,onMouseUp:handleMouseUp,testId:testId,...backdropProps,children:children})};const styles$5=aphrodite.StyleSheet.create({modalPositioner:{position:"fixed",insetInlineStart:0,insetBlockStart:0,width:"100%",height:"100%",alignItems:"center",justifyContent:"center",overflow:"auto",background:wonderBlocksTokens.semanticColor.core.background.overlay.default}});
 
 const needsHackyMobileSafariScrollDisabler=(()=>{if(typeof window==="undefined"){return false}const userAgent=window.navigator.userAgent;return userAgent.indexOf("iPad")>-1||userAgent.indexOf("iPhone")>-1})();let numModalsOpened=0;let oldOverflow;let oldPosition;let oldScrollY;let oldWidth;let oldTop;const ScrollDisabler=_props=>{React__namespace.useEffect(()=>{if(numModalsOpened===0){const body=document.body;if(!body){throw new Error("couldn't find document.body")}oldOverflow=body.style.overflow;oldScrollY=window.scrollY;if(needsHackyMobileSafariScrollDisabler){oldPosition=body.style.position;oldWidth=body.style.width;oldTop=body.style.top;}body.style.overflow="hidden";if(needsHackyMobileSafariScrollDisabler){body.style.position="fixed";body.style.width="100%";body.style.top=`${-oldScrollY}px`;}}numModalsOpened++;return ()=>{numModalsOpened--;if(numModalsOpened===0){const body=document.body;if(!body){throw new Error("couldn't find document.body")}body.style.overflow=oldOverflow;if(needsHackyMobileSafariScrollDisabler){body.style.position=oldPosition;body.style.width=oldWidth;body.style.top=oldTop;}if(typeof window!=="undefined"&&window.scrollTo){window.scrollTo(0,oldScrollY);}}}},[]);return null};
 
@@ -66,27 +66,27 @@ const defaultContext={closeModal:undefined};const ModalContext=React__namespace.
 
 const ModalLauncher=props=>{const{backdropDismissEnabled=true,children,closedFocusId,initialFocusId,modal,onClose,opened:controlledOpened,schedule,testId}=props;const lastElementFocusedOutsideModalRef=React__namespace.useRef(null);const[opened,setOpened]=React__namespace.useState(false);const isOpened=typeof controlledOpened==="boolean"?controlledOpened:opened;React__namespace.useEffect(()=>{if(typeof controlledOpened==="boolean"&&children){console.warn("'children' and 'opened' can't be used together");}if(typeof controlledOpened==="boolean"&&!onClose){console.warn("'onClose' should be used with 'opened'");}if(typeof controlledOpened!=="boolean"&&!children){console.warn("either 'children' or 'opened' must be set");}},[controlledOpened,children,onClose]);const saveLastElementFocused=React__namespace.useCallback(()=>{lastElementFocusedOutsideModalRef.current=document.activeElement;},[]);React__namespace.useEffect(()=>{if(!opened&&controlledOpened){saveLastElementFocused();}},[controlledOpened,opened,saveLastElementFocused]);const openModal=React__namespace.useCallback(()=>{saveLastElementFocused();setOpened(true);},[saveLastElementFocused]);const returnFocus=React__namespace.useCallback(()=>{if(closedFocusId){const focusElement=ReactDOM__namespace.findDOMNode(document.getElementById(closedFocusId));if(focusElement){schedule.animationFrame(()=>focusElement.focus(),{schedulePolicy:wonderBlocksTiming.SchedulePolicy.Immediately,clearPolicy:wonderBlocksTiming.ClearPolicy.Resolve});return}}const lastElement=lastElementFocusedOutsideModalRef.current;if(lastElement!=null){schedule.animationFrame(()=>{lastElement.focus();});}},[closedFocusId,schedule]);const handleCloseModal=React__namespace.useCallback(()=>{setOpened(false);onClose?.();returnFocus();},[onClose,returnFocus]);const renderModal=React__namespace.useCallback(()=>{if(typeof modal==="function"){return modal({closeModal:handleCloseModal})}else {return modal}},[modal,handleCloseModal]);const renderedChildren=children?children({openModal}):null;const{body}=document;if(!body){return null}return jsxRuntime.jsxs(ModalContext.Provider,{value:{closeModal:handleCloseModal},children:[renderedChildren,isOpened&&ReactDOM__namespace.createPortal(jsxRuntime.jsx(FocusTrap,{style:styles$4.container,children:jsxRuntime.jsx(ModalBackdrop,{initialFocusId:initialFocusId,testId:testId,onCloseModal:backdropDismissEnabled?handleCloseModal:()=>{},children:renderModal()})}),body),isOpened&&jsxRuntime.jsx(ModalLauncherKeypressListener,{onClose:handleCloseModal}),isOpened&&jsxRuntime.jsx(ScrollDisabler,{})]})};const ModalLauncherKeypressListener=({onClose})=>{const handleKeyup=React__namespace.useCallback(e=>{if(e.key==="Escape"){e.preventDefault();e.stopPropagation();onClose();}},[onClose]);React__namespace.useEffect(()=>{window.addEventListener("keyup",handleKeyup);return ()=>{window.removeEventListener("keyup",handleKeyup);}},[handleKeyup]);return null};const styles$4=aphrodite.StyleSheet.create({container:{zIndex:1080}});var modalLauncher = wonderBlocksTiming.withActionScheduler(ModalLauncher);
 
-function ModalContent(props){const{scrollOverflow,style,children,applySmallHeightStyles=true}=props;return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$3.wrapper,scrollOverflow&&styles$3.scrollOverflow,applySmallHeightStyles&&styles$3.wrapperSmallHeight],children:jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$3.content,applySmallHeightStyles&&styles$3.contentSmallHeight,style],children:children})})}ModalContent.__IS_MODAL_CONTENT__=true;ModalContent.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_CONTENT__};const styles$3=aphrodite.StyleSheet.create({wrapper:{flex:1,display:"block"},wrapperSmallHeight:{[modalMediaQuery.smMinOrSmallerHeight]:{flex:"unset",minHeight:"unset",overflow:"unset"}},scrollOverflow:{overflow:"auto"},content:{flex:1,minHeight:"100%",padding:theme.panel.layout.gap.default,boxSizing:"border-box",[modalMediaQuery.midOrSmaller]:{paddingInline:theme.panel.layout.gap.small}},contentSmallHeight:{[modalMediaQuery.smMinOrSmallerHeight]:{flex:"unset",minHeight:"unset",overflow:"unset"}}});ModalContent.defaultProps={scrollOverflow:true,applySmallHeightStyles:true};
+function ModalContent(props){const{scrollOverflow,style,children,applySmallHeightStyles=true}=props;return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$3.wrapper,scrollOverflow&&styles$3.scrollOverflow,applySmallHeightStyles&&styles$3.wrapperSmallHeight],children:jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$3.content,applySmallHeightStyles&&styles$3.contentSmallHeight,style],children:children})})}ModalContent.__IS_MODAL_CONTENT__=true;ModalContent.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_CONTENT__};const styles$3=aphrodite.StyleSheet.create({wrapper:{flex:1,display:"block"},wrapperSmallHeight:{[modalMediaQuery.smMinOrSmallerHeight]:{flex:"unset",minBlockSize:"unset",overflow:"unset"}},scrollOverflow:{overflow:"auto"},content:{flex:1,minBlockSize:"100%",padding:theme.panel.layout.gap.default,boxSizing:"border-box",[modalMediaQuery.midOrSmaller]:{paddingInline:theme.panel.layout.gap.small}},contentSmallHeight:{[modalMediaQuery.smMinOrSmallerHeight]:{flex:"unset",minBlockSize:"unset",overflow:"unset"}}});ModalContent.defaultProps={scrollOverflow:true,applySmallHeightStyles:true};
 
 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.default,boxSizing:"border-box",overflow:"hidden",height:"100%",width:"100%",[modalMediaQuery.smMinOrSmallerHeight]:{overflow:"auto"}},closeButton:{position:"absolute",insetInlineEnd:theme.closeButton.layout.gapRight,insetBlockStart: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.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,insetBlockStart: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{ariaModalRef}=useModalAnnouncer(ref);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:ariaModalRef,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%"}});
+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{ariaModalRef}=useModalAnnouncer(ref);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:ariaModalRef,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",maxBlockSize:"100vh",maxInlineSize:576,width:"93.75%"}});
 
 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)};
 
-const DrawerBackdrop=({children,testId,initialFocusId,onCloseModal})=>{const{alignment,animated,timingDuration,isExiting}=useDrawerContext();const[mousePressedOutside,setMousePressedOutside]=React__namespace.useState(false);const backdropRef=React__namespace.useRef(null);const computedTimingDuration=animated?timingDuration:0;const getInitialFocusElement=React__namespace.useCallback(container=>{if(!initialFocusId){return null}return container.querySelector(`#${initialFocusId}`)},[initialFocusId]);const getFirstFocusableElement=React__namespace.useCallback(container=>{const focusableElements=findFocusableNodes(container);if(!focusableElements){return null}return focusableElements[0]},[]);const getDialogElement=React__namespace.useCallback(container=>{const dialogElement=container.querySelector('[role="dialog"]');if(dialogElement){dialogElement.tabIndex=-1;}return dialogElement},[]);React__namespace.useEffect(()=>{const container=backdropRef.current;if(!container){return}const firstFocusableElement=getInitialFocusElement(container)||getFirstFocusableElement(container)||getDialogElement(container);if(firstFocusableElement){setTimeout(()=>{firstFocusableElement.focus();},computedTimingDuration);}},[getInitialFocusElement,getFirstFocusableElement,getDialogElement,computedTimingDuration]);const handleMouseDown=e=>{if(e.target===e.currentTarget){setMousePressedOutside(true);}};const handleMouseUp=e=>{if(e.target===e.currentTarget&&mousePressedOutside){onCloseModal();}setMousePressedOutside(false);};const backdropProps={[ModalLauncherPortalAttributeName]:true};return jsxRuntime.jsx(wonderBlocksCore.View,{ref:backdropRef,style:[styles.drawerPositioner,alignment&&styles[alignment],animated&&(isExiting?styles.fadeOut:styles.fadeIn)].filter(Boolean),onMouseDown:handleMouseDown,onMouseUp:handleMouseUp,testId:testId,...backdropProps,children:children})};const keyframes={fadeIn:{"0%":{opacity:0},"100%":{opacity:1}},fadeOut:{"0%":{opacity:1},"100%":{opacity:0}}};const styles=aphrodite.StyleSheet.create({drawerPositioner:{position:"fixed",left:0,top:0,width:"100%",height:"100%",display:"flex",overflow:"hidden",background:wonderBlocksTokens.semanticColor.core.background.overlay.default},inlineStart:{alignItems:"flex-start",justifyContent:"flex-start"},inlineEnd:{alignItems:"flex-end",justifyContent:"flex-start"},blockEnd:{alignItems:"center",justifyContent:"flex-end"},fadeIn:{animationName:keyframes.fadeIn,animationDuration:"400ms",animationTimingFunction:"linear",animationFillMode:"forwards"},fadeOut:{animationName:keyframes.fadeOut,animationDuration:"400ms",animationTimingFunction:"linear",animationFillMode:"forwards"}});
+const DrawerBackdrop=({children,testId,initialFocusId,onCloseModal})=>{const{alignment,animated,timingDuration,isExiting}=useDrawerContext();const[mousePressedOutside,setMousePressedOutside]=React__namespace.useState(false);const backdropRef=React__namespace.useRef(null);const computedTimingDuration=animated?timingDuration:0;const getInitialFocusElement=React__namespace.useCallback(container=>{if(!initialFocusId){return null}return container.querySelector(`#${initialFocusId}`)},[initialFocusId]);const getFirstFocusableElement=React__namespace.useCallback(container=>{const focusableElements=findFocusableNodes(container);if(!focusableElements){return null}return focusableElements[0]},[]);const getDialogElement=React__namespace.useCallback(container=>{const dialogElement=container.querySelector('[role="dialog"]');if(dialogElement){dialogElement.tabIndex=-1;}return dialogElement},[]);React__namespace.useEffect(()=>{const container=backdropRef.current;if(!container){return}const firstFocusableElement=getInitialFocusElement(container)||getFirstFocusableElement(container)||getDialogElement(container);if(firstFocusableElement){setTimeout(()=>{firstFocusableElement.focus();},computedTimingDuration);}},[getInitialFocusElement,getFirstFocusableElement,getDialogElement,computedTimingDuration]);const handleMouseDown=e=>{if(e.target===e.currentTarget){setMousePressedOutside(true);}};const handleMouseUp=e=>{if(e.target===e.currentTarget&&mousePressedOutside){onCloseModal();}setMousePressedOutside(false);};const backdropProps={[ModalLauncherPortalAttributeName]:true};return jsxRuntime.jsx(wonderBlocksCore.View,{ref:backdropRef,style:[styles.drawerPositioner,alignment&&styles[alignment],animated&&(isExiting?styles.fadeOut:styles.fadeIn)].filter(Boolean),onMouseDown:handleMouseDown,onMouseUp:handleMouseUp,testId:testId,...backdropProps,children:children})};const keyframes={fadeIn:{"0%":{opacity:0},"100%":{opacity:1}},fadeOut:{"0%":{opacity:1},"100%":{opacity:0}}};const styles=aphrodite.StyleSheet.create({drawerPositioner:{position:"fixed",insetInlineStart:0,insetBlockStart:0,width:"100%",height:"100%",display:"flex",overflow:"hidden",background:wonderBlocksTokens.semanticColor.core.background.overlay.default},inlineStart:{alignItems:"flex-start",justifyContent:"flex-start"},inlineEnd:{alignItems:"flex-end",justifyContent:"flex-start"},blockEnd:{alignItems:"center",justifyContent:"flex-end"},fadeIn:{animationName:keyframes.fadeIn,animationDuration:"400ms",animationTimingFunction:"linear",animationFillMode:"forwards"},fadeOut:{animationName:keyframes.fadeOut,animationDuration:"400ms",animationTimingFunction:"linear",animationFillMode:"forwards"}});
 
 const defaultProps={backdropDismissEnabled:DEFAULT_DRAWER_BACKDROP_DISMISS_ENABLED,defaultTimingDuration:DEFAULT_DRAWER_TIMING_DURATION_MS};const DrawerLauncher=props=>{const{modal,backdropDismissEnabled=defaultProps.backdropDismissEnabled,initialFocusId,closedFocusId,testId,opened:controlledOpened,onClose,children,schedule,alignment,styles,animated=DEFAULT_DRAWER_ANIMATED,timingDuration=defaultProps.defaultTimingDuration}=props;const[uncontrolledOpened,setUncontrolledOpened]=React__namespace.useState(false);const[isExiting,setIsExiting]=React__namespace.useState(false);const lastElementFocusedOutsideModalRef=React__namespace.useRef(null);const opened=typeof controlledOpened==="boolean"?controlledOpened:uncontrolledOpened;const saveLastElementFocused=React__namespace.useCallback(()=>{lastElementFocusedOutsideModalRef.current=document.activeElement;},[]);React__namespace.useEffect(()=>{if(controlledOpened&&!prevControlledOpened.current){saveLastElementFocused();}prevControlledOpened.current=controlledOpened;},[controlledOpened,saveLastElementFocused]);const prevControlledOpened=React__namespace.useRef(controlledOpened);const returnFocus=React__namespace.useCallback(()=>{const focusElement=closedFocusId?document.getElementById(closedFocusId):null;schedule.animationFrame(()=>{if(focusElement){focusElement.focus();}else if(lastElementFocusedOutsideModalRef.current){lastElementFocusedOutsideModalRef.current.focus();}});},[closedFocusId,schedule]);const handleCloseModal=React__namespace.useCallback(()=>{if(animated){setIsExiting(true);setTimeout(()=>{setIsExiting(false);if(typeof controlledOpened==="boolean"){onClose?.();}else {setUncontrolledOpened(false);onClose?.();}returnFocus();},timingDuration);}else {if(typeof controlledOpened==="boolean"){onClose?.();}else {setUncontrolledOpened(false);onClose?.();}returnFocus();}},[controlledOpened,onClose,returnFocus,animated,timingDuration]);const openModal=React__namespace.useCallback(()=>{saveLastElementFocused();setUncontrolledOpened(true);},[saveLastElementFocused]);const drawerDialogProps=React__namespace.useMemo(()=>({alignment,animated,isExiting,timingDuration}),[alignment,animated,isExiting,timingDuration]);const renderModal=React__namespace.useCallback(()=>{if(typeof modal==="function"){const renderedModal=modal({closeModal:handleCloseModal});if(!renderedModal){return null}return renderedModal}if(!modal){return null}return modal},[modal,handleCloseModal]);const renderedChildren=children?children({openModal}):null;const body=document.body;if(!body){return null}return jsxRuntime.jsxs(ModalContext.Provider,{value:{closeModal:handleCloseModal},children:[renderedChildren,opened&&!isExiting||opened&&isExiting&&animated?ReactDOM__namespace.createPortal(jsxRuntime.jsx(DrawerContext.Provider,{value:drawerDialogProps,children:jsxRuntime.jsx(FocusTrap,{style:styles?.container,children:jsxRuntime.jsx(DrawerBackdrop,{initialFocusId:initialFocusId,testId:testId,onCloseModal:backdropDismissEnabled?handleCloseModal:()=>{},children:renderModal()})})}),body):null,opened&&!isExiting&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(DrawerLauncherKeypressListener,{onClose:handleCloseModal}),jsxRuntime.jsx(ScrollDisabler,{})]})]})};function DrawerLauncherKeypressListener({onClose}){React__namespace.useEffect(()=>{const handleKeyup=e=>{if(e.key==="Escape"){e.preventDefault();e.stopPropagation();onClose();}};window.addEventListener("keyup",handleKeyup);return ()=>window.removeEventListener("keyup",handleKeyup)},[onClose]);return null}DrawerLauncher.displayName="DrawerLauncher";var drawerLauncher = wonderBlocksTiming.withActionScheduler(DrawerLauncher);
 
 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,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";
+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%",minBlockSize:"100vh",minInlineSize:wonderBlocksTokens.breakpoint.width.xsMax,maxInlineSize:wonderBlocksTokens.breakpoint.width.smMax,width:"100%",[wonderBlocksTokens.breakpoint.mediaQuery.smOrSmaller]:{minInlineSize:"unset",maxInlineSize:"unset"}},dialog:{minBlockSize:alignment==="blockEnd"?"unset":"100vh",minInlineSize:"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",minBlockSize:"unset",maxInlineSize:"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/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": "8.6.5",
+  "version": "8.7.1",
   "publishConfig": {
     "access": "public"
   },
@@ -28,15 +28,15 @@
     "./styles.css": "./dist/css/vars.css"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-announcer": "1.1.0",
-    "@khanacademy/wonder-blocks-breadcrumbs": "3.2.17",
-    "@khanacademy/wonder-blocks-core": "12.4.3",
-    "@khanacademy/wonder-blocks-icon-button": "11.2.4",
-    "@khanacademy/wonder-blocks-layout": "3.1.50",
-    "@khanacademy/wonder-blocks-styles": "0.2.44",
+    "@khanacademy/wonder-blocks-announcer": "1.1.1",
+    "@khanacademy/wonder-blocks-breadcrumbs": "3.2.19",
+    "@khanacademy/wonder-blocks-core": "12.4.4",
+    "@khanacademy/wonder-blocks-icon-button": "11.3.1",
+    "@khanacademy/wonder-blocks-layout": "3.1.52",
+    "@khanacademy/wonder-blocks-styles": "0.2.45",
     "@khanacademy/wonder-blocks-timing": "7.1.0",
-    "@khanacademy/wonder-blocks-tokens": "16.4.1",
-    "@khanacademy/wonder-blocks-typography": "4.3.3"
+    "@khanacademy/wonder-blocks-tokens": "16.5.0",
+    "@khanacademy/wonder-blocks-typography": "4.3.5"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",