@activecollab/components 2.0.438 → 2.0.440

package/dist/index.js

@@ -14815,6 +14815,464 @@
   });
   Popper.displayName = "Popper";
 
+  var _excluded$1E = ["in", "children", "style", "timeout", "onEnter"];
+  var defaultStyle$2 = function defaultStyle(duration) {
+    return {
+      transition: "all ".concat(duration, "ms ease-in-out"),
+      opacity: 0
+    };
+  };
+  var transitionStyles$3 = {
+    entering: {
+      opacity: 1
+    },
+    entered: {
+      opacity: 1
+    },
+    exiting: {
+      opacity: 0
+    },
+    exited: {
+      opacity: 0
+    }
+  };
+  var Fade = function Fade(_ref) {
+    var _ref$in = _ref.in,
+      inProp = _ref$in === void 0 ? false : _ref$in,
+      children = _ref.children,
+      style = _ref.style,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 500 : _ref$timeout,
+      onEnter = _ref.onEnter,
+      rest = _objectWithoutProperties(_ref, _excluded$1E);
+    // Same forced layout as SlideFromTop: without it the starting opacity never lands in the DOM.
+    var handleEnter = function handleEnter(node, isAppearing) {
+      if (node) {
+        void node.offsetHeight;
+      }
+      onEnter === null || onEnter === void 0 || onEnter(node, isAppearing);
+    };
+    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
+      appear: true,
+      in: inProp,
+      timeout: timeout,
+      onEnter: handleEnter
+    }, rest), function (state) {
+      return /*#__PURE__*/React.cloneElement(children, {
+        style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+          visibility: state === "exited" && !inProp ? "hidden" : undefined
+        }, defaultStyle$2(timeout)), transitionStyles$3[state]), style), children.props.style)
+      });
+    });
+  };
+  Fade.displayName = "Fade";
+
+  var _excluded$1D = ["in", "children", "style", "timeout", "initialDirection"];
+  var Slide = function Slide(_ref) {
+    var _ref$in = _ref.in,
+      inProp = _ref$in === void 0 ? false : _ref$in,
+      children = _ref.children,
+      style = _ref.style,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
+      _ref$initialDirection = _ref.initialDirection,
+      initialDirection = _ref$initialDirection === void 0 ? "left" : _ref$initialDirection,
+      rest = _objectWithoutProperties(_ref, _excluded$1D);
+    var directionSign;
+    switch (initialDirection) {
+      case "right":
+        directionSign = "100%, 0";
+        break;
+      case "top":
+        directionSign = "0, -100%";
+        break;
+      case "bottom":
+        directionSign = "0, 100%";
+        break;
+      default:
+        directionSign = "-100%, 0";
+    }
+    var defaultStyle = function defaultStyle(timeout) {
+      return {
+        transition: "all ".concat(timeout, "ms ease")
+      };
+    };
+    var transitionStyles = {
+      entering: {
+        transform: "translate(0,0)"
+      },
+      entered: {
+        transform: "translate(0,0)"
+      },
+      exiting: {
+        transform: "translate(".concat(directionSign, ")")
+      },
+      exited: {
+        transform: "translate(".concat(directionSign, ")")
+      }
+    };
+    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
+      in: inProp,
+      timeout: timeout
+    }, rest), function (state) {
+      return /*#__PURE__*/React.cloneElement(children, {
+        style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+          visibility: state === "exited" && !inProp ? "hidden" : undefined
+        }, defaultStyle(timeout)), transitionStyles[state]), style), children.props.style)
+      });
+    });
+  };
+  Slide.displayName = "Slide";
+
+  var defaultStyle$1 = {
+    transitionProperty: "opacity, transform",
+    transitionDuration: ".15s, .10s, .15s",
+    transitionTimingFunction: "ease, ease, cubic-bezier(0.39, 0.575, 0.565, 1)",
+    transformOrigin: "50% 0",
+    transform: "scale(.85)",
+    opacity: 0
+  };
+  var transitionStyles$2 = {
+    entering: {
+      opacity: 1,
+      transform: "scale(1)",
+      transitionDelay: ".6s"
+    },
+    entered: {
+      opacity: 1,
+      transform: "scale(1)"
+    },
+    exiting: {
+      opacity: 0,
+      transform: "scale(.85)"
+    },
+    exited: {
+      opacity: 0,
+      transform: "scale(.85)"
+    }
+  };
+  var FromElement = function FromElement(_ref) {
+    var _ref$in = _ref.in,
+      inProp = _ref$in === void 0 ? false : _ref$in,
+      onEnter = _ref.onEnter,
+      onExited = _ref.onExited,
+      children = _ref.children,
+      style = _ref.style,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 1000 : _ref$timeout;
+    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
+      appear: true,
+      in: inProp,
+      timeout: timeout,
+      onEnter: onEnter,
+      onExited: onExited
+    }, function (state) {
+      return /*#__PURE__*/React.cloneElement(children, {
+        style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+          visibility: state === "exited" && !inProp ? "hidden" : undefined
+        }, defaultStyle$1), transitionStyles$2[state]), style), children.props.style)
+      });
+    });
+  };
+  FromElement.displayName = "FromElement";
+
+  var DEFAULT_DISTANCE = 25;
+  var buildStyles$1 = function buildStyles(distance) {
+    var away = "translateY(-".concat(distance, "px)");
+    return {
+      base: {
+        transitionProperty: "opacity, transform",
+        transitionTimingFunction: "ease-out",
+        transform: away,
+        opacity: 0
+      },
+      entering: {
+        opacity: 1,
+        transform: "translateY(0)",
+        transitionDuration: ".3s"
+      },
+      entered: {
+        opacity: 1,
+        transform: "translateY(0)",
+        transitionDuration: ".3s"
+      },
+      exiting: {
+        opacity: 0,
+        transform: away,
+        transitionDuration: ".2s"
+      },
+      exited: {
+        opacity: 0,
+        transform: away,
+        transitionDuration: ".2s"
+      }
+    };
+  };
+  var SlideFromTop = function SlideFromTop(_ref) {
+    var _ref$in = _ref.in,
+      inProp = _ref$in === void 0 ? false : _ref$in,
+      onEnter = _ref.onEnter,
+      onExited = _ref.onExited,
+      children = _ref.children,
+      style = _ref.style,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 400 : _ref$timeout,
+      _ref$distance = _ref.distance,
+      distance = _ref$distance === void 0 ? DEFAULT_DISTANCE : _ref$distance;
+    var styles = buildStyles$1(distance);
+
+    // React flushes the state change that follows onEnter before the browser paints, so without a
+    // forced layout here the element never holds its starting style and the transition is skipped.
+    var handleEnter = function handleEnter(node, isAppearing) {
+      if (node) {
+        void node.offsetHeight;
+      }
+      onEnter === null || onEnter === void 0 || onEnter(node, isAppearing);
+    };
+    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
+      appear: true,
+      in: inProp,
+      timeout: timeout,
+      onEnter: handleEnter,
+      onExited: onExited
+    }, function (state) {
+      return /*#__PURE__*/React.cloneElement(children, {
+        style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+          visibility: state === "exited" && !inProp ? "hidden" : undefined
+        }, styles.base), styles[state]), style), children.props.style)
+      });
+    });
+  };
+  SlideFromTop.displayName = "SlideFromTop";
+
+  var StyledSlideLeftRight = styled.createGlobalStyle(["", " ", ""], function (props) {
+    return props.$direction === "left" && styled.css(["&.c-slide-enter{position:absolute;transform:translateX(100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(-100%);transition:all 200ms ease;}"]);
+  }, function (props) {
+    return props.$direction === "right" && styled.css(["&.c-slide-enter{position:absolute;transform:translateX(-100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(100%);transition:all 200ms ease;}"]);
+  });
+
+  var _excluded$1C = ["children", "direction"];
+  var SlideLeftRightTransition = function SlideLeftRightTransition(_ref) {
+    var children = _ref.children,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? "left" : _ref$direction,
+      props = _objectWithoutProperties(_ref, _excluded$1C);
+    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, _extends({
+      timeout: 200,
+      classNames: "c-slide",
+      unmountOnExit: true
+    }, props), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children, /*#__PURE__*/React__default["default"].createElement(StyledSlideLeftRight, {
+      $direction: direction
+    })));
+  };
+  SlideLeftRightTransition.displayName = "SlideLeftRightTransition";
+
+  var ResizeTransition = function ResizeTransition(_ref) {
+    var _ref$in = _ref.in,
+      inProp = _ref$in === void 0 ? false : _ref$in,
+      onEnter = _ref.onEnter,
+      onExited = _ref.onExited,
+      children = _ref.children,
+      style = _ref.style,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 200 : _ref$timeout;
+    var defaultStyle = React.useMemo(function () {
+      return {
+        transitionProperty: "width, height",
+        transitionDuration: "".concat(timeout, "ms"),
+        transitionTimingFunction: "ease"
+      };
+    }, [timeout]);
+    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
+      appear: true,
+      in: inProp,
+      timeout: timeout,
+      onEnter: onEnter,
+      onExited: onExited
+    }, function (state) {
+      return /*#__PURE__*/React.cloneElement(children, {
+        style: _objectSpread2(_objectSpread2(_objectSpread2({
+          visibility: state === "exited" && !inProp ? "hidden" : undefined
+        }, defaultStyle), style), children.props.style)
+      });
+    });
+  };
+  ResizeTransition.displayName = "ResizeTransition";
+
+  var _excluded$1B = ["in", "children", "style", "timeout"];
+  var defaultStyle = function defaultStyle(duration) {
+    return {
+      transition: "all ".concat(duration, "ms ease-in"),
+      transform: "scaleX(0)",
+      opacity: 0,
+      transformOrigin: "left"
+    };
+  };
+  var transitionStyles$1 = {
+    entering: {
+      transform: "scaleX(1)",
+      opacity: 1
+    },
+    entered: {
+      transform: "scaleX(1)",
+      opacity: 1
+    },
+    exiting: {
+      transform: "scaleX(0)",
+      opacity: 0
+    },
+    exited: {
+      transform: "scaleX(0)",
+      opacity: 0
+    }
+  };
+  var Reveal = function Reveal(_ref) {
+    var _ref$in = _ref.in,
+      inProp = _ref$in === void 0 ? false : _ref$in,
+      children = _ref.children,
+      style = _ref.style,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 200 : _ref$timeout,
+      rest = _objectWithoutProperties(_ref, _excluded$1B);
+    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
+      appear: true,
+      in: inProp,
+      timeout: timeout
+    }, rest), function (state) {
+      return /*#__PURE__*/React.cloneElement(children, {
+        style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyle(inProp ? timeout : 0)), transitionStyles$1[state]), style), children.props.style)
+      });
+    });
+  };
+  Reveal.displayName = "Reveal";
+
+  var transitionStyles = {
+    entered: {
+      transform: "scale(1)"
+    },
+    exiting: {
+      transform: "scale(0)"
+    }
+  };
+  var Scale = function Scale(_ref) {
+    var _ref$in = _ref.in,
+      inProp = _ref$in === void 0 ? false : _ref$in,
+      onEnter = _ref.onEnter,
+      onExited = _ref.onExited,
+      children = _ref.children,
+      style = _ref.style,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 200 : _ref$timeout;
+    var defaultStyle = React.useMemo(function () {
+      return {
+        transitionProperty: "transform",
+        transitionDuration: "".concat(timeout, "ms"),
+        transform: "scale(0)"
+      };
+    }, [timeout]);
+    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
+      in: inProp,
+      timeout: timeout,
+      onEnter: onEnter,
+      onExited: onExited
+    }, function (state) {
+      return /*#__PURE__*/React.cloneElement(children, {
+        style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyle), transitionStyles[state]), style), children.props.style)
+      });
+    });
+  };
+  Scale.displayName = "Scale";
+
+  var GROW_ENTER = 140;
+  var GROW_EXIT = 100;
+  var START_SCALE = 0.96;
+
+  // jsdom and SSR have no matchMedia, and a reader who asks for less motion gets none.
+  var prefersReducedMotion = function prefersReducedMotion() {
+    return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  };
+  var originFor = function originFor(placement) {
+    var _split = (placement || "bottom-start").split("-"),
+      _split2 = _slicedToArray(_split, 2),
+      side = _split2[0],
+      alignment = _split2[1];
+    var vertical = side === "top" ? "bottom" : "top";
+    var horizontal = alignment === "end" ? "right" : "left";
+    if (side === "left" || side === "right") {
+      return "center ".concat(side === "left" ? "right" : "left");
+    }
+    return "".concat(horizontal, " ").concat(vertical);
+  };
+  var buildStyles = function buildStyles(origin, enter, exit) {
+    var away = "scale(".concat(START_SCALE, ")");
+    return {
+      base: {
+        transformOrigin: origin,
+        transitionProperty: "opacity, transform",
+        transitionTimingFunction: "ease-out",
+        transform: away,
+        opacity: 0
+      },
+      entering: {
+        opacity: 1,
+        transform: "scale(1)",
+        transitionDuration: "".concat(enter, "ms")
+      },
+      entered: {
+        opacity: 1,
+        transform: "scale(1)"
+      },
+      exiting: {
+        opacity: 0,
+        transform: away,
+        transitionDuration: "".concat(exit, "ms")
+      },
+      exited: {
+        opacity: 0,
+        transform: away
+      }
+    };
+  };
+  var Grow = function Grow(_ref) {
+    var _ref$in = _ref.in,
+      inProp = _ref$in === void 0 ? false : _ref$in,
+      onEnter = _ref.onEnter,
+      onExited = _ref.onExited,
+      children = _ref.children,
+      style = _ref.style,
+      placement = _ref.placement,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? GROW_ENTER : _ref$timeout;
+    var still = prefersReducedMotion();
+    var enter = still ? 0 : timeout;
+    var exit = still ? 0 : GROW_EXIT;
+    var styles = buildStyles(originFor(placement), enter, exit);
+
+    // React flushes the state change that follows onEnter before the browser paints, so without a
+    // forced layout here the element never holds its starting style and the transition is skipped.
+    var handleEnter = function handleEnter(node, isAppearing) {
+      if (node) {
+        void node.offsetHeight;
+      }
+      onEnter === null || onEnter === void 0 || onEnter(node, isAppearing);
+    };
+    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
+      appear: true,
+      in: inProp,
+      timeout: {
+        enter,
+        exit
+      },
+      onEnter: handleEnter,
+      onExited: onExited
+    }, function (state) {
+      return /*#__PURE__*/React.cloneElement(children, {
+        style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, styles.base), styles[state]), style), children.props.style)
+      });
+    });
+  };
+  Grow.displayName = "Grow";
+
   var StyledWindow = styled__default["default"].div.withConfig({
     displayName: "Style__StyledWindow",
     componentId: "sc-rnlftg-0"
@@ -14847,7 +15305,7 @@
   };
   var LayerContext$1 = LayerContext;
 
-  var _excluded$1E = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "disableCloseOnEsc", "onClick"];
+  var _excluded$1A = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "disableCloseOnEsc", "onClick"];
   var returnFocus = {
     preventScroll: true
   };
