@pingux/astro 2.147.1-alpha.1 → 2.148.0-alpha.1

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -749,17 +749,10 @@ declare const _default: {
     modal: {
         content: {
             boxShadow: string;
-            px: string;
-            pb: string;
-            pt: number;
             borderRadius: string;
             opacity: number;
-            top: string;
-            transform: string;
             transition: string;
             m: string[];
-            maxHeight: string;
-            overflowY: string;
             '&.is-open-no-transition': {
                 opacity: string;
                 transform: string;
@@ -789,13 +782,35 @@ declare const _default: {
                 maxWidth: string[];
             };
         };
-        container: {
-            justifyContent: string;
+        headingContainer: {
+            borderBottom: string;
+            borderBottomColor: string;
+            bg: string;
+            borderRadius: string;
         };
         header: {
-            pt: string;
-            bg: string;
-            mb: string;
+            borderBottom: string;
+            borderBottomColor: string;
+            borderRadius: string;
+            px: string;
+            py: string;
+        };
+        bodyContainer: {
+            p: string;
+        };
+        body: {
+            p: string;
+        };
+        footer: {
+            borderTop: string;
+            borderTopColor: string;
+            borderRadius: string;
+            p: string;
+        };
+        footerContainer: {
+            borderTop: string;
+            borderTopColor: string;
+            borderRadius: string;
         };
     };
     navBar: {

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -83,17 +83,10 @@ var modalSize = {
 var modal = {
   content: {
     boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.5)',
-    px: 'lg',
-    pb: 'lg',
-    pt: 0,
-    borderRadius: '4px',
+    borderRadius: '1em',
     opacity: 0,
-    top: '0',
-    transform: 'translate(0, -50px)',
     transition: 'opacity 300ms ease, transform 500ms ease-out',
     m: ['sm', 'sm', '1.75rem auto'],
-    maxHeight: 'calc(100vh - 3.5rem)',
-    overflowY: 'auto',
     '&.is-open-no-transition': {
       opacity: '100%',
       transform: 'none'
@@ -123,13 +116,35 @@ var modal = {
       maxWidth: modalSize.full
     }
   },
-  container: {
-    justifyContent: 'start'
+  headingContainer: {
+    borderBottom: '1px solid',
+    borderBottomColor: 'gray-200',
+    bg: 'background.base',
+    borderRadius: '1em 1em 0px 0px'
   },
   header: {
-    pt: 'lg',
-    bg: 'background.base',
-    mb: 'lg'
+    borderBottom: '1px solid',
+    borderBottomColor: 'gray-200',
+    borderRadius: '1em 1em 0px 0px',
+    px: 'lg',
+    py: 'md'
+  },
+  bodyContainer: {
+    p: 'lg'
+  },
+  body: {
+    p: 'lg'
+  },
+  footer: {
+    borderTop: '1px solid',
+    borderTopColor: 'gray-200',
+    borderRadius: '0px 0px 1em 1em',
+    p: 'lg'
+  },
+  footerContainer: {
+    borderTop: '1px solid',
+    borderTopColor: 'gray-200',
+    borderRadius: '0px 0px 1em 1em'
   }
 };
 var listBox = {

package/lib/cjs/types/Modal.d.ts

@@ -33,6 +33,8 @@ export interface ModalProps extends DOMAttributes, TestingAttributes {
      * `() => void`
      */
     onClose?: () => void;
+    onSubmit?: () => void;
+    onCancel?: () => void;
     /**
      * When a user interacts with the argument element outside of the overlay ref, return true if
      * onClose should be called. This gives you a chance to filter out interaction with elements that
@@ -59,3 +61,20 @@ export interface ModalProps extends DOMAttributes, TestingAttributes {
     containerProps?: object;
     headerContainerProps?: object;
 }
+export type ModalHeaderProps = {
+    titleProps?: object;
+    containerProps?: object;
+    closeButton?: ReactNode;
+    hasCloseButton?: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    hasNoSeparator?: boolean;
+};
+export type ModalFooterProps = {
+    onSubmit?: () => void;
+    onCancel?: () => void;
+    children?: ReactNode;
+    footerProps?: object;
+    primaryButtonText?: string;
+    secondaryButtonText?: string;
+};

package/lib/components/Badge/Badge.styles.js

@@ -51,6 +51,7 @@ var multivaluesBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   }
 });
 var selectedItemBadge = _objectSpread(_objectSpread({}, multivaluesBadge), {}, {
+  bg: '#4462ED !important',
   py: 3,
   pr: 0,
   my: 3
@@ -63,12 +64,15 @@ var readOnlyBadge = _objectSpread(_objectSpread({}, multivaluesBadge), {}, {
 var itemBadgeWithSlot = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
   p: 3,
   my: 0,
-  backgroundColor: 'white',
+  bg: 'white !important',
   '& span': {
     color: 'text.primary',
     mr: '2px',
     lineHeight: '16px'
   },
+  '& svg': {
+    fill: 'neutral.10'
+  },
   maxHeight: '22px'
 });
 var environmentBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
@@ -105,7 +109,7 @@ export var badgeDeleteButton = _objectSpread(_objectSpread({}, deleteButton), {}
     }
   },
   '&.is-pressed': {
-    'path': {
+    path: {
       fill: 'white'
     },
     bg: '#4462ED !important'

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

@@ -17,7 +17,7 @@ import { copyButton } from '../CopyText/CopyText.styles';
 import { containedIcon } from '../DatePicker/DatePicker.styles';
 import { hintButton } from '../HelpHint/HelpHint.styles';
 import { messageCloseButton } from '../Messages/Message.styles';
-import { modalCloseButton } from '../Modal/Modal.styles';
+import { closeButton, modalCloseButton } from '../Modal/Modal.styles';
 import { button } from '../TooltipTrigger/Tooltip.styles';
 export var base = {
   justifyContent: 'center',
@@ -43,7 +43,7 @@ export var base = {
     boxShadow: 'standard'
   },
   '&.is-pressed': {
-    'path': {
+    path: {
       fill: 'white'
     },
     bg: 'active',
@@ -71,7 +71,7 @@ var bidirectional = {
 var inverted = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'active',
   borderColor: 'active',
-  'path': {
+  path: {
     fill: 'white'
   },
   '&.is-hovered': {
@@ -108,29 +108,29 @@ var applicationPortal = _objectSpread(_objectSpread({}, base), {}, {
   background: 'transparent',
   '&.is-focused': _objectSpread({}, 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({}, defaultFocus),
   '&.is-hovered': {
-    'path': {
+    path: {
       fill: 'active'
     }
   },
   '&.is-pressed': {
-    'path': {
+    path: {
       fill: 'active'
     }
   }
@@ -187,6 +187,7 @@ export default {
   inverted: inverted,
   messageCloseButton: _objectSpread(_objectSpread({}, base), messageCloseButton),
   modalCloseButton: _objectSpread(_objectSpread({}, base), modalCloseButton),
+  modalHeaderCloseButton: _objectSpread(_objectSpread({}, base), closeButton),
   invertedBadgeDeleteButton: invertedBadgeDeleteButton,
   invertedSquare: invertedSquare,
   square: square,

package/lib/components/ListBox/Option.js

@@ -125,19 +125,23 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
     onPointerOver: setFocusOnHover
   }, theseOptionProps, others, {
     "aria-label": ariaLabel
-  }), isCondensed ? ___EmotionJSX(Icon, {
+  }), isCondensed ? ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    flex: "1"
+  }, ___EmotionJSX(Icon, {
     icon: isSelected ? CheckedIcon : UncheckedIcon,
     color: "active",
     size: "24px",
     mr: "xs",
     className: classNames,
     variant: "listBox.checkboxIcon"
-  }) : isSelected && !isOnyx && shouldShowSelectedOption && ___EmotionJSX(Icon, {
+  }), rendered) : ___EmotionJSX(React.Fragment, null, isSelected && !isOnyx && shouldShowSelectedOption && ___EmotionJSX(Icon, {
     icon: CircleSmallIcon,
     title: {
       name: 'Circle Small Icon'
     }
-  }), rendered, isSelected && isOnyx && shouldShowSelectedOption && ___EmotionJSX(Icon, {
+  }), rendered), isSelected && isOnyx && shouldShowSelectedOption && ___EmotionJSX(Icon, {
     icon: CheckIcon,
     title: {
       name: 'Check Icon'

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { withDesign } from 'storybook-addon-designs';
+import DocsLayout from '../../../../.storybook/storybookDocsLayout';
+import { Box, ModalBody, Text } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/Modal/Convenience/ModalBody',
+  component: ModalBody,
+  decorators: [withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(DocsLayout, null);
+      }
+    }
+  }
+};
+export var Default = function Default() {
+  return ___EmotionJSX(ModalBody, null, ___EmotionJSX(Box, null, ___EmotionJSX(Text, null, "Do you want to continue with this action that you\u2018re performing?")));
+};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { withDesign } from 'storybook-addon-designs';
+import DocsLayout from '../../../../.storybook/storybookDocsLayout';
+import { useModalState } from '../../../hooks';
+import { ModalFooter } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/Modal/Convenience/ModalFooter',
+  component: ModalFooter,
+  decorators: [withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(DocsLayout, null);
+      }
+    }
+  }
+};
+export var Default = function Default() {
+  var state = useModalState();
+  return ___EmotionJSX(ModalFooter, {
+    onSubmit: state.close,
+    onCancel: state.close
+  });
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { withDesign } from 'storybook-addon-designs';
+import DocsLayout from '../../../../.storybook/storybookDocsLayout';
+import { useModalState } from '../../../hooks';
+import { ModalHeader } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/Modal/Convenience/ModalHeader',
+  component: ModalHeader,
+  decorators: [withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(DocsLayout, null);
+      }
+    }
+  }
+};
+export var Default = function Default() {
+  var state = useModalState();
+  return ___EmotionJSX(ModalHeader, {
+    hasCloseButton: true,
+    onClose: state.close,
+    title: "Continue"
+  });
+};

package/lib/components/Modal/Modal.js

@@ -7,9 +7,11 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _toArray from "@babel/runtime-corejs3/helpers/esm/toArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "state", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps", "headerContainerProps"];
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef } from 'react';
@@ -21,6 +23,7 @@ import Box from '../Box';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import Text from '../Text';
+import ModalHeader from './ModalHeader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useStatusClasses2;
@@ -84,7 +87,12 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   var isOpenNoTransition = (state === null || state === void 0 ? void 0 : state.isTransitioning) === undefined && isOpen === true;
   var _useStatusClasses = useStatusClasses(className, (_useStatusClasses2 = {}, _defineProperty(_useStatusClasses2, "is-".concat(size || 'custom'), size), _defineProperty(_useStatusClasses2, "isOpen", isOpen), _defineProperty(_useStatusClasses2, "isTransitioning", state === null || state === void 0 ? void 0 : state.isTransitioning), _defineProperty(_useStatusClasses2, "isOpenNoTransition", isOpenNoTransition), _useStatusClasses2)),
     classNames = _useStatusClasses.classNames;
-  var titleContent = title && (isOnyx ? ___EmotionJSX(Box, {
+  var _React$Children$toArr = React.Children.toArray(children),
+    _React$Children$toArr2 = _toArray(_React$Children$toArr),
+    header = _React$Children$toArr2[0],
+    siblings = _sliceInstanceProperty(_React$Children$toArr2).call(_React$Children$toArr2, 1);
+  var hasHeaderContent = /*#__PURE__*/React.isValidElement(header) && header.type === ModalHeader;
+  var titleContent = !hasHeaderContent && title && (isOnyx ? ___EmotionJSX(Box, {
     variant: "modal.header"
   }, ___EmotionJSX(Text, _extends({}, titleProps, {
     variant: "modalTitle",
@@ -107,7 +115,7 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   }, propsContentProps, dialogProps, modalProps, {
     ref: modalRef,
     "aria-modal": true
-  }), ___EmotionJSX(Box, _extends({
+  }), titleContent && ___EmotionJSX(Box, _extends({
     variant: "modal.headingContainer"
   }, headerContainerProps), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, {
     "aria-label": "Close modal window",
@@ -119,8 +127,9 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
     title: {
       name: 'Close Icon'
     }
-  }))), titleContent), ___EmotionJSX(Box, {
-    pt: "md"
+  }))), titleContent), isOnyx ? children : ___EmotionJSX(Box, {
+    pt: "md",
+    px: "lg"
   }, children)))));
 });
 Modal.defaultProps = {

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

@@ -3,8 +3,8 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { useModalState } from '../../hooks';
-import { Box, Button, Item, Menu, Modal, OverlayProvider, PopoverMenu, RadioField, RadioGroupField, SearchField, SelectField, Text } from '../../index';
+import { useGetTheme, useModalState } from '../../hooks';
+import { Box, Button, Item, Menu, Modal, ModalBody, ModalFooter, ModalHeader, OverlayProvider, PopoverMenu, RadioField, RadioGroupField, SearchField, SelectField, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { modalSizes } from '../../utils/devUtils/constants/modalSizes';
 import ModalReadme from './Modal.mdx';
@@ -89,21 +89,6 @@ export default {
 };
 export var Default = function Default(args) {
   var state = useModalState();
-  var ModalBodyContent = ___EmotionJSX(Box, null, ___EmotionJSX(Text, null, "Do you want to continue with this action that you\u2018re performing?"), ___EmotionJSX(Box, {
-    isRow: true,
-    mr: "auto",
-    width: "100%",
-    variant: "modal.buttonsContainer"
-  }, ___EmotionJSX(Button, {
-    variant: "primary",
-    onPress: state.close,
-    mr: "md",
-    "aria-label": "Continue"
-  }, "Continue"), ___EmotionJSX(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.
@@ -113,10 +98,16 @@ export var Default = function Default(args) {
       tabIndex: state.isOpen ? -1 : 0
     }, "Open Modal"), (state.isOpen || state.isTransitioning) && ___EmotionJSX(Modal, _extends({}, args, {
       isOpen: state.isOpen,
+      state: state
+    }), ___EmotionJSX(ModalHeader, {
+      hasCloseButton: true,
       onClose: state.close,
-      state: state,
       title: "Continue"
-    }), ModalBodyContent))
+    }), ___EmotionJSX(ModalBody, null, ___EmotionJSX(Box, null, ___EmotionJSX(Text, null, "Do you want to continue with this action that you\u2018re performing?"))), ___EmotionJSX(ModalFooter, {
+      onSubmit: state.close,
+      onCancel: state.close,
+      primaryButtonText: "Continue"
+    })))
   );
 };
 Default.parameters = {
@@ -136,27 +127,53 @@ export var LargeContent = function LargeContent(args) {
       tabIndex: state.isOpen ? -1 : 0
     }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, _extends({}, args, {
       isOpen: state.isOpen,
+      onClose: state.close
+    }), ___EmotionJSX(ModalHeader, {
+      hasCloseButton: true,
       onClose: state.close,
       title: "Lorem Ipsum"
-    }), ___EmotionJSX(Box, {
+    }), ___EmotionJSX(ModalBody, null, ___EmotionJSX(Box, {
       gap: "lg"
-    }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, null, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, null, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, null, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, null, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, null, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, null, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, null, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.")), ___EmotionJSX(Box, {
-      isRow: true,
-      variant: "modal.buttonsContainer"
-    }, ___EmotionJSX(Button, {
-      variant: "primary",
-      onPress: state.close,
-      mr: "md",
-      "aria-label": "Continue"
-    }, "Continue"), ___EmotionJSX(Button, {
-      variant: "link",
-      onPress: state.close,
-      "aria-label": "Cancel"
-    }, "Cancel"))))
+    }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, null, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, null, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, null, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, null, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, null, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, null, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, null, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."))), ___EmotionJSX(ModalFooter, {
+      onSubmit: state.close,
+      onCancel: state.close
+    })))
+  );
+};
+export var LargeContentWithScroll = function LargeContentWithScroll(args) {
+  var state = useModalState();
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+      onPress: state.open,
+      "aria-label": "Open modal",
+      tabIndex: state.isOpen ? -1 : 0
+    }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, _extends({}, args, {
+      isOpen: state.isOpen,
+      onClose: state.close
+    }), ___EmotionJSX(ModalHeader, {
+      hasCloseButton: true,
+      onClose: state.close,
+      title: "Lorem Ipsum"
+    }), ___EmotionJSX(ModalBody, {
+      isScrollable: true,
+      scrollProps: {
+        maxHeight: '400px'
+      }
+    }, ___EmotionJSX(Box, {
+      gap: "lg",
+      pr: "lg"
+    }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, null, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, null, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, null, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, null, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, null, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, null, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, null, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."))), ___EmotionJSX(ModalFooter, {
+      onSubmit: state.close,
+      onCancel: state.close
+    })))
   );
 };
 export var WithInputField = function WithInputField() {
   var state = useModalState();
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
@@ -177,8 +194,9 @@ export var WithInputField = function WithInputField() {
   }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, {
     isOpen: state.isOpen,
     onClose: state.close
-  }, ___EmotionJSX(Box, {
-    gap: "lg"
+  }, ___EmotionJSX(ModalBody, null, ___EmotionJSX(Box, {
+    gap: "lg",
+    pt: isOnyx ? '' : 'lg'
   }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet consectetur"), ___EmotionJSX(SelectField, {
     label: "Select an option"
   }, ___EmotionJSX(Item, null, "Red"), ___EmotionJSX(Item, null, "Green"), ___EmotionJSX(Item, null, "Blue")), ___EmotionJSX(RadioGroupField, {
@@ -217,19 +235,10 @@ export var WithInputField = function WithInputField() {
       key: item.key,
       textValue: item.name
     }, item.name);
-  }), ___EmotionJSX(Box, {
-    isRow: true,
-    variant: "modal.buttonsContainer"
-  }, ___EmotionJSX(Button, {
-    variant: "primary",
-    onPress: state.close,
-    mr: "md",
-    "aria-label": "Continue"
-  }, "Continue"), ___EmotionJSX(Button, {
-    variant: "link",
-    onPress: state.close,
-    "aria-label": "Cancel"
-  }, "Cancel")))));
+  }))), ___EmotionJSX(ModalFooter, {
+    onSubmit: state.close,
+    onCancel: state.close
+  })));
 };
 export var WithPopoverMenu = function WithPopoverMenu() {
   var state = useModalState();