@pingux/astro 2.149.0 → 2.149.1

package/lib/cjs/components/IconButton/IconButton.styles.d.ts

@@ -360,50 +360,12 @@ declare const _default: {
         position: string;
         top: number;
         right: number;
-        alignSelf: string;
         width: string;
         height: string;
         justifyContent: string;
         appearance: string;
         alignItems: string;
-        display: string;
-        flexGrow: number;
-        flexShrink: number;
-        borderRadius: string;
-        cursor: string;
-        bg: string;
-        p: string;
-        path: {
-            fill: string;
-        };
-        outline: string;
-        '&.is-focused': {
-            outline: string;
-            outlineColor: string;
-            outlineOffset: string;
-        };
-        '&.is-hovered': {
-            bg: string;
-            boxShadow: string;
-        };
-        '&.is-pressed': {
-            path: {
-                fill: string;
-            };
-            bg: string;
-            boxShadow: string;
-        };
-    };
-    modalHeaderCloseButton: {
-        position: string;
-        top: number;
-        right: number;
         alignSelf: string;
-        width: string;
-        height: string;
-        justifyContent: string;
-        appearance: string;
-        alignItems: string;
         display: string;
         flexGrow: number;
         flexShrink: number;

package/lib/cjs/components/IconButton/IconButton.styles.js

@@ -50,7 +50,7 @@ var base = {
     boxShadow: 'standard'
   },
   '&.is-pressed': {
-    path: {
+    'path': {
       fill: 'white'
     },
     bg: 'active',
@@ -79,7 +79,7 @@ var bidirectional = {
 var inverted = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'active',
   borderColor: 'active',
-  path: {
+  'path': {
     fill: 'white'
   },
   '&.is-hovered': {
@@ -117,29 +117,29 @@ var applicationPortal = _objectSpread(_objectSpread({}, base), {}, {
   background: 'transparent',
   '&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
   '&.is-hovered': {
-    path: {
+    'path': {
       fill: 'active'
     }
   },
   '&.is-pressed': {
-    path: {
+    'path': {
       fill: 'active'
     }
   }
 });
 var applicationPortalPinned = _objectSpread(_objectSpread({}, base), {}, {
-  path: {
+  'path': {
     fill: 'success.bright'
   },
   background: 'transparent',
   '&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
   '&.is-hovered': {
-    path: {
+    'path': {
       fill: 'active'
     }
   },
   '&.is-pressed': {
-    path: {
+    'path': {
       fill: 'active'
     }
   }
@@ -196,7 +196,6 @@ var _default = {
   inverted: inverted,
   messageCloseButton: _objectSpread(_objectSpread({}, base), _Message.messageCloseButton),
   modalCloseButton: _objectSpread(_objectSpread({}, base), _Modal.modalCloseButton),
-  modalHeaderCloseButton: _objectSpread(_objectSpread({}, base), _Modal.closeButton),
   invertedBadgeDeleteButton: _Badge.invertedBadgeDeleteButton,
   invertedSquare: invertedSquare,
   square: square,

package/lib/cjs/components/Modal/Modal.js

@@ -15,9 +15,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _toArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
@@ -29,7 +27,6 @@ var _Box = _interopRequireDefault(require("../Box"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _Text = _interopRequireDefault(require("../Text"));
-var _ModalHeader = _interopRequireDefault(require("./ModalHeader"));
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "state", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps", "headerContainerProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -98,12 +95,7 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var isOpenNoTransition = (state === null || state === void 0 ? void 0 : state.isTransitioning) === undefined && isOpen === true;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (_useStatusClasses2 = {}, (0, _defineProperty2["default"])(_useStatusClasses2, "is-".concat(size || 'custom'), size), (0, _defineProperty2["default"])(_useStatusClasses2, "isOpen", isOpen), (0, _defineProperty2["default"])(_useStatusClasses2, "isTransitioning", state === null || state === void 0 ? void 0 : state.isTransitioning), (0, _defineProperty2["default"])(_useStatusClasses2, "isOpenNoTransition", isOpenNoTransition), _useStatusClasses2)),
     classNames = _useStatusClasses.classNames;
-  var _React$Children$toArr = _react["default"].Children.toArray(children),
-    _React$Children$toArr2 = (0, _toArray2["default"])(_React$Children$toArr),
-    header = _React$Children$toArr2[0],
-    siblings = (0, _slice["default"])(_React$Children$toArr2).call(_React$Children$toArr2, 1);
-  var hasHeaderContent = /*#__PURE__*/_react["default"].isValidElement(header) && header.type === _ModalHeader["default"];
-  var titleContent = !hasHeaderContent && title && (isOnyx ? (0, _react2.jsx)(_Box["default"], {
+  var titleContent = title && (isOnyx ? (0, _react2.jsx)(_Box["default"], {
     variant: "modal.header"
   }, (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({}, titleProps, {
     variant: "modalTitle",
@@ -126,7 +118,7 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, propsContentProps, dialogProps, modalProps, {
     ref: modalRef,
     "aria-modal": true
-  }), titleContent && (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+  }), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "modal.headingContainer"
   }, headerContainerProps), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : (0, _react2.jsx)(_IconButton["default"], {
     "aria-label": "Close modal window",
@@ -138,9 +130,8 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     title: {
       name: 'Close Icon'
     }
-  }))), titleContent), isOnyx ? children : (0, _react2.jsx)(_Box["default"], {
-    pt: "md",
-    px: "lg"
+  }))), titleContent), (0, _react2.jsx)(_Box["default"], {
+    pt: "md"
   }, children)))));
 });
 Modal.defaultProps = {

package/lib/cjs/components/Modal/Modal.stories.d.ts

@@ -4,6 +4,4 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 export default _default;
 export declare const Default: StoryFn<ModalProps>;
 export declare const LargeContent: StoryFn<ModalProps>;
-export declare const LargeContentWithScroll: StoryFn<ModalProps>;
 export declare const WithInputField: StoryFn<ModalProps>;
-export declare const WithPopoverMenu: StoryFn<ModalProps>;

package/lib/cjs/components/Modal/Modal.stories.js

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithPopoverMenu = exports.WithInputField = exports.LargeContentWithScroll = exports.LargeContent = exports.Default = void 0;
+exports["default"] = exports.WithInputField = exports.LargeContent = exports.Default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
@@ -103,6 +103,21 @@ var _default = {
 exports["default"] = _default;
 var Default = function Default(args) {
   var state = (0, _hooks.useModalState)();
+  var ModalBodyContent = (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, null, "Do you want to continue with this action that you\u2018re performing?"), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    mr: "auto",
+    width: "100%",
+    variant: "modal.buttonsContainer"
+  }, (0, _react2.jsx)(_index.Button, {
+    variant: "primary",
+    onPress: state.close,
+    mr: "md",
+    "aria-label": "Continue"
+  }, "Continue"), (0, _react2.jsx)(_index.Button, {
+    variant: "link",
+    onPress: state.close,
+    "aria-label": "Cancel"
+  }, "Cancel")));
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
@@ -112,16 +127,10 @@ var Default = function Default(args) {
       tabIndex: state.isOpen ? -1 : 0
     }, "Open Modal"), (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.Modal, (0, _extends2["default"])({}, args, {
       isOpen: state.isOpen,
-      state: state
-    }), (0, _react2.jsx)(_index.ModalHeader, {
-      hasCloseButton: true,
       onClose: state.close,
+      state: state,
       title: "Continue"
-    }), (0, _react2.jsx)(_index.ModalBody, null, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, null, "Do you want to continue with this action that you\u2018re performing?"))), (0, _react2.jsx)(_index.ModalFooter, {
-      onSubmit: state.close,
-      onCancel: state.close,
-      primaryButtonText: "Continue"
-    })))
+    }), ModalBodyContent))
   );
 };
 exports.Default = Default;