@@ -14864,7 +15322,7 @@
       _ref$disableCloseOnEs = _ref.disableCloseOnEsc,
       disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
       onClick = _ref.onClick,
-      rest = _objectWithoutProperties(_ref, _excluded$1E);
+      rest = _objectWithoutProperties(_ref, _excluded$1A);
     var innerRef = React.useRef(null);
     var handleRef = useForkRef(innerRef, ref);
     var _useLayerContext = useLayerContext(),
@@ -14937,15 +15395,24 @@
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
       setOpen = _useState2[1];
-    var _useState3 = React.useState(),
+    var _useState3 = React.useState(!defaultOpen),
       _useState4 = _slicedToArray(_useState3, 2),
-      childNode = _useState4[0],
-      setChildNode = _useState4[1];
+      exited = _useState4[0],
+      setExited = _useState4[1];
+    var _useState5 = React.useState(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      childNode = _useState6[0],
+      setChildNode = _useState6[1];
     var elementRef = React.useRef(null);
     var isOpenAtLeastOnce = React.useRef(false);
     React.useEffect(function () {
       setOpen(defaultOpen);
     }, [defaultOpen]);
+    React.useEffect(function () {
+      if (open) {
+        setExited(false);
+      }
+    }, [open]);
     var handleRefRef = useForkRef(target ? target.ref : undefined, setChildNode);
     var handleRef = useForkRef(handleRefRef, elementRef);
     var handleOpen = React.useCallback(function (event) {
@@ -14980,35 +15447,51 @@
         isOpenAtLeastOnce.current = false;
       }
     }, [open]);
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, target && /*#__PURE__*/React__default["default"].cloneElement(target, targetProps), open ? /*#__PURE__*/React__default["default"].createElement(Window, {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, target && /*#__PURE__*/React__default["default"].cloneElement(target, targetProps), open || !exited ? /*#__PURE__*/React__default["default"].createElement(Window, {
       onClose: handleClose,
-      disableScrollLock: !handleScroll,
-      disableFocusLock: disableFocusLock,
+      disableScrollLock: !handleScroll
+      // A closing menu hands the focus back at once, it does not hold it for the length of the fade.
+      ,
+      disableFocusLock: disableFocusLock || !open,
       style: {
         position: windowAbsolutelyPositioned ? "absolute" : "fixed"
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Overlay, {
+    }, open ? /*#__PURE__*/React__default["default"].createElement(Overlay, {
       className: backgroundElementClass,
       onClick: handleClose,
       tabIndex: -1,
       disableBackgroundColor: true
-    }), /*#__PURE__*/React__default["default"].createElement(Popper, {
+    }) : null, /*#__PURE__*/React__default["default"].createElement(Popper, {
       anchorEl: childNode,
       open: childNode ? open : false,
       placement: position,
       className: popperClassName,
       tabIndex: -1,
-      afterWrite: onPopperOpen
-    }, /*#__PURE__*/React__default["default"].createElement(StyledMenu$3, {
-      className: classNames__default["default"]("c-simple-menu__paper", "c-simple-menu__".concat(mode), menuClassName, className),
-      $mode: mode,
-      onMouseDown: onMenuClick
-    }, /*#__PURE__*/React__default["default"].createElement(MenuContextProvider, {
-      value: {
-        open,
-        setOpen
-      }
-    }, typeof children === "function" ? children(childProps) : children)))) : null);
+      afterWrite: onPopperOpen,
+      transition: true
+    }, function (_ref2) {
+      var placement = _ref2.placement,
+        transitionProps = _ref2.transitionProps;
+      return /*#__PURE__*/React__default["default"].createElement(Grow, {
+        placement: placement,
+        in: transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.in,
+        onEnter: transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.onEnter,
+        onExited: function onExited() {
+          var _transitionProps$onEx;
+          setExited(true);
+          transitionProps === null || transitionProps === void 0 || (_transitionProps$onEx = transitionProps.onExited) === null || _transitionProps$onEx === void 0 || _transitionProps$onEx.call(transitionProps);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(StyledMenu$3, {
+        className: classNames__default["default"]("c-simple-menu__paper", "c-simple-menu__".concat(mode), menuClassName, className),
+        $mode: mode,
+        onMouseDown: onMenuClick
+      }, /*#__PURE__*/React__default["default"].createElement(MenuContextProvider, {
+        value: {
+          open,
+          setOpen
+        }
+      }, typeof children === "function" ? children(childProps) : children)));
+    })) : null);
   };
   Menu.displayName = "Menu";
 
