@khanacademy/wonder-blocks-modal 7.1.11 → 7.1.13

package/dist/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
@@ -36,846 +36,46 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 
-const theme$1 = {
-  root: {
-    color: {
-      inverse: {
-        background: wonderBlocksTokens.semanticColor.surface.inverse,
-        foreground: wonderBlocksTokens.semanticColor.text.inverse
-      }
-    },
-    border: {
-      radius: wonderBlocksTokens.border.radius.radius_040
-    }
-  },
-  backdrop: {
-    color: {
-      background: wonderBlocksTokens.semanticColor.surface.overlay
-    }
-  },
-  dialog: {
-    spacing: {
-      padding: wonderBlocksTokens.spacing.medium_16
-    }
-  },
-  footer: {
-    color: {
-      border: wonderBlocksTokens.semanticColor.border.primary
-    }
-  },
-  header: {
-    color: {
-      border: wonderBlocksTokens.semanticColor.border.primary,
-      secondary: wonderBlocksTokens.semanticColor.text.secondary
-    },
-    spacing: {
-      paddingBlockMd: wonderBlocksTokens.spacing.large_24,
-      paddingInlineMd: wonderBlocksTokens.spacing.xLarge_32,
-      paddingInlineSm: wonderBlocksTokens.spacing.medium_16,
-      gap: wonderBlocksTokens.spacing.xSmall_8,
-      titleGapMd: wonderBlocksTokens.spacing.medium_16,
-      titleGapSm: wonderBlocksTokens.spacing.xLarge_32
-    }
-  },
-  panel: {
-    spacing: {
-      gap: wonderBlocksTokens.spacing.xLarge_32
-    }
-  },
-  closeButton: {
-    spacing: {
-      gap: wonderBlocksTokens.spacing.xSmall_8
-    }
-  }
-};
+const theme$1={root:{color:{inverse:{background:wonderBlocksTokens.semanticColor.surface.inverse,foreground:wonderBlocksTokens.semanticColor.text.inverse}},border:{radius:wonderBlocksTokens.border.radius.radius_040}},backdrop:{color:{background:wonderBlocksTokens.semanticColor.surface.overlay}},dialog:{spacing:{padding:wonderBlocksTokens.spacing.medium_16}},footer:{color:{border:wonderBlocksTokens.semanticColor.border.primary}},header:{color:{border:wonderBlocksTokens.semanticColor.border.primary,secondary:wonderBlocksTokens.semanticColor.text.secondary},spacing:{paddingBlockMd:wonderBlocksTokens.spacing.large_24,paddingInlineMd:wonderBlocksTokens.spacing.xLarge_32,paddingInlineSm:wonderBlocksTokens.spacing.medium_16,gap:wonderBlocksTokens.spacing.xSmall_8,titleGapMd:wonderBlocksTokens.spacing.medium_16,titleGapSm:wonderBlocksTokens.spacing.xLarge_32}},panel:{spacing:{gap:wonderBlocksTokens.spacing.xLarge_32}},closeButton:{spacing:{gap:wonderBlocksTokens.spacing.xSmall_8}}};
 
-const theme = wonderBlocksTheming.mergeTheme(theme$1, {
-  root: {
-    color: {
-      inverse: {
-        background: wonderBlocksTokens.semanticColor.khanmigo.primary
-      }
-    }
-  }
-});
+const theme=wonderBlocksTheming.mergeTheme(theme$1,{root:{color:{inverse:{background:wonderBlocksTokens.semanticColor.khanmigo.primary}}}});
 
-const themes = {
-  default: theme$1,
-  khanmigo: theme
-};
-const ModalDialogThemeContext = wonderBlocksTheming.createThemeContext(theme$1);
-function ThemeModalDialog(props) {
-  const currentTheme = React__namespace.useContext(wonderBlocksTheming.ThemeSwitcherContext);
-  const theme = themes[currentTheme] || theme$1;
-  return React__namespace.createElement(ModalDialogThemeContext.Provider, {
-    value: theme
-  }, props.children);
-}
+const themes={default:theme$1,khanmigo:theme};const ModalDialogThemeContext=wonderBlocksTheming.createThemeContext(theme$1);function ThemeModalDialog(props){const currentTheme=React__namespace.useContext(wonderBlocksTheming.ThemeSwitcherContext);const theme=themes[currentTheme]||theme$1;return jsxRuntime.jsx(ModalDialogThemeContext.Provider,{value:theme,children:props.children})}
 
