@doist/reactist 29.1.1 → 30.0.0

package/lib/modal/modal.js

@@ -2,7 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib = require('tslib');
+var _extends = require('@babel/runtime/helpers/extends');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var reactCompilerRuntime = require('react-compiler-runtime');
 var React = require('react');
 var FocusLock = require('react-focus-lock');
 var react = require('@ariakit/react');
@@ -36,18 +38,36 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var FocusLock__default = /*#__PURE__*/_interopDefaultLegacy(FocusLock);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 
-var ModalContext = React__namespace.createContext({
-    onDismiss: undefined,
-    height: 'fitContent',
-    dividers: undefined,
+const _excluded = ["isOpen", "onDismiss", "height", "dividers", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement", "onKeyDown", "className"],
+  _excluded2 = ["children", "button", "withDivider", "exceptionallySetClassName"],
+  _excluded3 = ["exceptionallySetClassName", "children"],
+  _excluded4 = ["exceptionallySetClassName", "withDivider"],
+  _excluded5 = ["children"];
+
+//
+// ModalContext
+//
+
+const ModalContext = /*#__PURE__*/React__namespace.createContext({
+  onDismiss: undefined,
+  height: 'fitContent',
+  dividers: undefined
 });
+
+//
+// Modal container
+//
+
 function isNotInternalFrame(element) {
-    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe');
+  return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe');
 }
+
 /**
  * Renders a modal that sits on top of the rest of the content in the entire page.
  *
@@ -57,67 +77,314 @@ function isNotInternalFrame(element) {
  * @see ModalFooter
  * @see ModalBody
  */
-function Modal(_a) {
-    var isOpen = _a.isOpen, onDismiss = _a.onDismiss, _b = _a.height, height = _b === void 0 ? 'fitContent' : _b, dividers = _a.dividers, _c = _a.width, width = _c === void 0 ? 'medium' : _c, exceptionallySetClassName = _a.exceptionallySetClassName, exceptionallySetOverlayClassName = _a.exceptionallySetOverlayClassName, _d = _a.autoFocus, autoFocus = _d === void 0 ? true : _d, _e = _a.hideOnEscape, hideOnEscape = _e === void 0 ? true : _e, _f = _a.hideOnInteractOutside, hideOnInteractOutside = _f === void 0 ? true : _f, children = _a.children, portalElement = _a.portalElement, onKeyDown = _a.onKeyDown; 
-    // @ts-expect-error we want to make sure to not pass it to the Dialog component
-    _a.className; var props = tslib.__rest(_a, ["isOpen", "onDismiss", "height", "dividers", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement", "onKeyDown", "className"]);
-    var setOpen = React__namespace.useCallback(function (visible) {
-        if (!visible) {
-            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-        }
-    }, [onDismiss]);
-    var store = react.useDialogStore({ open: isOpen, setOpen: setOpen });
-    var contextValue = React__namespace.useMemo(function () { return ({ onDismiss: onDismiss, height: height, dividers: dividers }); }, [onDismiss, height, dividers]);
-    var portalRef = React__namespace.useRef(null);
-    var dialogRef = React__namespace.useRef(null);
-    var backdropRef = React__namespace.useRef(null);
-    var handleBackdropClick = React__namespace.useCallback(function (event) {
-        var _a, _b;
-        if (
-        // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,
-        // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog
-        !((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
-            (
-            // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM
-            (_b = backdropRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
-            event.stopPropagation();
-            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-        }
-    }, [onDismiss]);
-    React__namespace.useLayoutEffect(function disableAccessibilityTreeOutside() {
-        if (!isOpen || !portalRef.current) {
-            return;
-        }
-        return ariaHidden.hideOthers(portalRef.current);
-    }, [isOpen]);
-    var handleKeyDown = React__namespace.useCallback(function handleKeyDown(event) {
-        if (hideOnEscape &&
-            onDismiss != null &&
-            event.key === 'Escape' &&
-            !event.defaultPrevented) {
-            event.stopPropagation();
-            onDismiss();
-        }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-    }, [onDismiss, hideOnEscape, onKeyDown]);
-    if (!isOpen) {
-        return null;
-    }
-    return (React__namespace.createElement(react.Portal, { portalRef: portalRef, portalElement: portalElement },
-        React__namespace.createElement(box.Box, { "data-testid": "modal-overlay", "data-overlay": true, className: classNames__default["default"](modal_module["default"].overlay, modal_module["default"][height], modal_module["default"][width], exceptionallySetOverlayClassName), 
-            /**
-             * We're using `onPointerDown` instead of `onClick` to prevent the modal from
-             * closing when the click starts inside the modal and ends on the backdrop.
-             */
-            onPointerDown: hideOnInteractOutside ? handleBackdropClick : undefined, ref: backdropRef },
-            React__namespace.createElement(FocusLock__default["default"], { autoFocus: autoFocus, whiteList: isNotInternalFrame, returnFocus: true, crossFrame: false },
-                React__namespace.createElement(react.Dialog, tslib.__assign({}, props, { ref: dialogRef, render: React__namespace.createElement(box.Box, { borderRadius: "full", background: "default", display: "flex", flexDirection: "column", overflow: "hidden", height: height === 'expand' ? 'full' : undefined, flexGrow: height === 'expand' ? 1 : 0 }), className: classNames__default["default"](exceptionallySetClassName, modal_module["default"].container), store: store, preventBodyScroll: true, 
-                    // Disable focus lock as we set up our own using ReactFocusLock
-                    modal: false, autoFocus: false, autoFocusOnShow: false, autoFocusOnHide: false, 
-                    // Disable portal and backdrop as we control their markup
-                    portal: false, backdrop: false, hideOnInteractOutside: false, hideOnEscape: false, onKeyDown: handleKeyDown }),
-                    React__namespace.createElement(ModalContext.Provider, { value: contextValue }, children))))));
+function Modal(t0) {
+  const $ = reactCompilerRuntime.c(62);
+  let children;
+  let dividers;
+  let exceptionallySetClassName;
+  let exceptionallySetOverlayClassName;
+  let isOpen;
+  let onDismiss;
+  let onKeyDown;
+  let portalElement;
+  let props;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  if ($[0] !== t0) {
+    const {
+        isOpen: t6,
+        onDismiss: t7,
+        height: t8,
+        dividers: t9,
+        width: t10,
+        exceptionallySetClassName: t11,
+        exceptionallySetOverlayClassName: t12,
+        autoFocus: t13,
+        hideOnEscape: t14,
+        hideOnInteractOutside: t15,
+        children: t16,
+        portalElement: t17,
+        onKeyDown: t18,
+        className
+      } = t0,
+      t19 = _objectWithoutProperties__default["default"](t0, _excluded);
+    isOpen = t6;
+    onDismiss = t7;
+    t1 = t8;
+    dividers = t9;
+    t2 = t10;
+    exceptionallySetClassName = t11;
+    exceptionallySetOverlayClassName = t12;
+    t3 = t13;
+    t4 = t14;
+    t5 = t15;
+    children = t16;
+    portalElement = t17;
+    onKeyDown = t18;
+    props = t19;
+    $[0] = t0;
+    $[1] = children;
+    $[2] = dividers;
+    $[3] = exceptionallySetClassName;
+    $[4] = exceptionallySetOverlayClassName;
+    $[5] = isOpen;
+    $[6] = onDismiss;
+    $[7] = onKeyDown;
+    $[8] = portalElement;
+    $[9] = props;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    children = $[1];
+    dividers = $[2];
+    exceptionallySetClassName = $[3];
+    exceptionallySetOverlayClassName = $[4];
+    isOpen = $[5];
+    onDismiss = $[6];
+    onKeyDown = $[7];
+    portalElement = $[8];
+    props = $[9];
+    t1 = $[10];
+    t2 = $[11];
+    t3 = $[12];
+    t4 = $[13];
+    t5 = $[14];
+  }
+  const height = t1 === undefined ? "fitContent" : t1;
+  const width = t2 === undefined ? "medium" : t2;
+  const autoFocus = t3 === undefined ? true : t3;
+  const hideOnEscape = t4 === undefined ? true : t4;
+  const hideOnInteractOutside = t5 === undefined ? true : t5;
+  let t6;
+  if ($[15] !== onDismiss) {
+    t6 = visible => {
+      if (!visible) {
+        onDismiss?.();
+      }
+    };
+    $[15] = onDismiss;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  const setOpen = t6;
+  let t7;
+  if ($[17] !== isOpen || $[18] !== setOpen) {
+    t7 = {
+      open: isOpen,
+      setOpen
+    };
+    $[17] = isOpen;
+    $[18] = setOpen;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  const store = react.useDialogStore(t7);
+  let t8;
+  if ($[20] !== dividers || $[21] !== height || $[22] !== onDismiss) {
+    t8 = {
+      onDismiss,
+      height,
+      dividers
+    };
+    $[20] = dividers;
+    $[21] = height;
+    $[22] = onDismiss;
+    $[23] = t8;
+  } else {
+    t8 = $[23];
+  }
+  const contextValue = t8;
+  const portalRef = React__namespace.useRef(null);
+  const dialogRef = React__namespace.useRef(null);
+  const backdropRef = React__namespace.useRef(null);
+  let t9;
+  if ($[24] !== onDismiss) {
+    t9 = event => {
+      if (!dialogRef.current?.contains(event.target) && backdropRef.current?.contains(event.target)) {
+        event.stopPropagation();
+        onDismiss?.();
+      }
+    };
+    $[24] = onDismiss;
+    $[25] = t9;
+  } else {
+    t9 = $[25];
+  }
+  const handleBackdropClick = t9;
+  let t10;
+  let t11;
+  if ($[26] !== isOpen) {
+    t10 = function disableAccessibilityTreeOutside() {
+      if (!isOpen || !portalRef.current) {
+        return;
+      }
+      return ariaHidden.hideOthers(portalRef.current);
+    };
+    t11 = [isOpen];
+    $[26] = isOpen;
+    $[27] = t10;
+    $[28] = t11;
+  } else {
+    t10 = $[27];
+    t11 = $[28];
+  }
+  React__namespace.useLayoutEffect(t10, t11);
+  let t12;
+  if ($[29] !== hideOnEscape || $[30] !== onDismiss || $[31] !== onKeyDown) {
+    t12 = function handleKeyDown(event_0) {
+      if (hideOnEscape && onDismiss != null && event_0.key === "Escape" && !event_0.defaultPrevented) {
+        event_0.stopPropagation();
+        onDismiss();
+      }
+      onKeyDown?.(event_0);
+    };
+    $[29] = hideOnEscape;
+    $[30] = onDismiss;
+    $[31] = onKeyDown;
+    $[32] = t12;
+  } else {
+    t12 = $[32];
+  }
+  const handleKeyDown = t12;
+  if (!isOpen) {
+    return null;
+  }
+  const t13 = modal_module["default"][height];
+  const t14 = modal_module["default"][width];
+  let t15;
+  if ($[33] !== exceptionallySetOverlayClassName || $[34] !== t13 || $[35] !== t14) {
+    t15 = classNames__default["default"](modal_module["default"].overlay, t13, t14, exceptionallySetOverlayClassName);
+    $[33] = exceptionallySetOverlayClassName;
+    $[34] = t13;
+    $[35] = t14;
+    $[36] = t15;
+  } else {
+    t15 = $[36];
+  }
+  const t16 = hideOnInteractOutside ? handleBackdropClick : undefined;
+  const t17 = height === "expand" ? "full" : undefined;
+  const t18 = height === "expand" ? 1 : 0;
+  let t19;
+  if ($[37] !== t17 || $[38] !== t18) {
+    t19 = /*#__PURE__*/React__namespace.createElement(box.Box, {
+      borderRadius: "full",
+      background: "default",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      height: t17,
+      flexGrow: t18
+    });
+    $[37] = t17;
+    $[38] = t18;
+    $[39] = t19;
+  } else {
+    t19 = $[39];
+  }
+  let t20;
+  if ($[40] !== exceptionallySetClassName) {
+    t20 = classNames__default["default"](exceptionallySetClassName, modal_module["default"].container);
+    $[40] = exceptionallySetClassName;
+    $[41] = t20;
+  } else {
+    t20 = $[41];
+  }
+  let t21;
+  if ($[42] !== children || $[43] !== contextValue) {
+    t21 = /*#__PURE__*/React__namespace.createElement(ModalContext.Provider, {
+      value: contextValue
+    }, children);
+    $[42] = children;
+    $[43] = contextValue;
+    $[44] = t21;
+  } else {
+    t21 = $[44];
+  }
+  let t22;
+  if ($[45] !== handleKeyDown || $[46] !== props || $[47] !== store || $[48] !== t19 || $[49] !== t20 || $[50] !== t21) {
+    t22 = /*#__PURE__*/React__namespace.createElement(react.Dialog, _extends__default["default"]({}, props, {
+      ref: dialogRef,
+      render: t19,
+      className: t20,
+      store: store,
+      preventBodyScroll: true,
+      modal: false,
+      autoFocus: false,
+      autoFocusOnShow: false,
+      autoFocusOnHide: false,
+      portal: false,
+      backdrop: false,
+      hideOnInteractOutside: false,
+      hideOnEscape: false,
+      onKeyDown: handleKeyDown
+    }), t21);
+    $[45] = handleKeyDown;
+    $[46] = props;
+    $[47] = store;
+    $[48] = t19;
+    $[49] = t20;
+    $[50] = t21;
+    $[51] = t22;
+  } else {
+    t22 = $[51];
+  }
+  let t23;
+  if ($[52] !== autoFocus || $[53] !== t22) {
+    t23 = /*#__PURE__*/React__namespace.createElement(FocusLock__default["default"], {
+      autoFocus: autoFocus,
+      whiteList: isNotInternalFrame,
+      returnFocus: true,
+      crossFrame: false
+    }, t22);
+    $[52] = autoFocus;
+    $[53] = t22;
+    $[54] = t23;
+  } else {
+    t23 = $[54];
+  }
+  let t24;
+  if ($[55] !== t15 || $[56] !== t16 || $[57] !== t23) {
+    t24 = /*#__PURE__*/React__namespace.createElement(box.Box, {
+      "data-testid": "modal-overlay",
+      "data-overlay": true,
+      className: t15,
+      onPointerDown: t16,
+      ref: backdropRef
+    }, t23);
+    $[55] = t15;
+    $[56] = t16;
+    $[57] = t23;
+    $[58] = t24;
+  } else {
+    t24 = $[58];
+  }
+  let t25;
+  if ($[59] !== portalElement || $[60] !== t24) {
+    t25 = /*#__PURE__*/React__namespace.createElement(react.Portal, {
+      portalRef: portalRef,
+      portalElement: portalElement
+    }, t24);
+    $[59] = portalElement;
+    $[60] = t24;
+    $[61] = t25;
+  } else {
+    t25 = $[61];
+  }
+  return t25;
 }
+
+//
+// ModalCloseButton
+//
+
 /**
  * The close button rendered by ModalHeader. Provided independently so that consumers can customize
  * the button's label.
@@ -125,23 +392,63 @@ function Modal(_a) {
  * @see ModalHeader
  */
 function ModalCloseButton(props) {
-    var onDismiss = React__namespace.useContext(ModalContext).onDismiss;
-    var buttonRef = React__namespace.useRef(null);
-    React__namespace.useLayoutEffect(function skipAutoFocus() {
-        var button = buttonRef.current;
-        if (!button) {
-            return;
-        }
-        button.tabIndex = -1;
-        var rafId = requestAnimationFrame(function () {
-            button.tabIndex = 0;
-        });
-        return function () {
-            cancelAnimationFrame(rafId);
-        };
-    }, []);
-    return (React__namespace.createElement(button.IconButton, tslib.__assign({}, props, { ref: buttonRef, variant: "quaternary", onClick: onDismiss, icon: React__namespace.createElement(closeIcon.CloseIcon, null) })));
+  const $ = reactCompilerRuntime.c(6);
+  const {
+    onDismiss
+  } = React__namespace.useContext(ModalContext);
+  const buttonRef = React__namespace.useRef(null);
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = function skipAutoFocus() {
+      const button = buttonRef.current;
+      if (!button) {
+        return;
+      }
+      button.tabIndex = -1;
+      const rafId = requestAnimationFrame(() => {
+        button.tabIndex = 0;
+      });
+      return () => {
+        cancelAnimationFrame(rafId);
+      };
+    };
+    t1 = [];
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+  }
+  React__namespace.useLayoutEffect(t0, t1);
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /*#__PURE__*/React__namespace.createElement(closeIcon.CloseIcon, null);
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== onDismiss || $[4] !== props) {
+    t3 = /*#__PURE__*/React__namespace.createElement(button.IconButton, _extends__default["default"]({}, props, {
+      ref: buttonRef,
+      variant: "quaternary",
+      onClick: onDismiss,
+      icon: t2
+    }));
+    $[3] = onDismiss;
+    $[4] = props;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
 }
+
+//
+// ModalHeader
+//
+
 /**
  * Renders a standard modal header area with an optional close button.
  *
@@ -149,16 +456,124 @@ function ModalCloseButton(props) {
  * @see ModalFooter
  * @see ModalBody
  */
-function ModalHeader(_a) {
-    var children = _a.children, _b = _a.button, button = _b === void 0 ? true : _b, _c = _a.withDivider, withDivider = _c === void 0 ? false : _c, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["children", "button", "withDivider", "exceptionallySetClassName"]);
-    var dividers = React__namespace.useContext(ModalContext).dividers;
-    return (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement(box.Box, tslib.__assign({}, props, { as: "header", paddingLeft: "large", paddingRight: button === false || button === null ? 'large' : 'small', paddingY: "small", className: exceptionallySetClassName }),
-            React__namespace.createElement(columns.Columns, { space: "large", alignY: "center" },
-                React__namespace.createElement(columns.Column, { width: "auto" }, children),
-                button === false || button === null ? (React__namespace.createElement("div", { className: modal_module["default"].headerContent })) : (React__namespace.createElement(columns.Column, { width: "content", exceptionallySetClassName: modal_module["default"].buttonContainer, "data-testid": "button-container" }, typeof button === 'boolean' ? (React__namespace.createElement(ModalCloseButton, { "aria-label": "Close modal", autoFocus: false })) : (button))))),
-        withDivider ? React__namespace.createElement(divider.Divider, { weight: dividers }) : null));
+function ModalHeader(t0) {
+  const $ = reactCompilerRuntime.c(24);
+  let children;
+  let exceptionallySetClassName;
+  let props;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    var _t = t0;
+    ({
+      children,
+      button: t1,
+      withDivider: t2,
+      exceptionallySetClassName
+    } = _t);
+    props = _objectWithoutProperties__default["default"](_t, _excluded2);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = exceptionallySetClassName;
+    $[3] = props;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    children = $[1];
+    exceptionallySetClassName = $[2];
+    props = $[3];
+    t1 = $[4];
+    t2 = $[5];
+  }
+  const button = t1 === undefined ? true : t1;
+  const withDivider = t2 === undefined ? false : t2;
+  const {
+    dividers
+  } = React__namespace.useContext(ModalContext);
+  const t3 = button === false || button === null ? "large" : "small";
+  let t4;
+  if ($[6] !== children) {
+    t4 = /*#__PURE__*/React__namespace.createElement(columns.Column, {
+      width: "auto"
+    }, children);
+    $[6] = children;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== button) {
+    t5 = button === false || button === null ? /*#__PURE__*/React__namespace.createElement("div", {
+      className: modal_module["default"].headerContent
+    }) : /*#__PURE__*/React__namespace.createElement(columns.Column, {
+      width: "content",
+      exceptionallySetClassName: modal_module["default"].buttonContainer,
+      "data-testid": "button-container"
+    }, typeof button === "boolean" ? /*#__PURE__*/React__namespace.createElement(ModalCloseButton, {
+      "aria-label": "Close modal",
+      autoFocus: false
+    }) : button);
+    $[8] = button;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== t4 || $[11] !== t5) {
+    t6 = /*#__PURE__*/React__namespace.createElement(columns.Columns, {
+      space: "large",
+      alignY: "center"
+    }, t4, t5);
+    $[10] = t4;
+    $[11] = t5;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== exceptionallySetClassName || $[14] !== props || $[15] !== t3 || $[16] !== t6) {
+    t7 = /*#__PURE__*/React__namespace.createElement(box.Box, _extends__default["default"]({}, props, {
+      as: "header",
+      paddingLeft: "large",
+      paddingRight: t3,
+      paddingY: "small",
+      className: exceptionallySetClassName
+    }), t6);
+    $[13] = exceptionallySetClassName;
+    $[14] = props;
+    $[15] = t3;
+    $[16] = t6;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[18] !== dividers || $[19] !== withDivider) {
+    t8 = withDivider ? /*#__PURE__*/React__namespace.createElement(divider.Divider, {
+      weight: dividers
+    }) : null;
+    $[18] = dividers;
+    $[19] = withDivider;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  let t9;
+  if ($[21] !== t7 || $[22] !== t8) {
+    t9 = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, t7, t8);
+    $[21] = t7;
+    $[22] = t8;
+    $[23] = t9;
+  } else {
+    t9 = $[23];
+  }
+  return t9;
 }
+
+//
+// ModalBody
+//
+
 /**
  * Renders the body of a modal.
  *
@@ -171,12 +586,69 @@ function ModalHeader(_a) {
  * @see ModalHeader
  * @see ModalFooter
  */
-var ModalBody = React.forwardRef(function ModalBody(_a, ref) {
-    var exceptionallySetClassName = _a.exceptionallySetClassName, children = _a.children, props = tslib.__rest(_a, ["exceptionallySetClassName", "children"]);
-    var height = React__namespace.useContext(ModalContext).height;
-    return (React__namespace.createElement(box.Box, tslib.__assign({}, props, { ref: ref, className: exceptionallySetClassName, flexGrow: height === 'expand' ? 1 : 0, height: height === 'expand' ? 'full' : undefined, overflow: "auto" }),
-        React__namespace.createElement(box.Box, { padding: "large", paddingBottom: "xxlarge" }, children)));
+const ModalBody = /*#__PURE__*/React.forwardRef(function ModalBody(t0, ref) {
+  const $ = reactCompilerRuntime.c(13);
+  let children;
+  let exceptionallySetClassName;
+  let props;
+  if ($[0] !== t0) {
+    var _t2 = t0;
+    ({
+      exceptionallySetClassName,
+      children
+    } = _t2);
+    props = _objectWithoutProperties__default["default"](_t2, _excluded3);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = exceptionallySetClassName;
+    $[3] = props;
+  } else {
+    children = $[1];
+    exceptionallySetClassName = $[2];
+    props = $[3];
+  }
+  const {
+    height
+  } = React__namespace.useContext(ModalContext);
+  const t1 = height === "expand" ? 1 : 0;
+  const t2 = height === "expand" ? "full" : undefined;
+  let t3;
+  if ($[4] !== children) {
+    t3 = /*#__PURE__*/React__namespace.createElement(box.Box, {
+      padding: "large",
+      paddingBottom: "xxlarge"
+    }, children);
+    $[4] = children;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== exceptionallySetClassName || $[7] !== props || $[8] !== ref || $[9] !== t1 || $[10] !== t2 || $[11] !== t3) {
+    t4 = /*#__PURE__*/React__namespace.createElement(box.Box, _extends__default["default"]({}, props, {
+      ref: ref,
+      className: exceptionallySetClassName,
+      flexGrow: t1,
+      height: t2,
+      overflow: "auto"
+    }), t3);
+    $[6] = exceptionallySetClassName;
+    $[7] = props;
+    $[8] = ref;
+    $[9] = t1;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  return t4;
 });
+
+//
+// ModalFooter
+//
+
 /**
  * Renders a standard modal footer area.
  *
@@ -184,21 +656,114 @@ var ModalBody = React.forwardRef(function ModalBody(_a, ref) {
  * @see ModalHeader
  * @see ModalBody
  */
-function ModalFooter(_a) {
-    var exceptionallySetClassName = _a.exceptionallySetClassName, _b = _a.withDivider, withDivider = _b === void 0 ? false : _b, props = tslib.__rest(_a, ["exceptionallySetClassName", "withDivider"]);
-    var dividers = React__namespace.useContext(ModalContext).dividers;
-    return (React__namespace.createElement(React__namespace.Fragment, null,
-        withDivider ? React__namespace.createElement(divider.Divider, { weight: dividers }) : null,
-        React__namespace.createElement(box.Box, tslib.__assign({ as: "footer" }, props, { className: exceptionallySetClassName, padding: "large" }))));
+function ModalFooter(t0) {
+  const $ = reactCompilerRuntime.c(13);
+  let exceptionallySetClassName;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    var _t3 = t0;
+    ({
+      exceptionallySetClassName,
+      withDivider: t1
+    } = _t3);
+    props = _objectWithoutProperties__default["default"](_t3, _excluded4);
+    $[0] = t0;
+    $[1] = exceptionallySetClassName;
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    exceptionallySetClassName = $[1];
+    props = $[2];
+    t1 = $[3];
+  }
+  const withDivider = t1 === undefined ? false : t1;
+  const {
+    dividers
+  } = React__namespace.useContext(ModalContext);
+  let t2;
+  if ($[4] !== dividers || $[5] !== withDivider) {
+    t2 = withDivider ? /*#__PURE__*/React__namespace.createElement(divider.Divider, {
+      weight: dividers
+    }) : null;
+    $[4] = dividers;
+    $[5] = withDivider;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== exceptionallySetClassName || $[8] !== props) {
+    t3 = /*#__PURE__*/React__namespace.createElement(box.Box, _extends__default["default"]({
+      as: "footer"
+    }, props, {
+      className: exceptionallySetClassName,
+      padding: "large"
+    }));
+    $[7] = exceptionallySetClassName;
+    $[8] = props;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== t2 || $[11] !== t3) {
+    t4 = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, t2, t3);
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  return t4;
 }
+
+//
+// ModalActions
+//
+
 /**
  * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).
  * @see ModalFooter
  */
-function ModalActions(_a) {
-    var children = _a.children, props = tslib.__rest(_a, ["children"]);
-    return (React__namespace.createElement(ModalFooter, tslib.__assign({}, props),
-        React__namespace.createElement(inline.Inline, { align: "right", space: "large" }, children)));
+function ModalActions(t0) {
+  const $ = reactCompilerRuntime.c(8);
+  let children;
+  let props;
+  if ($[0] !== t0) {
+    var _t4 = t0;
+    ({
+      children
+    } = _t4);
+    props = _objectWithoutProperties__default["default"](_t4, _excluded5);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = props;
+  } else {
+    children = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== children) {
+    t1 = /*#__PURE__*/React__namespace.createElement(inline.Inline, {
+      align: "right",
+      space: "large"
+    }, children);
+    $[3] = children;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/React__namespace.createElement(ModalFooter, props, t1);
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
 
 exports.Modal = Modal;