@@ -15176,7 +15659,7 @@
   });
   StyledTypography.displayName = "StyledTypography";
 
-  var _excluded$1D = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
+  var _excluded$1z = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
   var Typography = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "Title 1" : _ref$variant,
@@ -15207,7 +15690,7 @@
       weight = _ref$weight === void 0 ? "regular" : _ref$weight,
       className = _ref.className,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$1D);
+      props = _objectWithoutProperties(_ref, _excluded$1z);
     var Component = as || "div";
     return /*#__PURE__*/React__default["default"].createElement(StyledTypography, _extends({
       as: Component,
@@ -15230,13 +15713,13 @@
   });
   Typography.displayName = "Typography";
 
-  var _excluded$1C = ["title", "className", "leftElement", "rightElement"];
+  var _excluded$1y = ["title", "className", "leftElement", "rightElement"];
   var MenuHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var title = _ref.title,
       className = _ref.className,
       leftElement = _ref.leftElement,
       rightElement = _ref.rightElement,
-      props = _objectWithoutProperties(_ref, _excluded$1C);
+      props = _objectWithoutProperties(_ref, _excluded$1y);
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuHeader, _extends({}, props, {
       className: classNames__default["default"]("c-menu-header", className),
       ref: ref
@@ -15261,11 +15744,11 @@
   });
   MenuHeader.displayName = "MenuHeader";
 
-  var _excluded$1B = ["children", "className"];
+  var _excluded$1x = ["children", "className"];
   var MenuFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$1B);
+      props = _objectWithoutProperties(_ref, _excluded$1x);
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter$1, _extends({}, props, {
       className: classNames__default["default"]("c-menu-footer", className),
       ref: ref
@@ -15273,14 +15756,14 @@
   });
   MenuFooter.displayName = "MenuFooter";
 
-  var _excluded$1A = ["children", "className", "separator"];
+  var _excluded$1w = ["children", "className", "separator"];
   var Breadcrumbs = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var _dimensions$width, _childDimensions$widt;
     var children = _ref.children,
       className = _ref.className,
       _ref$separator = _ref.separator,
       separator = _ref$separator === void 0 ? "/" : _ref$separator,
-      rest = _objectWithoutProperties(_ref, _excluded$1A);
+      rest = _objectWithoutProperties(_ref, _excluded$1w);
     var internalRef = React.useRef(null);
     var listWrapperRef = React.useRef(null);
     var olRef = React.useRef(null);
@@ -15509,12 +15992,12 @@
     }, label);
   };
 
-  var _excluded$1z = ["weight", "children"];
+  var _excluded$1v = ["weight", "children"];
   var Body2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? "regular" : _ref$weight,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$1z);