-const ModalDialogCore = React__namespace.forwardRef(function ModalDialogCore(props, ref) {
-  const {
-    above,
-    below,
-    role = "dialog",
-    style,
-    children,
-    testId,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy
-  } = props;
-  const {
-    theme
-  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
-  const styles = wonderBlocksTheming.useStyles(themedStylesFn$5, theme);
-  return React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles.wrapper, style]
-  }, below && React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles.below
-  }, below), React__namespace.createElement(wonderBlocksCore.View, {
-    role: role,
-    "aria-modal": "true",
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
-    ref: ref,
-    style: styles.dialog,
-    testId: testId
-  }, children), above && React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles.above
-  }, above));
-});
-const ModalDialog = React__namespace.forwardRef(function ModalDialog(props, ref) {
-  return React__namespace.createElement(ThemeModalDialog, null, React__namespace.createElement(ModalDialogCore, _extends__default["default"]({}, props, {
-    ref: ref
-  })));
-});
-const small$2 = "@media (max-width: 767px)";
-const themedStylesFn$5 = theme => ({
-  wrapper: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "stretch",
-    width: "100%",
-    height: "100%",
-    position: "relative",
-    [small$2]: {
-      padding: theme.dialog.spacing.padding,
-      flexDirection: "column"
-    }
-  },
-  dialog: {
-    width: "100%",
-    height: "100%",
-    borderRadius: theme.root.border.radius,
-    overflow: "hidden"
-  },
-  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 ModalDialogCore=React__namespace.forwardRef(function ModalDialogCore(props,ref){const{above,below,role="dialog",style,children,testId,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy}=props;const{theme}=wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);const styles=wonderBlocksTheming.useStyles(themedStylesFn$5,theme);return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles.wrapper,style],children:[below&&jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.below,children:below}),jsxRuntime.jsx(wonderBlocksCore.View,{role:role,"aria-modal":"true","aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy,ref:ref,style:styles.dialog,testId:testId,children:children}),above&&jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.above,children:above})]})});const ModalDialog=React__namespace.forwardRef(function ModalDialog(props,ref){return jsxRuntime.jsx(ThemeModalDialog,{children:jsxRuntime.jsx(ModalDialogCore,{...props,ref:ref})})});const small$2="@media (max-width: 767px)";const themedStylesFn$5=theme=>({wrapper:{display:"flex",flexDirection:"row",alignItems:"stretch",width:"100%",height:"100%",position:"relative",[small$2]:{padding:theme.dialog.spacing.padding,flexDirection:"column"}},dialog:{width:"100%",height:"100%",borderRadius:theme.root.border.radius,overflow:"hidden"},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";
 
-function ModalFooter({
-  children
-}) {
-  const {
-    theme
-  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
-  const styles = wonderBlocksTheming.useStyles(themedStylesFn$4, theme);
-  return React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles.footer
-  }, children);
-}
-ModalFooter.__IS_MODAL_FOOTER__ = true;
-ModalFooter.isComponentOf = instance => {
-  return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
-};
-const themedStylesFn$4 = theme => ({
-  footer: {
-    flex: "0 0 auto",
-    boxSizing: "border-box",
-    minHeight: wonderBlocksTokens.spacing.xxxLarge_64,
-    paddingLeft: wonderBlocksTokens.spacing.medium_16,
-    paddingRight: wonderBlocksTokens.spacing.medium_16,
-    paddingTop: wonderBlocksTokens.spacing.xSmall_8,
-    paddingBottom: wonderBlocksTokens.spacing.xSmall_8,
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    boxShadow: `0px -1px 0px ${theme.footer.color.border}`
-  }
-});
+function ModalFooter({children}){const{theme}=wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);const styles=wonderBlocksTheming.useStyles(themedStylesFn$4,theme);return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.footer,children:children})}ModalFooter.__IS_MODAL_FOOTER__=true;ModalFooter.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_FOOTER__};const themedStylesFn$4=theme=>({footer:{flex:"0 0 auto",boxSizing:"border-box",minHeight:wonderBlocksTokens.spacing.xxxLarge_64,paddingLeft:wonderBlocksTokens.spacing.medium_16,paddingRight:wonderBlocksTokens.spacing.medium_16,paddingTop:wonderBlocksTokens.spacing.xSmall_8,paddingBottom:wonderBlocksTokens.spacing.xSmall_8,display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-end",boxShadow:`0px -1px 0px ${theme.footer.color.border}`}});
 
-function ModalHeader(props) {
-  const {
-    breadcrumbs = undefined,
-    light,
-    subtitle = undefined,
-    testId,
-    title,
-    titleId
-  } = props;
-  if (subtitle && breadcrumbs) {
-    throw new Error("'subtitle' and 'breadcrumbs' can't be used together");
-  }
-  const {
-    theme
-  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
-  const styles = wonderBlocksTheming.useStyles(themedStylesFn$3, theme);
-  return React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles.header, !light && styles.dark],
-    testId: testId
-  }, breadcrumbs && React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles.breadcrumbs
-  }, breadcrumbs), React__namespace.createElement(wonderBlocksTypography.HeadingMedium, {
-    tag: "h2",
-    style: styles.title,
-    id: titleId,
-    testId: testId && `${testId}-title`
-  }, title), subtitle && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: light && styles.subtitle,
-    testId: testId && `${testId}-subtitle`
-  }, subtitle));
-}
-const small$1 = "@media (max-width: 767px)";
-const themedStylesFn$3 = theme => ({
-  header: {
-    boxShadow: `0px 1px 0px ${theme.header.color.border}`,
-    display: "flex",
-    flexDirection: "column",
-    minHeight: 66,
-    paddingBlock: theme.header.spacing.paddingBlockMd,
-    paddingInline: theme.header.spacing.paddingInlineMd,
-    position: "relative",
-    width: "100%",
-    [small$1]: {
-      paddingInline: theme.header.spacing.paddingInlineSm
-    }
-  },
-  dark: {
-    background: theme.root.color.inverse.background,
-    color: theme.root.color.inverse.foreground
-  },
-  breadcrumbs: {
-    color: theme.header.color.secondary,
-    marginBottom: theme.header.spacing.gap
-  },
-  title: {
-    paddingRight: theme.header.spacing.titleGapMd,
-    [small$1]: {
-      paddingRight: theme.header.spacing.titleGapSm
-    }
-  },
-  subtitle: {
-    color: theme.header.color.secondary,
-    marginTop: theme.header.spacing.gap
-  }
-});
-ModalHeader.defaultProps = {
-  light: true
-};
+function ModalHeader(props){const{breadcrumbs=undefined,light,subtitle=undefined,testId,title,titleId}=props;if(subtitle&&breadcrumbs){throw new Error("'subtitle' and 'breadcrumbs' can't be used together")}const{theme}=wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);const styles=wonderBlocksTheming.useStyles(themedStylesFn$3,theme);return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles.header,!light&&styles.dark],testId:testId,children:[breadcrumbs&&jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.breadcrumbs,children:breadcrumbs}),jsxRuntime.jsx(wonderBlocksTypography.HeadingMedium,{tag:"h2",style:styles.title,id:titleId,testId:testId&&`${testId}-title`,children:title}),subtitle&&jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:light&&styles.subtitle,testId:testId&&`${testId}-subtitle`,children:subtitle})]})}const small$1="@media (max-width: 767px)";const themedStylesFn$3=theme=>({header:{boxShadow:`0px 1px 0px ${theme.header.color.border}`,display:"flex",flexDirection:"column",minHeight:66,paddingBlock:theme.header.spacing.paddingBlockMd,paddingInline:theme.header.spacing.paddingInlineMd,position:"relative",width:"100%",[small$1]:{paddingInline:theme.header.spacing.paddingInlineSm}},dark:{background:theme.root.color.inverse.background,color:theme.root.color.inverse.foreground},breadcrumbs:{color:theme.header.color.secondary,marginBottom:theme.header.spacing.gap},title:{paddingRight:theme.header.spacing.titleGapMd,[small$1]:{paddingRight:theme.header.spacing.titleGapSm}},subtitle:{color:theme.header.color.secondary,marginTop:theme.header.spacing.gap}});ModalHeader.defaultProps={light:true};
 
