@activecollab/components 2.0.435 → 2.0.436

package/dist/index.js

@@ -15572,7 +15572,7 @@
     return props.$isLight && styled.css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);color:var(--color-theme-700);"]);
   });
 
-  var defaultStyle$3 = {
+  var defaultStyle$2 = {
     transitionProperty: "opacity, transform",
     transitionDuration: ".15s, .10s, .15s",
     transitionTimingFunction: "ease, ease, cubic-bezier(0.39, 0.575, 0.565, 1)",
@@ -15580,7 +15580,7 @@
     transform: "scale(.85)",
     opacity: 0
   };
-  var transitionStyles$4 = {
+  var transitionStyles$3 = {
     entering: {
       opacity: 1,
       transform: "scale(1)",
@@ -15618,7 +15618,7 @@
       return /*#__PURE__*/React.cloneElement(children, {
         style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
           visibility: state === "exited" && !inProp ? "hidden" : undefined
-        }, defaultStyle$3), transitionStyles$4[state]), style), children.props.style)
+        }, defaultStyle$2), transitionStyles$3[state]), style), children.props.style)
       });
     });
   };
@@ -16040,6 +16040,24 @@
   });
   Checkbox.displayName = "Checkbox";
 
+  var DialogContext = /*#__PURE__*/React.createContext(null);
+  var useDialogContext = function useDialogContext() {
+    return React.useContext(DialogContext);
+  };
+
+  /**
+   * Closes the dialog the way clicking the overlay does: the exit transition runs first, and the
+   * dialog's own onClose fires once it finishes. Use it for a Cancel button instead of calling the
+   * parent's close handler, which would unmount the dialog before it can animate out.
+   */
+  var useDialogClose = function useDialogClose(fallback) {
+    var _ref, _context$requestClose;
+    var context = React.useContext(DialogContext);
+    return (_ref = (_context$requestClose = context === null || context === void 0 ? void 0 : context.requestClose) !== null && _context$requestClose !== void 0 ? _context$requestClose : fallback) !== null && _ref !== void 0 ? _ref : function () {
+      return undefined;
+    };
+  };
+
   var size = {
     sm: "640px",
     md: "768px",
@@ -16066,57 +16084,104 @@
     xxl: "@media (max-width: ".concat(below(size.xxl), ")")
   };
 
+  var dialogSizes = {
+    s: 440,
+    m: 540,
+    l: 700,
+    xl: 840,
+    xxl: 1000,
+    xxxl: 1120
+  };
+  var MIN_GAP = "2.5vh";
+  var MAX_DIALOG_HEIGHT = "95vh";
+
+  // The dialog hangs at a fixed offset while there is room below it, then grows in both directions at
+  // once. Two shrinkable spacers express that: only the lower one grows, and past the crossover both
+  // shrink from the same basis, so the gaps stay equal down to MIN_GAP.
+  var StyledDialogViewport = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledDialogViewport",
+    componentId: "sc-jwpvgm-0"
+  })(["position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;padding-left:16px;padding-right:16px;pointer-events:none;--ac-dialog-offset:60px;", "{--ac-dialog-offset:126px;}&::before,&::after{content:\"\";flex-shrink:1;flex-basis:var(--ac-dialog-offset);min-height:", ";}&::before{flex-grow:0;}&::after{flex-grow:1;}", ""], screen.sm, MIN_GAP, BoxSizingStyle);
+  StyledDialogViewport.displayName = "StyledDialogViewport";
   var StyledDialog = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledDialog",