@@ -142,55 +151,28 @@ var LargeContent = function LargeContent(args) {
       tabIndex: state.isOpen ? -1 : 0
     }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, (0, _extends2["default"])({}, args, {
       isOpen: state.isOpen,
-      onClose: state.close
-    }), (0, _react2.jsx)(_index.ModalHeader, {
-      hasCloseButton: true,
       onClose: state.close,
       title: "Lorem Ipsum"
-    }), (0, _react2.jsx)(_index.ModalBody, null, (0, _react2.jsx)(_index.Box, {
+    }), (0, _react2.jsx)(_index.Box, {
       gap: "lg"
-    }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, null, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, null, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, null, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, null, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, null, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, null, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, null, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."))), (0, _react2.jsx)(_index.ModalFooter, {
-      onSubmit: state.close,
-      onCancel: state.close
-    })))
+    }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, null, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, null, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, null, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, null, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, null, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, null, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, null, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.")), (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      variant: "modal.buttonsContainer"
+    }, (0, _react2.jsx)(_index.Button, {
+      variant: "primary",
+      onPress: state.close,
+      mr: "md",
+      "aria-label": "Continue"
+    }, "Continue"), (0, _react2.jsx)(_index.Button, {
+      variant: "link",
+      onPress: state.close,
+      "aria-label": "Cancel"
+    }, "Cancel"))))
   );
 };
 exports.LargeContent = LargeContent;