-const FOCUSABLE_ELEMENTS$1 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-class FocusTrap extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this.modalRoot = void 0;
-    this.getModalRoot = node => {
-      if (!node) {
-        return;
-      }
-      const modalRoot = ReactDOM__namespace.findDOMNode(node);
-      if (!modalRoot) {
-        throw new Error("Assertion error: modal root should exist after mount");
-      }
-      this.modalRoot = modalRoot;
-    };
-    this.handleFocusMoveToLast = () => {
-      this.focusElementIn(false);
-    };
-    this.handleFocusMoveToFirst = () => {
-      this.focusElementIn(true);
-    };
-  }
-  tryToFocus(node) {
-    if (node instanceof HTMLElement) {
-      try {
-        node.focus();
-      } catch (e) {}
-      return document.activeElement === node;
-    }
-  }
-  focusElementIn(isLast) {
-    const modalRootAsHtmlEl = this.modalRoot;
-    const focusableNodes = Array.from(modalRootAsHtmlEl.querySelectorAll(FOCUSABLE_ELEMENTS$1));
-    const nodeIndex = !isLast ? focusableNodes.length - 1 : 0;
-    const focusableNode = focusableNodes[nodeIndex];
-    this.tryToFocus(focusableNode);
-  }
-  render() {
-    const {
-      style
-    } = this.props;
-    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("div", {
-      tabIndex: 0,
-      className: "modal-focus-trap-first",
-      onFocus: this.handleFocusMoveToLast,
-      style: {
-        position: "fixed"
-      }
-    }), React__namespace.createElement(wonderBlocksCore.View, {
-      style: style,
-      ref: this.getModalRoot
-    }, this.props.children), React__namespace.createElement("div", {
-      tabIndex: 0,
-      className: "modal-focus-trap-last",
-      onFocus: this.handleFocusMoveToFirst,
-      style: {
-        position: "fixed"
-      }
-    }));
-  }
-}
+const FOCUSABLE_ELEMENTS$1='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';class FocusTrap extends React__namespace.Component{tryToFocus(node){if(node instanceof HTMLElement){try{node.focus();}catch(e){}return document.activeElement===node}}focusElementIn(isLast){const modalRootAsHtmlEl=this.modalRoot;const focusableNodes=Array.from(modalRootAsHtmlEl.querySelectorAll(FOCUSABLE_ELEMENTS$1));const nodeIndex=!isLast?focusableNodes.length-1:0;const focusableNode=focusableNodes[nodeIndex];this.tryToFocus(focusableNode);}render(){const{style}=this.props;return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx("div",{tabIndex:0,className:"modal-focus-trap-first",onFocus:this.handleFocusMoveToLast,style:{position:"fixed"}}),jsxRuntime.jsx(wonderBlocksCore.View,{style:style,ref:this.getModalRoot,children:this.props.children}),jsxRuntime.jsx("div",{tabIndex:0,className:"modal-focus-trap-last",onFocus:this.handleFocusMoveToFirst,style:{position:"fixed"}})]})}constructor(...args){super(...args),this.getModalRoot=node=>{if(!node){return}const modalRoot=ReactDOM__namespace.findDOMNode(node);if(!modalRoot){throw new Error("Assertion error: modal root should exist after mount")}this.modalRoot=modalRoot;},this.handleFocusMoveToLast=()=>{this.focusElementIn(false);},this.handleFocusMoveToFirst=()=>{this.focusElementIn(true);};}}
 
-const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
+const ModalLauncherPortalAttributeName="data-modal-launcher-portal";
 
-const FOCUSABLE_ELEMENTS = "a[href], details, input, textarea, select, button";
-function findFocusableNodes(root) {
-  return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
-}
+const FOCUSABLE_ELEMENTS="a[href], details, input, textarea, select, button";function findFocusableNodes(root){return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS))}
 