+      props = _objectWithoutProperties(_ref, _excluded$1v);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Body 2",
       weight: weight,
@@ -15572,62 +16055,10 @@
     return props.$isLight && styled.css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);color:var(--color-theme-700);"]);
   });
 
-  var defaultStyle$2 = {
-    transitionProperty: "opacity, transform",
-    transitionDuration: ".15s, .10s, .15s",
-    transitionTimingFunction: "ease, ease, cubic-bezier(0.39, 0.575, 0.565, 1)",
-    transformOrigin: "50% 0",
-    transform: "scale(.85)",
-    opacity: 0
-  };
-  var transitionStyles$3 = {
-    entering: {
-      opacity: 1,
-      transform: "scale(1)",
-      transitionDelay: ".6s"
-    },
-    entered: {
-      opacity: 1,
-      transform: "scale(1)"
-    },
-    exiting: {
-      opacity: 0,
-      transform: "scale(.85)"
-    },
-    exited: {
-      opacity: 0,
-      transform: "scale(.85)"
-    }
-  };
-  var FromElement = function FromElement(_ref) {
-    var _ref$in = _ref.in,
-      inProp = _ref$in === void 0 ? false : _ref$in,
-      onEnter = _ref.onEnter,
-      onExited = _ref.onExited,
-      children = _ref.children,
-      style = _ref.style,
-      _ref$timeout = _ref.timeout,
-      timeout = _ref$timeout === void 0 ? 1000 : _ref$timeout;
-    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
-      appear: true,
-      in: inProp,
-      timeout: timeout,
-      onEnter: onEnter,
-      onExited: onExited
-    }, function (state) {
-      return /*#__PURE__*/React.cloneElement(children, {
-        style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
-          visibility: state === "exited" && !inProp ? "hidden" : undefined
-        }, defaultStyle$2), transitionStyles$3[state]), style), children.props.style)
-      });
-    });
-  };
-  FromElement.displayName = "FromElement";
-
-  var _excluded$1y = ["children"];
+  var _excluded$1u = ["children"];
   var TooltipAnimation = function TooltipAnimation(_ref) {
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$1y);
+      props = _objectWithoutProperties(_ref, _excluded$1u);
     return /*#__PURE__*/React__default["default"].createElement(FromElement, _extends({
       timeout: 0
     }, props), children);
@@ -15709,7 +16140,7 @@
   });
   Tooltip.displayName = "Tooltip";
 
-  var _excluded$1x = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className", "labelClassName", "disabled"];
+  var _excluded$1t = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className", "labelClassName", "disabled"];
   var CounterButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var label = _ref.label,
       icon = _ref.icon,
@@ -15722,7 +16153,7 @@
       labelClassName = _ref.labelClassName,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      args = _objectWithoutProperties(_ref, _excluded$1x);
