@pingux/astro 2.148.0-alpha.0 → 2.148.0-alpha.2

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

@@ -360,12 +360,50 @@ 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,6 +196,7 @@ 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/Convenience/ModalBody.stories.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<{
+    children?: ReactNode;
+}>;

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _storybookAddonDesigns = require("storybook-addon-designs");
+var _storybookDocsLayout = _interopRequireDefault(require("../../../../.storybook/storybookDocsLayout"));
+var _index = require("../../../index");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Components/Modal/Convenience/ModalBody',
+  component: _index.ModalBody,
+  decorators: [_storybookAddonDesigns.withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_storybookDocsLayout["default"], null);
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (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?")));
+};
+exports.Default = Default;

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

@@ -0,0 +1,5 @@
+import { StoryFn } from '@storybook/react';
+import { ModalFooterProps } from '../../../types/Modal';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<ModalFooterProps>;

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

@@ -0,0 +1,35 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _storybookAddonDesigns = require("storybook-addon-designs");
+var _storybookDocsLayout = _interopRequireDefault(require("../../../../.storybook/storybookDocsLayout"));
+var _hooks = require("../../../hooks");
+var _index = require("../../../index");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Components/Modal/Convenience/ModalFooter',
+  component: _index.ModalFooter,
+  decorators: [_storybookAddonDesigns.withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_storybookDocsLayout["default"], null);
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default() {
+  var state = (0, _hooks.useModalState)();
+  return (0, _react2.jsx)(_index.ModalFooter, {
+    onSubmit: state.close,
+    onCancel: state.close
+  });
+};
+exports.Default = Default;

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

@@ -0,0 +1,5 @@
+import { StoryFn } from '@storybook/react';
+import { ModalHeaderProps } from '../../../types/Modal';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<ModalHeaderProps>;

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _storybookAddonDesigns = require("storybook-addon-designs");
+var _storybookDocsLayout = _interopRequireDefault(require("../../../../.storybook/storybookDocsLayout"));
+var _hooks = require("../../../hooks");
+var _index = require("../../../index");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Components/Modal/Convenience/ModalHeader',
+  component: _index.ModalHeader,
+  decorators: [_storybookAddonDesigns.withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_storybookDocsLayout["default"], null);
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default() {
+  var state = (0, _hooks.useModalState)();
+  return (0, _react2.jsx)(_index.ModalHeader, {
+    hasCloseButton: true,
+    onClose: state.close,
+    title: "Continue"
+  });
+};
+exports.Default = Default;

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

@@ -15,7 +15,9 @@ _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"));
@@ -27,6 +29,7 @@ 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); }
@@ -95,7 +98,12 @@ 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 titleContent = title && (isOnyx ? (0, _react2.jsx)(_Box["default"], {
+  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"], {
     variant: "modal.header"
   }, (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({}, titleProps, {
     variant: "modalTitle",
@@ -118,7 +126,7 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, propsContentProps, dialogProps, modalProps, {
     ref: modalRef,
     "aria-modal": true
-  }), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+  }), titleContent && (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",
@@ -130,8 +138,9 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     title: {
       name: 'Close Icon'
     }
-  }))), titleContent), (0, _react2.jsx)(_Box["default"], {
-    pt: "md"
+  }))), titleContent), isOnyx ? children : (0, _react2.jsx)(_Box["default"], {
+    pt: "md",
+    px: "lg"
   }, children)))));
 });
 Modal.defaultProps = {

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

@@ -4,5 +4,6 @@ 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.LargeContent = exports.Default = void 0;
+exports["default"] = exports.WithPopoverMenu = exports.WithInputField = exports.LargeContentWithScroll = 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,21 +103,6 @@ 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.
@@ -127,10 +112,16 @@ 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"
-    }), ModalBodyContent))
+    }), (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"
+    })))
   );
 };
 exports.Default = Default;
@@ -151,28 +142,55 @@ 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.Box, {
+    }), (0, _react2.jsx)(_index.ModalBody, null, (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.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"))))
+    }, (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.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],
@@ -193,8 +211,9 @@ var WithInputField = function WithInputField() {
   }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, {
     isOpen: state.isOpen,
     onClose: state.close
-  }, (0, _react2.jsx)(_index.Box, {
-    gap: "lg"
+  }, (0, _react2.jsx)(_index.ModalBody, null, (0, _react2.jsx)(_index.Box, {
+    gap: "lg",
+    pt: isOnyx ? '' : '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, {
@@ -233,19 +252,10 @@ var WithInputField = function WithInputField() {
       key: item.key,
       textValue: item.name
     }, item.name);
-  }), (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")))));
+  }))), (0, _react2.jsx)(_index.ModalFooter, {
+    onSubmit: state.close,
+    onCancel: state.close
+  })));
 };
 exports.WithInputField = WithInputField;
 var WithPopoverMenu = function WithPopoverMenu() {
@@ -256,9 +266,13 @@ var WithPopoverMenu = function WithPopoverMenu() {
   }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, {
     isOpen: state.isOpen,
     onClose: state.close
-  }, (0, _react2.jsx)(_index.Box, {
+  }, (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.Text, null, "Lorem ipsum dolor sit amet consectetur"), (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+  }, (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');
     }
@@ -271,7 +285,10 @@ var WithPopoverMenu = function WithPopoverMenu() {
     textValue: "delete"
   }, (0, _react2.jsx)(_index.Text, {
     color: "critical.bright"
-  }, "Delete")))))));
+  }, "Delete")))))), (0, _react2.jsx)(_index.ModalFooter, {
+    onSubmit: state.close,
+    onCancel: state.close
+  })));
 };
 exports.WithPopoverMenu = WithPopoverMenu;
 WithInputField.parameters = {

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

@@ -1,7 +1,16 @@
+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;
 };
@@ -19,21 +28,15 @@ declare const _default: {
         background: string;
         display: string;
         alignItems: string;
-        justifyContent: string;
+        overflowY: string;
     };
     content: {
-        position: string;
         outline: string;
         background: string;
         color: string;
-        pt: string;
-        pr: string;
-        pb: string;
-        pl: string;
         boxShadow: string;
         borderRadius: number;
-        maxHeight: string;
-        overflowY: string;
+        margin: string;
         '&.is-extra-small': {
             maxWidth: string;
             width: string;
@@ -57,26 +60,12 @@ 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;
     };
-    buttonsContainer: {
-        position: string;
-        bottom: string;
-        p: number;
-        mb: string;
-        pb: string;
-        pt: string;
-        background: string;
-        '& > button': {
-            flexGrow: number;
-        };
+    bodyContainer: {
+        px: string;
     };
     title: {
         mr: string;
@@ -94,6 +83,34 @@ 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;
     };