-class ModalBackdrop extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this._mousePressedOutside = false;
-    this.handleMouseDown = e => {
-      this._mousePressedOutside = e.target === e.currentTarget;
-    };
-    this.handleMouseUp = e => {
-      if (e.target === e.currentTarget && this._mousePressedOutside) {
-        this.props.onCloseModal();
-      }
-      this._mousePressedOutside = false;
-    };
-  }
-  componentDidMount() {
-    const node = ReactDOM__namespace.findDOMNode(this);
-    if (!node) {
-      return;
-    }
-    const firstFocusableElement = this._getInitialFocusElement(node) || this._getFirstFocusableElement(node) || this._getDialogElement(node);
-    setTimeout(() => {
-      firstFocusableElement.focus();
-    }, 0);
-  }
-  _getInitialFocusElement(node) {
-    const {
-      initialFocusId
-    } = this.props;
-    if (!initialFocusId) {
-      return null;
-    }
-    return ReactDOM__namespace.findDOMNode(node.querySelector(`#${initialFocusId}`));
-  }
-  _getFirstFocusableElement(node) {
-    const focusableElements = findFocusableNodes(node);
-    if (!focusableElements) {
-      return null;
-    }
-    return focusableElements[0];
-  }
-  _getDialogElement(node) {
-    const dialogElement = ReactDOM__namespace.findDOMNode(node.querySelector('[role="dialog"]'));
-    dialogElement.tabIndex = -1;
-    return dialogElement;
-  }
-  render() {
-    const {
-      children,
-      testId
-    } = this.props;
-    const backdropProps = {
-      [ModalLauncherPortalAttributeName]: true
-    };
-    return React__namespace.createElement(wonderBlocksCore.View, _extends__default["default"]({
-      style: this.props.wbThemeStyles.modalPositioner,
-      onMouseDown: this.handleMouseDown,
-      onMouseUp: this.handleMouseUp,
-      testId: testId
-    }, backdropProps), children);
-  }
-}
-const themedStylesFn$2 = theme => ({
-  modalPositioner: {
-    position: "fixed",
-    left: 0,
-    top: 0,
-    width: "100%",
-    height: "100%",
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "auto",
-    background: theme.backdrop.color.background
-  }
-});
-var ModalBackdrop$1 = wonderBlocksTheming.withScopedTheme(themedStylesFn$2, ModalDialogThemeContext)(ModalBackdrop);
+class ModalBackdrop extends React__namespace.Component{componentDidMount(){const node=ReactDOM__namespace.findDOMNode(this);if(!node){return}const firstFocusableElement=this._getInitialFocusElement(node)||this._getFirstFocusableElement(node)||this._getDialogElement(node);setTimeout(()=>{firstFocusableElement.focus();},0);}_getInitialFocusElement(node){const{initialFocusId}=this.props;if(!initialFocusId){return null}return ReactDOM__namespace.findDOMNode(node.querySelector(`#${initialFocusId}`))}_getFirstFocusableElement(node){const focusableElements=findFocusableNodes(node);if(!focusableElements){return null}return focusableElements[0]}_getDialogElement(node){const dialogElement=ReactDOM__namespace.findDOMNode(node.querySelector('[role="dialog"]'));dialogElement.tabIndex=-1;return dialogElement}render(){const{children,testId}=this.props;const backdropProps={[ModalLauncherPortalAttributeName]:true};return jsxRuntime.jsx(wonderBlocksCore.View,{style:this.props.wbThemeStyles.modalPositioner,onMouseDown:this.handleMouseDown,onMouseUp:this.handleMouseUp,testId:testId,...backdropProps,children:children})}constructor(...args){super(...args),this._mousePressedOutside=false,this.handleMouseDown=e=>{this._mousePressedOutside=e.target===e.currentTarget;},this.handleMouseUp=e=>{if(e.target===e.currentTarget&&this._mousePressedOutside){this.props.onCloseModal();}this._mousePressedOutside=false;};}}const themedStylesFn$2=theme=>({modalPositioner:{position:"fixed",left:0,top:0,width:"100%",height:"100%",alignItems:"center",justifyContent:"center",overflow:"auto",background:theme.backdrop.color.background}});var ModalBackdrop$1 = wonderBlocksTheming.withScopedTheme(themedStylesFn$2,ModalDialogThemeContext)(ModalBackdrop);
 