+      args = _objectWithoutProperties(_ref, _excluded$1t);
     return /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonWrapper, {
       ref: ref,
       className: className
@@ -15848,7 +16279,7 @@
   StyledButton$1.displayName = "StyledButton";
   StyledControl.displayName = "StyledControl";
 
-  var _excluded$1w = ["mixed", "data-testid"];
+  var _excluded$1s = ["mixed", "data-testid"];
 
   /**
    * @component CheckboxIcon
@@ -15872,7 +16303,7 @@
   var CheckboxIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var mixed = _ref.mixed,
       testId = _ref["data-testid"],
-      props = _objectWithoutProperties(_ref, _excluded$1w);
+      props = _objectWithoutProperties(_ref, _excluded$1s);
     // const [animate, setAnimate] = useState(false);
     // const mountRef = useRef(false);
 
@@ -15966,7 +16397,7 @@
   });
   StyledCheckbox$1.displayName = "StyledCheckbox";
 
-  var _excluded$1v = ["className", "hover", "id", "mixed", "checked", "onChange", "disabled"];
+  var _excluded$1r = ["className", "hover", "id", "mixed", "checked", "onChange", "disabled"];
   /**
    * Checkbox component
    */
@@ -15980,7 +16411,7 @@
       checked = _ref.checked,
       onChange = _ref.onChange,
       disabled = _ref.disabled,
-      rest = _objectWithoutProperties(_ref, _excluded$1v);
+      rest = _objectWithoutProperties(_ref, _excluded$1r);
     var _useState = React.useState(mixed && !checked),
       _useState2 = _slicedToArray(_useState, 2),
       indeterminate = _useState2[0],
@@ -16115,554 +16546,238 @@
   var StyledDialogTitle = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledDialogTitle",
     componentId: "sc-jwpvgm-2"
-  })(["padding:20px 30px;flex:0 0 auto;", " ", ""], FontStyle, BoxSizingStyle);
-  StyledDialogTitle.displayName = "StyledDialogTitle";
-
-  // The close button hangs 8px into the title padding, so it sits nearer the dialog edge than the
-  // heading does. The bar reserves the rest, which keeps the gap to the heading unchanged.
-  var CLOSE_OFFSET = 8;
-  var CLOSE_RESERVE = 44 - CLOSE_OFFSET;
-
-  // The header is as tall as its heading, with or without a close button.
-  var StyledDialogTitleBar = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledDialogTitleBar",
-    componentId: "sc-jwpvgm-3"
-  })(["position:relative;display:flex;align-items:center;padding-right:", "px;"], CLOSE_RESERVE);
-  StyledDialogTitleBar.displayName = "StyledDialogTitleBar";
-  var StyledDialogTitleClose = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledDialogTitleClose",
-    componentId: "sc-jwpvgm-4"
-  })(["position:absolute;right:-", "px;top:50%;transform:translateY(-50%);line-height:0;"], CLOSE_OFFSET);
-  StyledDialogTitleClose.displayName = "StyledDialogTitleClose";
-  var StyledDialogContent = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledDialogContent",
-    componentId: "sc-jwpvgm-5"
-  })(["padding:20px 30px;flex:1 1 auto;min-height:0;overflow-y:", ";", " ", ""], function (props) {
-    return props.$scroll ? "auto" : "visible";
-  }, FontStyle, BoxSizingStyle);
-  StyledDialogContent.displayName = "StyledDialogContent";
-  var StyledDialogContentDivider = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledDialogContentDivider",
-    componentId: "sc-jwpvgm-6"
-  })(["border-top:1px solid var(--border-primary);height:1px;flex:0 0 auto;"]);
-  StyledDialogContentDivider.displayName = "StyledDialogContentDivider";
-  var StyledDialogActions = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledDialogActions",
-    componentId: "sc-jwpvgm-7"
-  })(["padding:20px 30px;flex:0 0 auto;display:flex;align-items:center;gap:12px;", " ", ""], FontStyle, BoxSizingStyle);
-  StyledDialogActions.displayName = "StyledDialogActions";
-
-  var _excluded$1u = ["className", "children"];
-  var DialogActions = function DialogActions(_ref) {
-    var className = _ref.className,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$1u);
-    var dialog = useDialogContext();
-
-    // A footer button that does nothing but close gets the same path as clicking the overlay, so the
-    // exit transition runs before the caller unmounts the dialog. Matching on identity leaves a
-    // button that does anything else alone.
-    var wired = dialog !== null && dialog !== void 0 && dialog.requestClose && dialog !== null && dialog !== void 0 && dialog.onClose ? React.Children.map(children, function (child) {
-      return /*#__PURE__*/React.isValidElement(child) && child.props.onClick === dialog.onClose ? /*#__PURE__*/React.cloneElement(child, {
-        onClick: dialog.requestClose
-      }) : child;
-    }) : children;
-    return /*#__PURE__*/React__default["default"].createElement(StyledDialogActions, _extends({
-      className: classNames__default["default"]("c-dialog-actions", className)
-    }, rest), wired);
-  };
-  DialogActions.displayName = "DialogActions";
-
-  var _excluded$1t = ["className", "children", "scroll"];
-  var DialogContent = function DialogContent(_ref) {
-    var className = _ref.className,
-      children = _ref.children,
-      _ref$scroll = _ref.scroll,
-      scroll = _ref$scroll === void 0 ? true : _ref$scroll,
-      rest = _objectWithoutProperties(_ref, _excluded$1t);
-    return /*#__PURE__*/React__default["default"].createElement(StyledDialogContent, _extends({
-      $scroll: scroll,
-      className: classNames__default["default"]("c-dialog-content", className)
-    }, rest), children);
-  };
-  DialogContent.displayName = "DialogContent";
-
-  // import { useDialogContext } from "./DialogContext";
-
-  var DialogContentDivider = function DialogContentDivider(_ref) {
-    var className = _ref.className;
-    // useDialogContext();
-
-    return /*#__PURE__*/React__default["default"].createElement(StyledDialogContentDivider, {
-      className: classNames__default["default"]("c-dialog-content-divider", className)
-    });
-  };
-  DialogContentDivider.displayName = "DialogContentDivider";
-
-  var _excluded$1s = ["children"];
-  var Header3 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$1s);
-    return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
-      weight: "bold",
-      variant: "Header 3",
-      ref: ref
-    }, props), children);
-  });
-  Header3.displayName = "Header3";
-
-  var _excluded$1r = ["children", "className", "disableDefaultHeading", "onClose", "closeLabel"];
-  var DialogTitle = function DialogTitle(_ref) {
-    var _dialog$requestClose;
-    var children = _ref.children,
-      className = _ref.className,
-      _ref$disableDefaultHe = _ref.disableDefaultHeading,
-      disableDefaultHeading = _ref$disableDefaultHe === void 0 ? false : _ref$disableDefaultHe,
-      onClose = _ref.onClose,
-      _ref$closeLabel = _ref.closeLabel,
-      closeLabel = _ref$closeLabel === void 0 ? "Close" : _ref$closeLabel,
-      rest = _objectWithoutProperties(_ref, _excluded$1r);
-    var dialog = useDialogContext();
-    var heading = disableDefaultHeading ? children : /*#__PURE__*/React__default["default"].createElement(Header3, null, children);
-
-    // Closing through the dialog lets the exit transition run; the caller's onClose fires once it
-    // finishes. Falling back keeps a title used outside a dialog working.
-    var handleClose = (_dialog$requestClose = dialog === null || dialog === void 0 ? void 0 : dialog.requestClose) !== null && _dialog$requestClose !== void 0 ? _dialog$requestClose : onClose;
-    return /*#__PURE__*/React__default["default"].createElement(StyledDialogTitle, _extends({
-      className: classNames__default["default"]("c-dialog-title-wrapper", className)
-    }, rest), onClose ? /*#__PURE__*/React__default["default"].createElement(StyledDialogTitleBar, null, heading, /*#__PURE__*/React__default["default"].createElement(StyledDialogTitleClose, null, /*#__PURE__*/React__default["default"].createElement(IconButton, {
-      type: "button",
-      variant: "text gray",
-      "aria-label": closeLabel,
-      onClick: handleClose
-    }, /*#__PURE__*/React__default["default"].createElement(CancelCrossIcon$1, null)))) : heading);
-  };
-  DialogTitle.displayName = "DialogTitle";
-
-  function createChainedFunction() {
-    for (var _len = arguments.length, functions = new Array(_len), _key = 0; _key < _len; _key++) {
-      functions[_key] = arguments[_key];
-    }
-    return functions.reduce(function (acc, func) {
-      if (func === null) {
-        return acc;
-      }
-      return function chainedFunction() {
-        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-          args[_key2] = arguments[_key2];
-        }
-        acc && acc.apply(this, args);
-        func && func.apply(this, args);
-      };
-    },
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    function () {});
-  }
-
-  var _excluded$1q = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose", "onClickOutside"];
-  var getHasTransition = function getHasTransition(children) {
-    return children.props ? Object.prototype.hasOwnProperty.call(children.props, "in") : false;
-  };
-  var Modal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var children = _ref.children,
-      _ref$disableFocusLock = _ref.disableFocusLock,
-      disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
-      _ref$disableScrollLoc = _ref.disableScrollLock,
-      disableScrollLock = _ref$disableScrollLoc === void 0 ? false : _ref$disableScrollLoc,
-      _ref$disableBackgroun = _ref.disableBackgroundClick,
-      disableBackgroundClick = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
-      _ref$disableBackgroun2 = _ref.disableBackgroundColor,
-      disableBackgroundColor = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
-      _ref$disableCloseOnEs = _ref.disableCloseOnEsc,
-      disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
-      _ref$open = _ref.open,
-      defaultOpen = _ref$open === void 0 ? false : _ref$open,
-      onClose = _ref.onClose,
-      onClickOutside = _ref.onClickOutside,
-      rest = _objectWithoutProperties(_ref, _excluded$1q);
-    var _useState = React.useState(defaultOpen),
-      _useState2 = _slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-    var _useState3 = React.useState(true),
-      _useState4 = _slicedToArray(_useState3, 2),
-      exited = _useState4[0],
-      setExited = _useState4[1];
-    var innerRef = React.useRef(null);
-    var handleRef = useForkRef(innerRef, ref);
-    var hasTransition = React.useMemo(function () {
-      return getHasTransition(children);
-    }, [children]);
-    React.useEffect(function () {
-      setOpen(defaultOpen);
-    }, [defaultOpen]);
-    var handleClose = React.useCallback(function () {
-      setOpen(false);
-      if (!hasTransition) {
-        typeof onClose === "function" && onClose();
-      }
-    }, [hasTransition, onClose]);
-    var handleBackgroundClick = React.useCallback(function (event) {
-      if (!disableBackgroundClick) {
-        event.preventDefault();
-        return handleClose();
-      }
-      if (onClickOutside) {
-        onClickOutside(event);
-      }
-    }, [disableBackgroundClick, onClickOutside, handleClose]);
-    var handleEnter = React.useCallback(function () {
-      setExited(false);
-    }, []);
-    var handleExited = React.useCallback(function () {
-      setExited(true);
-      typeof onClose === "function" && onClose();
-    }, [onClose]);
-    var childProps = React.useMemo(function () {
-      var props = {};
+  })(["padding:20px 30px;flex:0 0 auto;", " ", ""], FontStyle, BoxSizingStyle);
+  StyledDialogTitle.displayName = "StyledDialogTitle";
 