-var LargeContentWithScroll = function LargeContentWithScroll(args) {
-  var state = (0, _hooks.useModalState)();
-  return (
-    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
-    // readers when an overlay opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
-      onPress: state.open,
-      "aria-label": "Open modal",
-      tabIndex: state.isOpen ? -1 : 0
-    }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, (0, _extends2["default"])({}, args, {
-      isOpen: state.isOpen,
-      onClose: state.close
-    }), (0, _react2.jsx)(_index.ModalHeader, {
-      hasCloseButton: true,
-      onClose: state.close,
-      title: "Lorem Ipsum"
-    }), (0, _react2.jsx)(_index.ModalBody, {
-      isScrollable: true,
-      scrollProps: {
-        maxHeight: '400px'
-      }
-    }, (0, _react2.jsx)(_index.Box, {
-      gap: "lg",
-      pr: "lg"
-    }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, null, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, null, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, null, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, null, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, null, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, null, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, null, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."))), (0, _react2.jsx)(_index.ModalFooter, {
-      onSubmit: state.close,
-      onCancel: state.close
-    })))
-  );
-};
-exports.LargeContentWithScroll = LargeContentWithScroll;
 var WithInputField = function WithInputField() {
   var state = (0, _hooks.useModalState)();
-  var _useGetTheme = (0, _hooks.useGetTheme)(),
-    isOnyx = _useGetTheme.themeState.isOnyx;
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     value = _useState2[0],
@@ -211,9 +193,8 @@ var WithInputField = function WithInputField() {
   }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, {
     isOpen: state.isOpen,
     onClose: state.close
-  }, (0, _react2.jsx)(_index.ModalBody, null, (0, _react2.jsx)(_index.Box, {
-    gap: "lg",
-    pt: isOnyx ? '' : 'lg'
+  }, (0, _react2.jsx)(_index.Box, {
+    gap: "lg"
   }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet consectetur"), (0, _react2.jsx)(_index.SelectField, {
     label: "Select an option"
   }, (0, _react2.jsx)(_index.Item, null, "Red"), (0, _react2.jsx)(_index.Item, null, "Green"), (0, _react2.jsx)(_index.Item, null, "Blue")), (0, _react2.jsx)(_index.RadioGroupField, {
@@ -252,45 +233,21 @@ var WithInputField = function WithInputField() {
       key: item.key,
       textValue: item.name
     }, item.name);
-  }))), (0, _react2.jsx)(_index.ModalFooter, {
-    onSubmit: state.close,
-    onCancel: state.close
-  })));
+  }), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    variant: "modal.buttonsContainer"
+  }, (0, _react2.jsx)(_index.Button, {
+    variant: "primary",
+    onPress: state.close,
+    mr: "md",
+    "aria-label": "Continue"
+  }, "Continue"), (0, _react2.jsx)(_index.Button, {
+    variant: "link",
+    onPress: state.close,
+    "aria-label": "Cancel"
+  }, "Cancel")))));
 };
 exports.WithInputField = WithInputField;