-const needsHackyMobileSafariScrollDisabler = (() => {
-  if (typeof window === "undefined") {
-    return false;
-  }
-  const userAgent = window.navigator.userAgent;
-  return userAgent.indexOf("iPad") > -1 || userAgent.indexOf("iPhone") > -1;
-})();
-class ScrollDisabler extends React__namespace.Component {
-  componentDidMount() {
-    if (ScrollDisabler.numModalsOpened === 0) {
-      const body = document.body;
-      if (!body) {
-        throw new Error("couldn't find document.body");
-      }
-      ScrollDisabler.oldOverflow = body.style.overflow;
-      ScrollDisabler.oldScrollY = window.scrollY;
-      if (needsHackyMobileSafariScrollDisabler) {
-        ScrollDisabler.oldPosition = body.style.position;
-        ScrollDisabler.oldWidth = body.style.width;
-        ScrollDisabler.oldTop = body.style.top;
-      }
-      body.style.overflow = "hidden";
-      if (needsHackyMobileSafariScrollDisabler) {
-        body.style.position = "fixed";
-        body.style.width = "100%";
-        body.style.top = `${-ScrollDisabler.oldScrollY}px`;
-      }
-    }
-    ScrollDisabler.numModalsOpened++;
-  }
-  componentWillUnmount() {
-    ScrollDisabler.numModalsOpened--;
-    if (ScrollDisabler.numModalsOpened === 0) {
-      const body = document.body;
-      if (!body) {
-        throw new Error("couldn't find document.body");
-      }
-      body.style.overflow = ScrollDisabler.oldOverflow;
-      if (needsHackyMobileSafariScrollDisabler) {
-        body.style.position = ScrollDisabler.oldPosition;
-        body.style.width = ScrollDisabler.oldWidth;
-        body.style.top = ScrollDisabler.oldTop;
-      }
-      if (typeof window !== "undefined" && window.scrollTo) {
-        window.scrollTo(0, ScrollDisabler.oldScrollY);
-      }
-    }
-  }
-  render() {
-    return null;
-  }
-}
-ScrollDisabler.oldOverflow = void 0;
-ScrollDisabler.oldPosition = void 0;
-ScrollDisabler.oldScrollY = void 0;
-ScrollDisabler.oldWidth = void 0;
-ScrollDisabler.oldTop = void 0;
-ScrollDisabler.numModalsOpened = 0;
+const needsHackyMobileSafariScrollDisabler=(()=>{if(typeof window==="undefined"){return false}const userAgent=window.navigator.userAgent;return userAgent.indexOf("iPad")>-1||userAgent.indexOf("iPhone")>-1})();class ScrollDisabler extends React__namespace.Component{componentDidMount(){if(ScrollDisabler.numModalsOpened===0){const body=document.body;if(!body){throw new Error("couldn't find document.body")}ScrollDisabler.oldOverflow=body.style.overflow;ScrollDisabler.oldScrollY=window.scrollY;if(needsHackyMobileSafariScrollDisabler){ScrollDisabler.oldPosition=body.style.position;ScrollDisabler.oldWidth=body.style.width;ScrollDisabler.oldTop=body.style.top;}body.style.overflow="hidden";if(needsHackyMobileSafariScrollDisabler){body.style.position="fixed";body.style.width="100%";body.style.top=`${-ScrollDisabler.oldScrollY}px`;}}ScrollDisabler.numModalsOpened++;}componentWillUnmount(){ScrollDisabler.numModalsOpened--;if(ScrollDisabler.numModalsOpened===0){const body=document.body;if(!body){throw new Error("couldn't find document.body")}body.style.overflow=ScrollDisabler.oldOverflow;if(needsHackyMobileSafariScrollDisabler){body.style.position=ScrollDisabler.oldPosition;body.style.width=ScrollDisabler.oldWidth;body.style.top=ScrollDisabler.oldTop;}if(typeof window!=="undefined"&&window.scrollTo){window.scrollTo(0,ScrollDisabler.oldScrollY);}}}render(){return null}}ScrollDisabler.numModalsOpened=0;
 
-const defaultContext = {
-  closeModal: undefined
-};
-const ModalContext = React__namespace.createContext(defaultContext);
-ModalContext.displayName = "ModalContext";
+const defaultContext={closeModal:undefined};const ModalContext=React__namespace.createContext(defaultContext);ModalContext.displayName="ModalContext";
 