-      // It's a Transition like component
-      if (hasTransition && children) {
-        props = {
-          onEnter: createChainedFunction(handleEnter, children.props.onEnter),
-          onExited: createChainedFunction(handleExited, children.props.onExited),
-          in: open,
-          forceClose: handleClose
-        };
-      }
-      return props;
-    }, [children, handleClose, handleEnter, handleExited, hasTransition, open]);
-    if (!open && (!hasTransition || exited)) {
-      return null;
-    }
-    return /*#__PURE__*/React__default["default"].createElement(Window, _extends({}, rest, {
-      ref: handleRef,
-      onClose: handleClose,
-      disableFocusLock: disableFocusLock,
-      disableScrollLock: disableScrollLock,
-      disableCloseOnEsc: disableCloseOnEsc
-    }), open ? /*#__PURE__*/React__default["default"].createElement(Overlay, {
-      onClick: handleBackgroundClick,
-      disableBackgroundColor: disableBackgroundColor
-    }) : null, /*#__PURE__*/React.cloneElement(children, childProps));
-  });
-  Modal.displayName = "Modal";
+  // The close button hangs 8px into the title padding, so it sits nearer the dialog edge than the
+  // heading does. The bar reserves the rest, which keeps the gap to the heading unchanged.
+  var CLOSE_OFFSET = 8;
+  var CLOSE_RESERVE = 44 - CLOSE_OFFSET;
 
-  var _excluded$1p = ["in", "children", "style", "timeout", "onEnter"];
-  var defaultStyle$1 = function defaultStyle(duration) {
-    return {
-      transition: "all ".concat(duration, "ms ease-in-out"),
-      opacity: 0
-    };
-  };
-  var transitionStyles$2 = {
-    entering: {
-      opacity: 1
-    },
-    entered: {
-      opacity: 1
-    },
-    exiting: {
-      opacity: 0
-    },
-    exited: {
-      opacity: 0
-    }
-  };
-  var Fade = function Fade(_ref) {
-    var _ref$in = _ref.in,
-      inProp = _ref$in === void 0 ? false : _ref$in,
+  // The header is as tall as its heading, with or without a close button.
+  var StyledDialogTitleBar = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledDialogTitleBar",
+    componentId: "sc-jwpvgm-3"
+  })(["position:relative;display:flex;align-items:center;padding-right:", "px;"], CLOSE_RESERVE);
+  StyledDialogTitleBar.displayName = "StyledDialogTitleBar";
+  var StyledDialogTitleClose = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledDialogTitleClose",
+    componentId: "sc-jwpvgm-4"
+  })(["position:absolute;right:-", "px;top:50%;transform:translateY(-50%);line-height:0;"], CLOSE_OFFSET);
+  StyledDialogTitleClose.displayName = "StyledDialogTitleClose";
+  var StyledDialogContent = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledDialogContent",
+    componentId: "sc-jwpvgm-5"
+  })(["padding:20px 30px;flex:1 1 auto;min-height:0;overflow-y:", ";", " ", ""], function (props) {
+    return props.$scroll ? "auto" : "visible";
+  }, FontStyle, BoxSizingStyle);
+  StyledDialogContent.displayName = "StyledDialogContent";
+  var StyledDialogContentDivider = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledDialogContentDivider",
+    componentId: "sc-jwpvgm-6"
+  })(["border-top:1px solid var(--border-primary);height:1px;flex:0 0 auto;"]);
+  StyledDialogContentDivider.displayName = "StyledDialogContentDivider";
+  var StyledDialogActions = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledDialogActions",
+    componentId: "sc-jwpvgm-7"
+  })(["padding:20px 30px;flex:0 0 auto;display:flex;align-items:center;gap:12px;", " ", ""], FontStyle, BoxSizingStyle);
+  StyledDialogActions.displayName = "StyledDialogActions";
+
+  var _excluded$1q = ["className", "children"];
+  var DialogActions = function DialogActions(_ref) {
+    var className = _ref.className,
       children = _ref.children,
-      style = _ref.style,
-      _ref$timeout = _ref.timeout,
-      timeout = _ref$timeout === void 0 ? 500 : _ref$timeout,
-      onEnter = _ref.onEnter,
-      rest = _objectWithoutProperties(_ref, _excluded$1p);
-    // Same forced layout as SlideFromTop: without it the starting opacity never lands in the DOM.
-    var handleEnter = function handleEnter(node, isAppearing) {
-      if (node) {
-        void node.offsetHeight;
-      }
-      onEnter === null || onEnter === void 0 || onEnter(node, isAppearing);
-    };
-    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
-      appear: true,
-      in: inProp,
-      timeout: timeout,
-      onEnter: handleEnter
-    }, rest), function (state) {
-      return /*#__PURE__*/React.cloneElement(children, {
-        style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
-          visibility: state === "exited" && !inProp ? "hidden" : undefined
-        }, defaultStyle$1(timeout)), transitionStyles$2[state]), style), children.props.style)
-      });
-    });
+      rest = _objectWithoutProperties(_ref, _excluded$1q);
+    var dialog = useDialogContext();
+
+    // A footer button that does nothing but close gets the same path as clicking the overlay, so the
+    // exit transition runs before the caller unmounts the dialog. Matching on identity leaves a
+    // button that does anything else alone.
+    var wired = dialog !== null && dialog !== void 0 && dialog.requestClose && dialog !== null && dialog !== void 0 && dialog.onClose ? React.Children.map(children, function (child) {
+      return /*#__PURE__*/React.isValidElement(child) && child.props.onClick === dialog.onClose ? /*#__PURE__*/React.cloneElement(child, {
+        onClick: dialog.requestClose
+      }) : child;
+    }) : children;
+    return /*#__PURE__*/React__default["default"].createElement(StyledDialogActions, _extends({
+      className: classNames__default["default"]("c-dialog-actions", className)
+    }, rest), wired);
   };
-  Fade.displayName = "Fade";
+  DialogActions.displayName = "DialogActions";
 
-  var _excluded$1o = ["in", "children", "style", "timeout", "initialDirection"];
-  var Slide = function Slide(_ref) {
-    var _ref$in = _ref.in,
-      inProp = _ref$in === void 0 ? false : _ref$in,
+  var _excluded$1p = ["className", "children", "scroll"];
+  var DialogContent = function DialogContent(_ref) {
+    var className = _ref.className,
       children = _ref.children,
-      style = _ref.style,
-      _ref$timeout = _ref.timeout,
-      timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
-      _ref$initialDirection = _ref.initialDirection,
-      initialDirection = _ref$initialDirection === void 0 ? "left" : _ref$initialDirection,
-      rest = _objectWithoutProperties(_ref, _excluded$1o);
-    var directionSign;
-    switch (initialDirection) {
-      case "right":
-        directionSign = "100%, 0";
-        break;
-      case "top":
-        directionSign = "0, -100%";
-        break;
-      case "bottom":
-        directionSign = "0, 100%";
-        break;
-      default:
-        directionSign = "-100%, 0";
-    }
-    var defaultStyle = function defaultStyle(timeout) {
-      return {
-        transition: "all ".concat(timeout, "ms ease")
-      };
-    };
-    var transitionStyles = {
-      entering: {
-        transform: "translate(0,0)"
-      },
-      entered: {
-        transform: "translate(0,0)"
-      },
-      exiting: {
-        transform: "translate(".concat(directionSign, ")")
-      },
-      exited: {
-        transform: "translate(".concat(directionSign, ")")
-      }
-    };
-    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
-      in: inProp,
-      timeout: timeout
-    }, rest), function (state) {
-      return /*#__PURE__*/React.cloneElement(children, {
-        style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
-          visibility: state === "exited" && !inProp ? "hidden" : undefined
-        }, defaultStyle(timeout)), transitionStyles[state]), style), children.props.style)
-      });
-    });
+      _ref$scroll = _ref.scroll,
+      scroll = _ref$scroll === void 0 ? true : _ref$scroll,
+      rest = _objectWithoutProperties(_ref, _excluded$1p);
+    return /*#__PURE__*/React__default["default"].createElement(StyledDialogContent, _extends({
+      $scroll: scroll,
+      className: classNames__default["default"]("c-dialog-content", className)
+    }, rest), children);
   };