-    componentId: "sc-jwpvgm-0"
-  })(["display:flex;flex-direction:column;flex:1 1 auto;max-height:calc(100vh - 156px);background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:8px;width:310px;margin:60px auto 30px auto;position:relative;@media (max-width:640px){width:calc(100% - 32px);max-width:640px;margin-left:16px !important;margin-right:16px !important;}", " ", " ", "{width:540px;margin:126px auto 30px auto;}"], FontStyle, BoxSizingStyle, screen.sm);
+    componentId: "sc-jwpvgm-1"
+  })(["display:flex;flex-direction:column;flex:0 0 auto;pointer-events:auto;width:100%;max-width:", "px;max-height:", ";background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:8px;position:relative;transition:max-width 0.2s ease,height 0.2s ease;@media (prefers-reduced-motion:reduce){transition:none;}", " ", " ", ""], function (props) {
+    return props.$maxWidth;
+  }, MAX_DIALOG_HEIGHT, function (props) {
+    return props.$height && styled.css(["height:", ";"], props.$height);
+  }, FontStyle, BoxSizingStyle);
   StyledDialog.displayName = "StyledDialog";
   var StyledDialogTitle = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledDialogTitle",
-    componentId: "sc-jwpvgm-1"
-  })(["padding:20px 30px;", " ", ""], FontStyle, BoxSizingStyle);
+    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-2"
-  })(["padding:20px 30px;max-height:580px;overflow-y:auto;flex:1 1 auto;", " ", ""], FontStyle, BoxSizingStyle);
+    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-3"
-  })(["border-top:1px solid var(--border-primary);height:1px;"]);
+    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-4"
-  })(["padding:20px 30px;", " ", ""], FontStyle, BoxSizingStyle);
+    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"];
-  // import { useDialogContext } from "./DialogContext";
-
   var DialogActions = function DialogActions(_ref) {
     var className = _ref.className,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$1u);
-    // useDialogContext();
-
+    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), children);
+    }, rest), wired);
   };
   DialogActions.displayName = "DialogActions";
 
-  var _excluded$1t = ["className", "children"];
-  // import { useDialogContext } from "./DialogContext";
-
+  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);
-    // useDialogContext();
-
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogContent, _extends({
+      $scroll: scroll,
       className: classNames__default["default"]("c-dialog-content", className)
     }, rest), children);
   };
@@ -16146,20 +16211,31 @@
   });
   Header3.displayName = "Header3";
 
-  var _excluded$1r = ["children", "className", "disableDefaultHeading"];
-  // import { useDialogContext } from "./DialogContext";
-
+  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);
-    // useDialogContext();
+    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), disableDefaultHeading ? children : /*#__PURE__*/React__default["default"].createElement(Header3, null, children));
+    }, 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";
 
@@ -16250,11 +16326,12 @@
         props = {
           onEnter: createChainedFunction(handleEnter, children.props.onEnter),
           onExited: createChainedFunction(handleExited, children.props.onExited),
-          in: open
+          in: open,
+          forceClose: handleClose
         };
       }
       return props;
-    }, [children, handleEnter, handleExited, hasTransition, open]);
+    }, [children, handleClose, handleEnter, handleExited, hasTransition, open]);
     if (!open && (!hasTransition || exited)) {
       return null;
     }
@@ -16271,14 +16348,14 @@
   });
   Modal.displayName = "Modal";
 
-  var _excluded$1p = ["in", "children", "style", "timeout"];
-  var defaultStyle$2 = function defaultStyle(duration) {
+  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$3 = {
+  var transitionStyles$2 = {
     entering: {
       opacity: 1
     },
@@ -16299,16 +16376,25 @@
       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
+      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)
+        }, defaultStyle$1(timeout)), transitionStyles$2[state]), style), children.props.style)
       });
     });
   };
@@ -16371,33 +16457,37 @@
   };
   Slide.displayName = "Slide";
 
-  var defaultStyle$1 = {
-    transitionProperty: "opacity, transform",
-    transitionTimingFunction: "linear ease-out",
-    transform: "translateY(-100%)",
-    opacity: 0
-  };
-  var transitionStyles$2 = {
-    entering: {
-      opacity: 1,
-      transform: "translateY(0)",
-      transitionDuration: ".3s"
-    },
-    entered: {
-      opacity: 1,
-      transform: "translateY(0)",
-      transitionDuration: ".3s"
-    },
-    exiting: {
-      opacity: 0,
-      transform: "translateY(-100%)",
-      transitionDuration: ".2s"
-    },
-    exited: {
-      opacity: 0,
-      transform: "translateY(-100%)",
-      transitionDuration: ".2s"
-    }
+  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,
@@ -16407,18 +16497,30 @@
       children = _ref.children,
       style = _ref.style,
       _ref$timeout = _ref.timeout,
-      timeout = _ref$timeout === void 0 ? 400 : _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);
+
+    // 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: onEnter,
+      onEnter: handleEnter,
       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)