-class ModalLauncher extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this.lastElementFocusedOutsideModal = void 0;
-    this.state = {
-      opened: false
-    };
-    this._saveLastElementFocused = () => {
-      this.lastElementFocusedOutsideModal = document.activeElement;
-    };
-    this._openModal = () => {
-      this._saveLastElementFocused();
-      this.setState({
-        opened: true
-      });
-    };
-    this._returnFocus = () => {
-      const {
-        closedFocusId,
-        schedule
-      } = this.props;
-      const lastElement = this.lastElementFocusedOutsideModal;
-      if (closedFocusId) {
-        const focusElement = ReactDOM__namespace.findDOMNode(document.getElementById(closedFocusId));
-        if (focusElement) {
-          schedule.animationFrame(() => {
-            focusElement.focus();
-          });
-          return;
-        }
-      }
-      if (lastElement != null) {
-        schedule.animationFrame(() => {
-          lastElement.focus();
-        });
-      }
-    };
-    this.handleCloseModal = () => {
-      this.setState({
-        opened: false
-      }, () => {
-        const {
-          onClose
-        } = this.props;
-        onClose == null || onClose();
-        this._returnFocus();
-      });
-    };
-  }
-  static getDerivedStateFromProps(props, state) {
-    if (typeof props.opened === "boolean" && props.children) {
-      console.warn("'children' and 'opened' can't be used together");
-    }
-    if (typeof props.opened === "boolean" && !props.onClose) {
-      console.warn("'onClose' should be used with 'opened'");
-    }
-    if (typeof props.opened !== "boolean" && !props.children) {
-      console.warn("either 'children' or 'opened' must be set");
-    }
-    return {
-      opened: typeof props.opened === "boolean" ? props.opened : state.opened
-    };
-  }
-  componentDidUpdate(prevProps) {
-    if (!prevProps.opened && this.props.opened) {
-      this._saveLastElementFocused();
-    }
-  }
-  _renderModal() {
-    if (typeof this.props.modal === "function") {
-      return this.props.modal({
-        closeModal: this.handleCloseModal
-      });
-    } else {
-      return this.props.modal;
-    }
-  }
-  render() {
-    const renderedChildren = this.props.children ? this.props.children({
-      openModal: this._openModal
-    }) : null;
-    const {
-      body
-    } = document;
-    if (!body) {
-      return null;
-    }
-    return React__namespace.createElement(ModalContext.Provider, {
-      value: {
-        closeModal: this.handleCloseModal
-      }
-    }, renderedChildren, this.state.opened && ReactDOM__namespace.createPortal(React__namespace.createElement(FocusTrap, {
-      style: styles.container
-    }, React__namespace.createElement(ModalBackdrop$1, {
-      initialFocusId: this.props.initialFocusId,
-      testId: this.props.testId,
-      onCloseModal: this.props.backdropDismissEnabled ? this.handleCloseModal : () => {}
-    }, this._renderModal())), body), this.state.opened && React__namespace.createElement(ModalLauncherKeypressListener, {
-      onClose: this.handleCloseModal
-    }), this.state.opened && React__namespace.createElement(ScrollDisabler, null));
-  }
-}
-ModalLauncher.defaultProps = {
-  backdropDismissEnabled: true
-};
-class ModalLauncherKeypressListener extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this._handleKeyup = e => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        e.stopPropagation();
-        this.props.onClose();
-      }
-    };
-  }
-  componentDidMount() {
-    window.addEventListener("keyup", this._handleKeyup);
-  }
-  componentWillUnmount() {
-    window.removeEventListener("keyup", this._handleKeyup);
-  }
-  render() {
-    return null;
-  }
-}
-const styles = aphrodite.StyleSheet.create({
-  container: {
-    zIndex: 1080
-  }
-});
-var modalLauncher = wonderBlocksTiming.withActionScheduler(ModalLauncher);
+class ModalLauncher extends React__namespace.Component{static getDerivedStateFromProps(props,state){if(typeof props.opened==="boolean"&&props.children){console.warn("'children' and 'opened' can't be used together");}if(typeof props.opened==="boolean"&&!props.onClose){console.warn("'onClose' should be used with 'opened'");}if(typeof props.opened!=="boolean"&&!props.children){console.warn("either 'children' or 'opened' must be set");}return {opened:typeof props.opened==="boolean"?props.opened:state.opened}}componentDidUpdate(prevProps){if(!prevProps.opened&&this.props.opened){this._saveLastElementFocused();}}_renderModal(){if(typeof this.props.modal==="function"){return this.props.modal({closeModal:this.handleCloseModal})}else {return this.props.modal}}render(){const renderedChildren=this.props.children?this.props.children({openModal:this._openModal}):null;const{body}=document;if(!body){return null}return jsxRuntime.jsxs(ModalContext.Provider,{value:{closeModal:this.handleCloseModal},children:[renderedChildren,this.state.opened&&ReactDOM__namespace.createPortal(jsxRuntime.jsx(FocusTrap,{style:styles.container,children:jsxRuntime.jsx(ModalBackdrop$1,{initialFocusId:this.props.initialFocusId,testId:this.props.testId,onCloseModal:this.props.backdropDismissEnabled?this.handleCloseModal:()=>{},children:this._renderModal()})}),body),this.state.opened&&jsxRuntime.jsx(ModalLauncherKeypressListener,{onClose:this.handleCloseModal}),this.state.opened&&jsxRuntime.jsx(ScrollDisabler,{})]})}constructor(...args){super(...args),this.state={opened:false},this._saveLastElementFocused=()=>{this.lastElementFocusedOutsideModal=document.activeElement;},this._openModal=()=>{this._saveLastElementFocused();this.setState({opened:true});},this._returnFocus=()=>{const{closedFocusId,schedule}=this.props;const lastElement=this.lastElementFocusedOutsideModal;if(closedFocusId){const focusElement=ReactDOM__namespace.findDOMNode(document.getElementById(closedFocusId));if(focusElement){schedule.animationFrame(()=>{focusElement.focus();});return}}if(lastElement!=null){schedule.animationFrame(()=>{lastElement.focus();});}},this.handleCloseModal=()=>{this.setState({opened:false},()=>{const{onClose}=this.props;onClose?.();this._returnFocus();});};}}ModalLauncher.defaultProps={backdropDismissEnabled:true};class ModalLauncherKeypressListener extends React__namespace.Component{componentDidMount(){window.addEventListener("keyup",this._handleKeyup);}componentWillUnmount(){window.removeEventListener("keyup",this._handleKeyup);}render(){return null}constructor(...args){super(...args),this._handleKeyup=e=>{if(e.key==="Escape"){e.preventDefault();e.stopPropagation();this.props.onClose();}};}}const styles=aphrodite.StyleSheet.create({container:{zIndex:1080}});var modalLauncher = wonderBlocksTiming.withActionScheduler(ModalLauncher);
 