-  Slide.displayName = "Slide";
+  DialogContent.displayName = "DialogContent";
 
-  var DEFAULT_DISTANCE = 25;
-  var buildStyles = function buildStyles(distance) {
-    var away = "translateY(-".concat(distance, "px)");
-    return {
-      base: {
-        transitionProperty: "opacity, transform",
-        transitionTimingFunction: "ease-out",
-        transform: away,
-        opacity: 0
-      },
-      entering: {
-        opacity: 1,
-        transform: "translateY(0)",
-        transitionDuration: ".3s"
-      },
-      entered: {
-        opacity: 1,
-        transform: "translateY(0)",
-        transitionDuration: ".3s"
-      },
-      exiting: {
-        opacity: 0,
-        transform: away,
-        transitionDuration: ".2s"
-      },
-      exited: {
-        opacity: 0,
-        transform: away,
-        transitionDuration: ".2s"
-      }
-    };
-  };
-  var SlideFromTop = function SlideFromTop(_ref) {
-    var _ref$in = _ref.in,
-      inProp = _ref$in === void 0 ? false : _ref$in,
-      onEnter = _ref.onEnter,
-      onExited = _ref.onExited,
-      children = _ref.children,
-      style = _ref.style,
-      _ref$timeout = _ref.timeout,
-      timeout = _ref$timeout === void 0 ? 400 : _ref$timeout,
-      _ref$distance = _ref.distance,
-      distance = _ref$distance === void 0 ? DEFAULT_DISTANCE : _ref$distance;
-    var styles = buildStyles(distance);
+  // import { useDialogContext } from "./DialogContext";
 
-    // React flushes the state change that follows onEnter before the browser paints, so without a
-    // forced layout here the element never holds its starting style and the transition is skipped.
-    var handleEnter = function handleEnter(node, isAppearing) {
-      if (node) {
-        void node.offsetHeight;
-      }
-      onEnter === null || onEnter === void 0 || onEnter(node, isAppearing);
-    };
-    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
-      appear: true,
-      in: inProp,
-      timeout: timeout,
-      onEnter: handleEnter,
-      onExited: onExited
-    }, function (state) {
-      return /*#__PURE__*/React.cloneElement(children, {
-        style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
-          visibility: state === "exited" && !inProp ? "hidden" : undefined
-        }, styles.base), styles[state]), style), children.props.style)
-      });
+  var DialogContentDivider = function DialogContentDivider(_ref) {
+    var className = _ref.className;
+    // useDialogContext();
+
+    return /*#__PURE__*/React__default["default"].createElement(StyledDialogContentDivider, {
+      className: classNames__default["default"]("c-dialog-content-divider", className)
     });
   };
-  SlideFromTop.displayName = "SlideFromTop";
+  DialogContentDivider.displayName = "DialogContentDivider";
 
-  var StyledSlideLeftRight = styled.createGlobalStyle(["", " ", ""], function (props) {
-    return props.$direction === "left" && styled.css(["&.c-slide-enter{position:absolute;transform:translateX(100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(-100%);transition:all 200ms ease;}"]);
-  }, function (props) {
-    return props.$direction === "right" && styled.css(["&.c-slide-enter{position:absolute;transform:translateX(-100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(100%);transition:all 200ms ease;}"]);
+  var _excluded$1o = ["children"];
+  var Header3 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded$1o);
+    return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
+      weight: "bold",
+      variant: "Header 3",
+      ref: ref
+    }, props), children);
   });
+  Header3.displayName = "Header3";
 
-  var _excluded$1n = ["children", "direction"];
-  var SlideLeftRightTransition = function SlideLeftRightTransition(_ref) {
+  var _excluded$1n = ["children", "className", "disableDefaultHeading", "onClose", "closeLabel"];
+  var DialogTitle = function DialogTitle(_ref) {
+    var _dialog$requestClose;
     var children = _ref.children,
-      _ref$direction = _ref.direction,
-      direction = _ref$direction === void 0 ? "left" : _ref$direction,
-      props = _objectWithoutProperties(_ref, _excluded$1n);
-    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, _extends({
-      timeout: 200,
-      classNames: "c-slide",
-      unmountOnExit: true
-    }, props), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children, /*#__PURE__*/React__default["default"].createElement(StyledSlideLeftRight, {
-      $direction: direction
-    })));
-  };
-  SlideLeftRightTransition.displayName = "SlideLeftRightTransition";
+      className = _ref.className,
+      _ref$disableDefaultHe = _ref.disableDefaultHeading,
+      disableDefaultHeading = _ref$disableDefaultHe === void 0 ? false : _ref$disableDefaultHe,
+      onClose = _ref.onClose,
+      _ref$closeLabel = _ref.closeLabel,
+      closeLabel = _ref$closeLabel === void 0 ? "Close" : _ref$closeLabel,
+      rest = _objectWithoutProperties(_ref, _excluded$1n);
+    var dialog = useDialogContext();
+    var heading = disableDefaultHeading ? children : /*#__PURE__*/React__default["default"].createElement(Header3, null, children);
 
-  var ResizeTransition = function ResizeTransition(_ref) {
-    var _ref$in = _ref.in,
-      inProp = _ref$in === void 0 ? false : _ref$in,
-      onEnter = _ref.onEnter,
-      onExited = _ref.onExited,
-      children = _ref.children,
-      style = _ref.style,
-      _ref$timeout = _ref.timeout,
-      timeout = _ref$timeout === void 0 ? 200 : _ref$timeout;
-    var defaultStyle = React.useMemo(function () {
-      return {
-        transitionProperty: "width, height",
-        transitionDuration: "".concat(timeout, "ms"),
-        transitionTimingFunction: "ease"
-      };
-    }, [timeout]);
-    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
-      appear: true,
-      in: inProp,
-      timeout: timeout,
-      onEnter: onEnter,
-      onExited: onExited
-    }, function (state) {
-      return /*#__PURE__*/React.cloneElement(children, {
-        style: _objectSpread2(_objectSpread2(_objectSpread2({
-          visibility: state === "exited" && !inProp ? "hidden" : undefined
-        }, defaultStyle), style), children.props.style)
-      });
-    });
+    // Closing through the dialog lets the exit transition run; the caller's onClose fires once it
+    // finishes. Falling back keeps a title used outside a dialog working.
+    var handleClose = (_dialog$requestClose = dialog === null || dialog === void 0 ? void 0 : dialog.requestClose) !== null && _dialog$requestClose !== void 0 ? _dialog$requestClose : onClose;
+    return /*#__PURE__*/React__default["default"].createElement(StyledDialogTitle, _extends({
+      className: classNames__default["default"]("c-dialog-title-wrapper", className)
+    }, rest), onClose ? /*#__PURE__*/React__default["default"].createElement(StyledDialogTitleBar, null, heading, /*#__PURE__*/React__default["default"].createElement(StyledDialogTitleClose, null, /*#__PURE__*/React__default["default"].createElement(IconButton, {
+      type: "button",
+      variant: "text gray",
+      "aria-label": closeLabel,
+      onClick: handleClose
+    }, /*#__PURE__*/React__default["default"].createElement(CancelCrossIcon$1, null)))) : heading);
   };
-  ResizeTransition.displayName = "ResizeTransition";
+  DialogTitle.displayName = "DialogTitle";
 