+        }, styles.base), styles[state]), style), children.props.style)
       });
     });
   };
@@ -16562,50 +16664,71 @@
   };
   Scale.displayName = "Scale";
 
-  var _excluded$1l = ["children", "open", "onClose", "className", "enableBackgroundClick", "disableCloseOnEsc", "animate", "onClickOutside"];
-  var _Dialog = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var children = _ref.children,
-      _ref$open = _ref.open,
-      open = _ref$open === void 0 ? false : _ref$open,
+  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
+  // must declare it even though Modal overwrites it on clone.
+  var DialogSurface = function DialogSurface(_ref) {
+    var _ref$in = _ref.in,
+      inProp = _ref$in === void 0 ? false : _ref$in,
+      onEnter = _ref.onEnter,
+      onExited = _ref.onExited,
+      forceClose = _ref.forceClose,
       onClose = _ref.onClose,
-      className = _ref.className,
-      _ref$enableBackground = _ref.enableBackgroundClick,
-      enableBackgroundClick = _ref$enableBackground === void 0 ? false : _ref$enableBackground,
-      _ref$disableCloseOnEs = _ref.disableCloseOnEsc,
-      disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
-      _ref$animate = _ref.animate,
-      animate = _ref$animate === void 0 ? "slide" : _ref$animate,
-      onClickOutside = _ref.onClickOutside,
-      rest = _objectWithoutProperties(_ref, _excluded$1l);
-    var animateDialog = function animateDialog() {
-      switch (animate) {
-        case "fade":
-          return /*#__PURE__*/React__default["default"].createElement(Fade, {
-            in: open
-          }, /*#__PURE__*/React__default["default"].createElement(StyledDialog, {
-            className: classNames__default["default"]("c-dialog", className)
-          }, children));
-        default:
-          return /*#__PURE__*/React__default["default"].createElement(SlideFromTop, {
-            in: open
-          }, /*#__PURE__*/React__default["default"].createElement(StyledDialog, {
-            className: classNames__default["default"]("c-dialog", className)
-          }, children));
-      }
-    };
-    return (
-      /*#__PURE__*/
-      // <DialogContext.Provider value={{}}>
-      React__default["default"].createElement(Modal, _extends({
-        ref: ref,
-        open: open,
-        onClose: onClose,
-        disableBackgroundClick: !enableBackgroundClick,
-        disableCloseOnEsc: disableCloseOnEsc,
-        onClickOutside: onClickOutside
-      }, rest), animateDialog())
-      // </DialogContext.Provider>
-    );
+      animate = _ref.animate,
+      children = _ref.children;
+    var Animation = animate === "fade" ? Fade : SlideFromTop;
+    var value = React.useMemo(function () {
+      return {
+        requestClose: forceClose,
+        onClose
+      };
+    }, [forceClose, onClose]);
+    return /*#__PURE__*/React__default["default"].createElement(DialogContext.Provider, {
+      value: value
+    }, /*#__PURE__*/React__default["default"].createElement(StyledDialogViewport, {
+      className: "c-dialog-viewport"
+    }, /*#__PURE__*/React__default["default"].createElement(Animation, {
+      in: inProp,
+      onEnter: onEnter,
+      onExited: onExited
+    }, children)));
+  };
+  DialogSurface.displayName = "DialogSurface";
+  var _Dialog = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+    var _dialogSizes$size;
+    var children = _ref2.children,
+      _ref2$open = _ref2.open,
+      open = _ref2$open === void 0 ? false : _ref2$open,
+      onClose = _ref2.onClose,
+      className = _ref2.className,
+      _ref2$enableBackgroun = _ref2.enableBackgroundClick,
+      enableBackgroundClick = _ref2$enableBackgroun === void 0 ? false : _ref2$enableBackgroun,
+      _ref2$disableCloseOnE = _ref2.disableCloseOnEsc,
+      disableCloseOnEsc = _ref2$disableCloseOnE === void 0 ? false : _ref2$disableCloseOnE,
+      _ref2$animate = _ref2.animate,
+      animate = _ref2$animate === void 0 ? "slide" : _ref2$animate,
+      onClickOutside = _ref2.onClickOutside,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? "m" : _ref2$size,
+      _ref2$height = _ref2.height,
+      height = _ref2$height === void 0 ? "fluid" : _ref2$height,
+      rest = _objectWithoutProperties(_ref2, _excluded$1l);
+    return /*#__PURE__*/React__default["default"].createElement(Modal, _extends({
+      ref: ref,
+      open: open,
+      onClose: onClose,
+      disableBackgroundClick: !enableBackgroundClick,
+      disableCloseOnEsc: disableCloseOnEsc,
+      onClickOutside: onClickOutside
+    }, rest), /*#__PURE__*/React__default["default"].createElement(DialogSurface, {
+      in: open,
+      onClose: onClose,
+      animate: animate
+    }, /*#__PURE__*/React__default["default"].createElement(StyledDialog, {
+      $maxWidth: (_dialogSizes$size = dialogSizes[size]) !== null && _dialogSizes$size !== void 0 ? _dialogSizes$size : dialogSizes.m,
+      $height: height === "fluid" ? undefined : height,
+      className: classNames__default["default"]("c-dialog", className)
+    }, children)));
   });
   _Dialog.displayName = "Dialog";
 