-function ModalContent(props) {
-  const {
-    scrollOverflow,
-    style,
-    children
-  } = props;
-  const {
-    theme
-  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
-  const styles = wonderBlocksTheming.useStyles(themedStylesFn$1, theme);
-  return React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles.wrapper, scrollOverflow && styles.scrollOverflow]
-  }, React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles.content, style]
-  }, children));
-}
-ModalContent.__IS_MODAL_CONTENT__ = true;
-ModalContent.isComponentOf = instance => {
-  return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
-};
-const small = "@media (max-width: 767px)";
-const themedStylesFn$1 = theme => ({
-  wrapper: {
-    flex: 1,
-    display: "block"
-  },
-  scrollOverflow: {
-    overflow: "auto"
-  },
-  content: {
-    flex: 1,
-    minHeight: "100%",
-    padding: wonderBlocksTokens.spacing.xLarge_32,
-    boxSizing: "border-box",
-    [small]: {
-      padding: `${wonderBlocksTokens.spacing.xLarge_32}px ${wonderBlocksTokens.spacing.medium_16}px`
-    }
-  }
-});
-ModalContent.defaultProps = {
-  scrollOverflow: true
-};
+function ModalContent(props){const{scrollOverflow,style,children}=props;const{theme}=wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);const styles=wonderBlocksTheming.useStyles(themedStylesFn$1,theme);return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.wrapper,scrollOverflow&&styles.scrollOverflow],children:jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.content,style],children:children})})}ModalContent.__IS_MODAL_CONTENT__=true;ModalContent.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_CONTENT__};const small="@media (max-width: 767px)";const themedStylesFn$1=theme=>({wrapper:{flex:1,display:"block"},scrollOverflow:{overflow:"auto"},content:{flex:1,minHeight:"100%",padding:wonderBlocksTokens.spacing.xLarge_32,boxSizing:"border-box",[small]:{padding:`${wonderBlocksTokens.spacing.xLarge_32}px ${wonderBlocksTokens.spacing.medium_16}px`}}});ModalContent.defaultProps={scrollOverflow:true};
 