-  var _excluded$1m = ["in", "children", "style", "timeout"];
-  var defaultStyle = function defaultStyle(duration) {
-    return {
-      transition: "all ".concat(duration, "ms ease-in"),
-      transform: "scaleX(0)",
-      opacity: 0,
-      transformOrigin: "left"
-    };
-  };
-  var transitionStyles$1 = {
-    entering: {
-      transform: "scaleX(1)",
-      opacity: 1
-    },
-    entered: {
-      transform: "scaleX(1)",
-      opacity: 1
-    },
-    exiting: {
-      transform: "scaleX(0)",
-      opacity: 0
-    },
-    exited: {
-      transform: "scaleX(0)",
-      opacity: 0
+  function createChainedFunction() {
+    for (var _len = arguments.length, functions = new Array(_len), _key = 0; _key < _len; _key++) {
+      functions[_key] = arguments[_key];
     }
+    return functions.reduce(function (acc, func) {
+      if (func === null) {
+        return acc;
+      }
+      return function chainedFunction() {
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+        acc && acc.apply(this, args);
+        func && func.apply(this, args);
+      };
+    },
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    function () {});
+  }
+
+  var _excluded$1m = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose", "onClickOutside"];
+  var getHasTransition = function getHasTransition(children) {
+    return children.props ? Object.prototype.hasOwnProperty.call(children.props, "in") : false;
   };
-  var Reveal = function Reveal(_ref) {
-    var _ref$in = _ref.in,
-      inProp = _ref$in === void 0 ? false : _ref$in,
-      children = _ref.children,
-      style = _ref.style,
-      _ref$timeout = _ref.timeout,
-      timeout = _ref$timeout === void 0 ? 200 : _ref$timeout,
+  var Modal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var children = _ref.children,
+      _ref$disableFocusLock = _ref.disableFocusLock,
+      disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
+      _ref$disableScrollLoc = _ref.disableScrollLock,
+      disableScrollLock = _ref$disableScrollLoc === void 0 ? false : _ref$disableScrollLoc,
+      _ref$disableBackgroun = _ref.disableBackgroundClick,
+      disableBackgroundClick = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
+      _ref$disableBackgroun2 = _ref.disableBackgroundColor,
+      disableBackgroundColor = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
+      _ref$disableCloseOnEs = _ref.disableCloseOnEsc,
+      disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
+      _ref$open = _ref.open,
+      defaultOpen = _ref$open === void 0 ? false : _ref$open,
+      onClose = _ref.onClose,
+      onClickOutside = _ref.onClickOutside,
       rest = _objectWithoutProperties(_ref, _excluded$1m);
-    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
-      appear: true,
-      in: inProp,
-      timeout: timeout
-    }, rest), function (state) {
-      return /*#__PURE__*/React.cloneElement(children, {
-        style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyle(inProp ? timeout : 0)), transitionStyles$1[state]), style), children.props.style)
-      });
-    });
-  };
-  Reveal.displayName = "Reveal";
+    var _useState = React.useState(defaultOpen),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+    var _useState3 = React.useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      exited = _useState4[0],
+      setExited = _useState4[1];
+    var innerRef = React.useRef(null);
+    var handleRef = useForkRef(innerRef, ref);
+    var hasTransition = React.useMemo(function () {
+      return getHasTransition(children);
+    }, [children]);
+    React.useEffect(function () {
+      setOpen(defaultOpen);
+    }, [defaultOpen]);
+    var handleClose = React.useCallback(function () {
+      setOpen(false);
+      if (!hasTransition) {
+        typeof onClose === "function" && onClose();
+      }
+    }, [hasTransition, onClose]);
+    var handleBackgroundClick = React.useCallback(function (event) {
+      if (!disableBackgroundClick) {
+        event.preventDefault();
+        return handleClose();
+      }
+      if (onClickOutside) {
+        onClickOutside(event);
+      }
+    }, [disableBackgroundClick, onClickOutside, handleClose]);
+    var handleEnter = React.useCallback(function () {
+      setExited(false);
+    }, []);
+    var handleExited = React.useCallback(function () {
+      setExited(true);
+      typeof onClose === "function" && onClose();
+    }, [onClose]);
+    var childProps = React.useMemo(function () {
+      var props = {};
 
-  var transitionStyles = {
-    entered: {
-      transform: "scale(1)"
-    },
-    exiting: {
-      transform: "scale(0)"
+      // It's a Transition like component
+      if (hasTransition && children) {
+        props = {
+          onEnter: createChainedFunction(handleEnter, children.props.onEnter),
+          onExited: createChainedFunction(handleExited, children.props.onExited),
+          in: open,
+          forceClose: handleClose
+        };
+      }
+      return props;
+    }, [children, handleClose, handleEnter, handleExited, hasTransition, open]);
+    if (!open && (!hasTransition || exited)) {
+      return null;
     }
-  };
-  var Scale = function Scale(_ref) {
-    var _ref$in = _ref.in,
-      inProp = _ref$in === void 0 ? false : _ref$in,
-      onEnter = _ref.onEnter,
-      onExited = _ref.onExited,
-      children = _ref.children,
-      style = _ref.style,
-      _ref$timeout = _ref.timeout,
-      timeout = _ref$timeout === void 0 ? 200 : _ref$timeout;
-    var defaultStyle = React.useMemo(function () {
-      return {
-        transitionProperty: "transform",
-        transitionDuration: "".concat(timeout, "ms"),
-        transform: "scale(0)"
-      };
-    }, [timeout]);
-    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
-      in: inProp,
-      timeout: timeout,
-      onEnter: onEnter,
-      onExited: onExited
-    }, function (state) {
-      return /*#__PURE__*/React.cloneElement(children, {
-        style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyle), transitionStyles[state]), style), children.props.style)
-      });
-    });
-  };
-  Scale.displayName = "Scale";
+    return /*#__PURE__*/React__default["default"].createElement(Window, _extends({}, rest, {
+      ref: handleRef,
+      onClose: handleClose,
+      disableFocusLock: disableFocusLock,
+      disableScrollLock: disableScrollLock,
+      disableCloseOnEsc: disableCloseOnEsc
+    }), open ? /*#__PURE__*/React__default["default"].createElement(Overlay, {
+      onClick: handleBackgroundClick,
+      disableBackgroundColor: disableBackgroundColor
+    }) : null, /*#__PURE__*/React.cloneElement(children, childProps));
+  });
+  Modal.displayName = "Modal";
 
   var _excluded$1l = ["children", "open", "onClose", "className", "enableBackgroundClick", "disableCloseOnEsc", "animate", "onClickOutside", "size", "height"];
   // Modal only treats a child as a transition when its props already carry `in`, so this element
@@ -31351,6 +31466,8 @@
   exports.FolderOutlineIcon = FolderOutlineIcon$1;
   exports.FolderPlusIcon = FolderPlusIcon$1;
   exports.FromElement = FromElement;
+  exports.GROW_ENTER = GROW_ENTER;
+  exports.GROW_EXIT = GROW_EXIT;
   exports.GearFailedIcon = GearFailedIcon$1;
   exports.GearIcon = GearIcon$1;
   exports.GiftIcon = GiftIcon$1;
@@ -31368,6 +31485,7 @@
   exports.GlobalAddButton = GlobalAddButton;
   exports.GlobalStyle = GlobalStyle;
   exports.GroupByIcon = GroupByIcon$1;
+  exports.Grow = Grow;
   exports.HashIcon = HashIcon$1;
   exports.HashtagIcon = HashtagIcon$1;
   exports.Header = Header;