-var WithPopoverMenu = function WithPopoverMenu() {
-  var state = (0, _hooks.useModalState)();
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
-    onPress: state.open,
-    "aria-label": "Open modal"
-  }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, {
-    isOpen: state.isOpen,
-    onClose: state.close
-  }, (0, _react2.jsx)(_index.ModalHeader, {
-    hasCloseButton: true,
-    onClose: state.close,
-    title: "Lorem Ipsum"
-  }), (0, _react2.jsx)(_index.ModalBody, null, (0, _react2.jsx)(_index.Box, {
-    gap: "lg"
-  }, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
-    onAction: function onAction() {
-      return console.log('on action');
-    }
-  }, (0, _react2.jsx)(_index.Item, {
-    key: "edit"
-  }, "Edit"), (0, _react2.jsx)(_index.Item, {
-    key: "duplicate"
-  }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
-    key: "delete",
-    textValue: "delete"
-  }, (0, _react2.jsx)(_index.Text, {
-    color: "critical.bright"
-  }, "Delete")))))), (0, _react2.jsx)(_index.ModalFooter, {
-    onSubmit: state.close,
-    onCancel: state.close
-  })));
-};
-exports.WithPopoverMenu = WithPopoverMenu;
 WithInputField.parameters = {
   a11y: {
     config: {

package/lib/cjs/components/Modal/Modal.styles.d.ts

@@ -1,16 +1,7 @@
-export declare const closeButton: {
-    position: string;
-    top: number;
-    right: number;
-    alignSelf: string;
-    width: string;
-    height: string;
-};
 export declare const modalCloseButton: {
     position: string;
     top: number;
     right: number;
-    alignSelf: string;
     width: string;
     height: string;
 };
@@ -28,15 +19,21 @@ declare const _default: {
         background: string;
         display: string;
         alignItems: string;
-        overflowY: string;
+        justifyContent: string;
     };
     content: {
+        position: string;
         outline: string;
         background: string;
         color: string;
+        pt: string;
+        pr: string;
+        pb: string;
+        pl: string;
         boxShadow: string;
         borderRadius: number;
-        margin: string;
+        maxHeight: string;
+        overflowY: string;
         '&.is-extra-small': {
             maxWidth: string;
             width: string;
@@ -60,12 +57,26 @@ declare const _default: {
     };
     headingContainer: {
         position: string;
+        top: string;
+        mt: string;
+        mb: string;
+        mr: string;
+        pt: string;
+        pr: string;
+        pb: string;
         backgroundColor: string;
-        px: string;
-        py: string;
     };
-    bodyContainer: {
-        px: string;
+    buttonsContainer: {
+        position: string;
+        bottom: string;
+        p: number;
+        mb: string;
+        pb: string;
+        pt: string;
+        background: string;
+        '& > button': {
+            flexGrow: number;
+        };
     };
     title: {
         mr: string;
@@ -83,34 +94,6 @@ declare const _default: {
         position: string;
         top: number;
         right: number;
-        alignSelf: string;
-        width: string;
-        height: string;
-    };
-    buttonsContainer: {
-        p: number;
-        pb: string;
-        pt: string;
-        background: string;
-    };
-    header: {
-        position: string;
-        backgroundColor: string;
-        pb: string;
-    };
-    body: {};
-    footer: {
-        py: string;
-        background: string;
-        '& > button': {
-            flexGrow: number;
-        };
-    };
-    closeButton: {
-        position: string;
-        top: number;
-        right: number;
-        alignSelf: string;
         width: string;
         height: string;
     };

package/lib/cjs/components/Modal/Modal.styles.js

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.modalCloseButton = exports["default"] = exports.closeButton = void 0;
+exports.modalCloseButton = exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _Text = require("../Text/Text.styles");
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -30,15 +30,22 @@ var container = {
   background: '#00000040',
   display: 'flex',
   alignItems: 'center',
-  overflowY: 'auto'
+  justifyContent: 'center'
 };
 var content = {
+  position: 'relative',
   outline: 'none',
   background: 'white',
   color: 'black',
+  pt: 'md',
+  pr: 'lg',
+  pb: 'lg',
+  pl: 'lg',
   boxShadow: 'standard',
   borderRadius: 3,
-  margin: 'auto',
+  maxHeight: 'calc(100vh - 80px)',
+  // 100% of the window minus 40px on top and bottom
+  overflowY: 'auto',
   '&.is-extra-small': {
     maxWidth: 'none',
     width: 'container.xs'
@@ -61,41 +68,27 @@ var content = {
   }
 };
 var headingContainer = {
-  position: 'relative',
-  backgroundColor: 'background.base',
-  px: 'lg',
-  py: 'md'
-};
-var header = {
-  position: 'relative',
-  backgroundColor: 'background.base',
-  pb: 'md'
-};
-var body = {};
-var closeButton = {
-  position: 'absolute',
-  top: 0,
-  right: -14,
-  alignSelf: 'auto',
-  width: '22px',
-  height: '22px'
-};
-exports.closeButton = closeButton;
-var bodyContainer = {
-  px: 'lg'
-};
-var footer = {
-  py: 'lg',
-  background: 'white',
-  '& > button': {
-    flexGrow: 0
-  }
+  position: 'sticky',
+  top: '-md',
+  mt: '-md',
+  mb: '-md',
+  mr: '-lg',
+  pt: 'md',
+  pr: 'lg',
+  pb: 'md',
+  backgroundColor: 'background.base'
 };
 var buttonsContainer = {
+  position: 'sticky',
+  bottom: '-lg',
   p: 0,
+  mb: '-lg',
   pb: 'lg',
   pt: 'lg',
-  background: 'white'
+  background: 'white',
+  '& > button': {
+    flexGrow: 0
+  }
 };
 var title = _objectSpread(_objectSpread({}, _Text.text.title), {}, {
   mr: 'sm',
@@ -105,7 +98,6 @@ var modalCloseButton = {
   position: 'absolute',
   top: 14,
   right: 10,
-  alignSelf: 'auto',
   width: '22px',
   height: '22px'
 };
@@ -115,13 +107,8 @@ var _default = {
   container: container,
   content: content,
   headingContainer: headingContainer,
-  bodyContainer: bodyContainer,
-  title: title,
-  modalCloseButton: modalCloseButton,
   buttonsContainer: buttonsContainer,
-  header: header,
-  body: body,
-  footer: footer,
-  closeButton: closeButton
+  title: title,
+  modalCloseButton: modalCloseButton
 };
 exports["default"] = _default;

package/lib/cjs/components/Modal/index.d.ts

@@ -1,4 +1 @@
 export { default } from './Modal';
-export { default as ModalBody } from './ModalBody';
-export { default as ModalFooter } from './ModalFooter';
-export { default as ModalHeader } from './ModalHeader';

package/lib/cjs/components/Modal/index.js

@@ -5,31 +5,10 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-_Object$defineProperty(exports, "ModalBody", {
-  enumerable: true,
-  get: function get() {
-    return _ModalBody["default"];
-  }
-});
-_Object$defineProperty(exports, "ModalFooter", {
-  enumerable: true,
-  get: function get() {
-    return _ModalFooter["default"];
-  }
-});
-_Object$defineProperty(exports, "ModalHeader", {
-  enumerable: true,
-  get: function get() {
-    return _ModalHeader["default"];
-  }
-});
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _Modal["default"];
   }
 });
-var _Modal = _interopRequireDefault(require("./Modal"));
-var _ModalBody = _interopRequireDefault(require("./ModalBody"));
-var _ModalFooter = _interopRequireDefault(require("./ModalFooter"));
-var _ModalHeader = _interopRequireDefault(require("./ModalHeader"));
+var _Modal = _interopRequireDefault(require("./Modal"));

package/lib/cjs/components/Modal/tests/Modal.integration.test.js

@@ -79,8 +79,6 @@ test('keyboard interaction with the trigger should open the modal', function ()
 test('close button should close the modal', function () {
   getComposedComponent({
     isDefaultOpen: true
-  }, {
-    title: 'Lorem Ipsum'
   });
 
   // Target the close button
@@ -90,8 +88,6 @@ test('close button should close the modal', function () {
 test('keyboard interactions on the close button should close the modal', function () {
   getComposedComponent({
     isDefaultOpen: true
-  }, {
-    title: 'Lorem Ipsum'
   });
 
   // Target the close button