@@ -16642,7 +16765,9 @@
       shouldShowCancelButton = _ref$shouldShowCancel === void 0 ? true : _ref$shouldShowCancel,
       _ref$isLoading = _ref.isLoading,
       isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-      confirmationLabel = _ref.confirmationLabel;
+      confirmationLabel = _ref.confirmationLabel,
+      size = _ref.size,
+      height = _ref.height;
     var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       confirmed = _useState2[0],
@@ -16675,7 +16800,9 @@
       open: open,
       onClose: onCancel,
       className: classNames__default["default"]("c-confirm-dialog", className),
-      disableCloseOnEsc: isLoading
+      disableCloseOnEsc: isLoading,
+      size: size,
+      height: height
     }, /*#__PURE__*/React__default["default"].createElement(Dialog.Title, null, dialogTitle), /*#__PURE__*/React__default["default"].createElement(Dialog.ContentDivider, null), /*#__PURE__*/React__default["default"].createElement(Dialog.Content, null, /*#__PURE__*/React__default["default"].createElement(Body2, {
       lineHeight: "loose",
       color: "secondary",
@@ -16693,9 +16820,6 @@
       color: "secondary"
     }, confirmationLabel))) : null), /*#__PURE__*/React__default["default"].createElement(Dialog.ContentDivider, null), /*#__PURE__*/React__default["default"].createElement(Dialog.Actions, null, /*#__PURE__*/React__default["default"].createElement(Button, {
       variant: "primary",
-      style: {
-        marginRight: "12px"
-      },
       onClick: onConfirm,
       disabled: isLoading || isConfirmBlocked
     }, confirmBtnText), shouldShowCancelButton ? /*#__PURE__*/React__default["default"].createElement(Button, {
@@ -28604,6 +28728,8 @@
       customRightHeader = _ref.customRightHeader,
       _ref$skip = _ref.skip,
       skip = _ref$skip === void 0 ? false : _ref$skip;
+    // The close button goes through the dialog so the exit transition runs before the caller unmounts.
+    var closeDialog = useDialogClose(onClose);
     var onActionButtonClick = React.useCallback(function () {
       if (isLast && onClose) {
         return onClose();
@@ -28616,7 +28742,7 @@
       className: "tw--ml-3 tw-mr-2",
       disabled: changingStepInProgress
     }, /*#__PURE__*/React__default["default"].createElement(ArrowBackMobileIcon$1, null)) : null, /*#__PURE__*/React__default["default"].createElement(StyledStepTitle, null, /*#__PURE__*/React__default["default"].createElement(Caption2, null, title), /*#__PURE__*/React__default["default"].createElement(Header3, null, subtitle))), customRightHeader ? customRightHeader : /*#__PURE__*/React__default["default"].createElement(IconButton, {
-      onClick: onClose,
+      onClick: closeDialog,
       variant: "text gray",
       disabled: changingStepInProgress
     }, /*#__PURE__*/React__default["default"].createElement(CancelCrossIcon$1, null))), /*#__PURE__*/React__default["default"].createElement(Dialog.ContentDivider, null), shouldRenderNextButton ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Dialog.Content, null, children), /*#__PURE__*/React__default["default"].createElement(Dialog.ContentDivider, null), /*#__PURE__*/React__default["default"].createElement(Dialog.Actions, null, /*#__PURE__*/React__default["default"].createElement(StepActionButton, {
@@ -28628,13 +28754,18 @@
   Step.displayName = "Step";
 
   var Wizard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var _activeStepProps$size, _activeStepProps$heig;
     var title = _ref.title,
       open = _ref.open,
       onClose = _ref.onClose,
       _ref$disableCloseOnEs = _ref.disableCloseOnEsc,
       disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
       children = _ref.children,
-      dialogClassName = _ref.dialogClassName;
+      dialogClassName = _ref.dialogClassName,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "m" : _ref$size,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "fluid" : _ref$height;
     var childrenCollection = React.useMemo(function () {
       return React__default["default"].Children.toArray(children);
     }, [children]);
@@ -28671,6 +28802,11 @@
       }
       setActiveStep(index);
     }, [activeStep, childrenCollection]);
+    var activeStepProps = React.useMemo(function () {
+      var _element$props;
+      var element = childrenCollection[activeStep];
+      return (_element$props = element === null || element === void 0 ? void 0 : element.props) !== null && _element$props !== void 0 ? _element$props : {};
+    }, [activeStep, childrenCollection]);
     var renderActiveStep = React.useMemo(function () {
       var element = childrenCollection[activeStep];
       if ((element === null || element === void 0 ? void 0 : element.type) === Step) {
@@ -28700,7 +28836,9 @@
       open: open,
       onClose: onClose,
       disableCloseOnEsc: disableCloseOnEsc,
-      className: dialogClassName
+      className: dialogClassName,
+      size: (_activeStepProps$size = activeStepProps.size) !== null && _activeStepProps$size !== void 0 ? _activeStepProps$size : size,
+      height: (_activeStepProps$heig = activeStepProps.height) !== null && _activeStepProps$heig !== void 0 ? _activeStepProps$heig : height
     }, renderActiveStep));
   });
   Wizard.displayName = "Wizard";
@@ -31157,6 +31295,7 @@
   exports.DescriptionIcon = DescriptionIcon$1;
   exports.DescriptionSmallIcon = DescriptionSmallIcon$1;
   exports.Dialog = Dialog;
+  exports.DialogContext = DialogContext;
   exports.DiscussionAddIcon = DiscussionAddIcon$1;
   exports.DiscussionIcon = DiscussionIcon$1;
   exports.DisplayCurrency = DisplayCurrency;
@@ -31539,6 +31678,8 @@
   exports.titledTextHeadings = titledTextHeadings;
   exports.toMoment = toMoment;
   exports.useContentStepperContext = useContentStepperContext;
+  exports.useDialogClose = useDialogClose;
+  exports.useDialogContext = useDialogContext;
   exports.useEntityGroupContext = useEntityGroupContext;
   exports.useForkRef = useForkRef;
   exports.useHeight = useHeight;