-class CloseButton extends React__namespace.Component {
-  render() {
-    const {
-      onClick,
-      style,
-      testId
-    } = this.props;
-    return React__namespace.createElement(ModalContext.Consumer, null, ({
-      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 React__namespace.createElement(IconButton__default["default"], {
-        icon: xIcon__default["default"],
-        "aria-label": "Close modal",
-        onClick: onClick || closeModal,
-        kind: "tertiary",
-        actionType: "neutral",
-        style: style,
-        testId: testId
-      });
-    });
-  }
-}
+class CloseButton extends React__namespace.Component{render(){const{onClick,style,testId}=this.props;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,
-  light = true,
-  content,
-  footer,
-  header,
-  onClose,
-  style,
-  testId
-}) {
-  const {
-    theme
-  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
-  const styles = wonderBlocksTheming.useStyles(themedStylesFn, theme);
-  const renderMainContent = React__namespace.useCallback(() => {
-    const mainContent = ModalContent.isComponentOf(content) ? content : React__namespace.createElement(ModalContent, null, content);
-    if (!mainContent) {
-      return mainContent;
-    }
-    return React__namespace.cloneElement(mainContent, {
-      scrollOverflow,
-      style: [!!footer && styles.hasFooter, mainContent.props.style]
-    });
-  }, [content, footer, scrollOverflow, styles.hasFooter]);
-  const mainContent = renderMainContent();
-  const isInverse = !light;
-  return React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles.wrapper, isInverse && styles.dark, style],
-    testId: testId && `${testId}-panel`
-  }, closeButtonVisible && React__namespace.createElement(CloseButton, {
-    onClick: onClose,
-    style: [styles.closeButton, isInverse && wonderBlocksStyles.actionStyles.inverse],
-    testId: testId && `${testId}-close`
-  }), header, mainContent, !footer || ModalFooter.isComponentOf(footer) ? footer : React__namespace.createElement(ModalFooter, null, footer));
-}
-ModalPanel.defaultProps = {
-  closeButtonVisible: true,
-  scrollOverflow: true,
-  light: true
-};
-const themedStylesFn = theme => ({
-  wrapper: {
-    flex: "1 1 auto",
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
-    background: "white",
-    boxSizing: "border-box",
-    overflow: "hidden",
-    height: "100%",
-    width: "100%"
-  },
-  closeButton: {
-    position: "absolute",
-    right: theme.closeButton.spacing.gap,
-    top: theme.closeButton.spacing.gap,
-    zIndex: 1,
-    ":focus": _extends__default["default"]({}, wonderBlocksStyles.focusStyles.focus[":focus-visible"])
-  },
-  dark: {
-    background: theme.root.color.inverse.background,
-    color: theme.root.color.inverse.foreground
-  },
-  hasFooter: {
-    paddingBlockEnd: theme.panel.spacing.gap
-  }
-});
+function ModalPanel({closeButtonVisible=true,scrollOverflow=true,light=true,content,footer,header,onClose,style,testId}){const{theme}=wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);const styles=wonderBlocksTheming.useStyles(themedStylesFn,theme);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.hasFooter,mainContent.props.style]})},[content,footer,scrollOverflow,styles.hasFooter]);const mainContent=renderMainContent();const isInverse=!light;return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles.wrapper,isInverse&&styles.dark,style],testId:testId&&`${testId}-panel`,children:[closeButtonVisible&&jsxRuntime.jsx(CloseButton,{onClick:onClose,style:[styles.closeButton,isInverse&&wonderBlocksStyles.actionStyles.inverse],testId:testId&&`${testId}-close`}),header,mainContent,!footer||ModalFooter.isComponentOf(footer)?footer:jsxRuntime.jsx(ModalFooter,{children:footer})]})}ModalPanel.defaultProps={closeButtonVisible:true,scrollOverflow:true,light:true};const themedStylesFn=theme=>({wrapper:{flex:"1 1 auto",position:"relative",display:"flex",flexDirection:"column",background:"white",boxSizing:"border-box",overflow:"hidden",height:"100%",width:"100%"},closeButton:{position:"absolute",right:theme.closeButton.spacing.gap,top:theme.closeButton.spacing.gap,zIndex:1,":focus":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"]}},dark:{background:theme.root.color.inverse.background,color:theme.root.color.inverse.foreground},hasFooter:{paddingBlockEnd:theme.panel.spacing.gap}});
 
-class OnePaneDialog extends React__namespace.Component {
-  renderHeader(uniqueId) {
-    const {
-      title,
-      breadcrumbs = undefined,
-      subtitle = undefined,
-      testId
-    } = this.props;
-    if (breadcrumbs) {
-      return React__namespace.createElement(ModalHeader, {
-        title: title,
-        breadcrumbs: breadcrumbs,
-        titleId: uniqueId,
-        testId: testId && `${testId}-header`
-      });
-    } else if (subtitle) {
-      return React__namespace.createElement(ModalHeader, {
-        title: title,
-        subtitle: subtitle,
-        titleId: uniqueId,
-        testId: testId && `${testId}-header`
-      });
-    } else {
-      return React__namespace.createElement(ModalHeader, {
-        title: title,
-        titleId: uniqueId,
-        testId: testId && `${testId}-header`
-      });
-    }
-  }
-  render() {
-    const {
-      onClose,
-      footer,
-      content,
-      above,
-      below,
-      style,
-      closeButtonVisible,
-      testId,
-      titleId,
-      role,
-      "aria-describedby": ariaDescribedBy
-    } = this.props;
-    return React__namespace.createElement(wonderBlocksLayout.MediaLayout, {
-      styleSheets: styleSheets
-    }, ({
-      styles
-    }) => React__namespace.createElement(wonderBlocksCore.Id, {
-      id: titleId
-    }, uniqueId => React__namespace.createElement(ModalDialog, {
-      style: [styles.dialog, style],
-      above: above,
-      below: below,
-      testId: testId,
-      "aria-labelledby": uniqueId,
-      "aria-describedby": ariaDescribedBy,
-      role: role
-    }, React__namespace.createElement(ModalPanel, {
-      onClose: onClose,
-      header: this.renderHeader(uniqueId),
-      content: content,
-      footer: footer,
-      closeButtonVisible: closeButtonVisible,
-      testId: testId
-    }))));
-  }
-}
-OnePaneDialog.defaultProps = {
-  closeButtonVisible: true
-};
-const styleSheets = {
-  small: aphrodite.StyleSheet.create({
-    dialog: {
-      width: "100%",
-      height: "100%",
-      overflow: "hidden"
-    }
-  }),
-  mdOrLarger: aphrodite.StyleSheet.create({
-    dialog: {
-      width: "93.75%",
-      maxWidth: 576,
-      height: "81.25%",
-      maxHeight: 624
-    }
-  })
-};
+class OnePaneDialog extends React__namespace.Component{renderHeader(uniqueId){const{title,breadcrumbs=undefined,subtitle=undefined,testId}=this.props;if(breadcrumbs){return jsxRuntime.jsx(ModalHeader,{title:title,breadcrumbs:breadcrumbs,titleId:uniqueId,testId:testId&&`${testId}-header`})}else if(subtitle){return jsxRuntime.jsx(ModalHeader,{title:title,subtitle:subtitle,titleId:uniqueId,testId:testId&&`${testId}-header`})}else {return jsxRuntime.jsx(ModalHeader,{title:title,titleId:uniqueId,testId:testId&&`${testId}-header`})}}render(){const{onClose,footer,content,above,below,style,closeButtonVisible,testId,titleId,role,"aria-describedby":ariaDescribedBy}=this.props;return jsxRuntime.jsx(wonderBlocksLayout.MediaLayout,{styleSheets:styleSheets,children:({styles})=>jsxRuntime.jsx(wonderBlocksCore.Id,{id:titleId,children:uniqueId=>jsxRuntime.jsx(ModalDialog,{style:[styles.dialog,style],above:above,below:below,testId:testId,"aria-labelledby":uniqueId,"aria-describedby":ariaDescribedBy,role:role,children:jsxRuntime.jsx(ModalPanel,{onClose:onClose,header:this.renderHeader(uniqueId),content:content,footer:footer,closeButtonVisible:closeButtonVisible,testId:testId})})})})}}OnePaneDialog.defaultProps={closeButtonVisible:true};const styleSheets={small:aphrodite.StyleSheet.create({dialog:{width:"100%",height:"100%",overflow:"hidden"}}),mdOrLarger:aphrodite.StyleSheet.create({dialog:{width:"93.75%",maxWidth:576,height:"81.25%",maxHeight:624}})};
 
-function maybeGetNextAncestorModalLauncherPortal(element) {
-  let candidateElement = element && element.parentElement;
-  while (candidateElement && !candidateElement.hasAttribute(ModalLauncherPortalAttributeName)) {
-    candidateElement = candidateElement.parentElement;
-  }
-  return candidateElement;
-}
-function maybeGetPortalMountedModalHostElement(element) {
-  return maybeGetNextAncestorModalLauncherPortal(element);
-}
+function maybeGetNextAncestorModalLauncherPortal(element){let candidateElement=element&&element.parentElement;while(candidateElement&&!candidateElement.hasAttribute(ModalLauncherPortalAttributeName)){candidateElement=candidateElement.parentElement;}return candidateElement}function maybeGetPortalMountedModalHostElement(element){return maybeGetNextAncestorModalLauncherPortal(element)}
 
 exports.ModalDialog = ModalDialog;
 exports.ModalFooter = ModalFooter;