@pingux/astro 2.116.1-alpha.0 → 2.117.0-alpha.0

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

@@ -8,6 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = exports.Default = void 0;
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
 var _react = _interopRequireDefault(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
@@ -18,6 +19,7 @@ var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
 var _Link = _interopRequireDefault(require("./Link.mdx"));
 var _Link2 = _interopRequireDefault(require("./Link.styles"));
 var _react2 = require("@emotion/react");
+var _context;
 var _default = {
   title: 'Components/Link',
   component: _index.Link,
@@ -55,7 +57,7 @@ var _default = {
     variant: {
       control: {
         type: 'select',
-        options: (0, _keys["default"])(_Link2["default"])
+        options: (0, _concat["default"])(_context = []).call(_context, (0, _keys["default"])(_Link2["default"]), ['button'])
       }
     }
   },

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

@@ -106,7 +106,9 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, propsContentProps, dialogProps, modalProps, {
     ref: modalRef,
     "aria-modal": true
-  }), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : (0, _react2.jsx)(_IconButton["default"], {
+  }), (0, _react2.jsx)(_Box["default"], {
+    variant: "modal.headingContainer"
+  }, hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : (0, _react2.jsx)(_IconButton["default"], {
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",
     variant: "modalCloseButton",
@@ -119,7 +121,7 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }))), title && (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({}, titleProps, {
     variant: "variants.modal.title",
     role: "heading"
-  }), title), children))));
+  }), title)), children))));
 });
 Modal.defaultProps = {
   role: 'dialog',

package/lib/cjs/components/Modal/Modal.mdx

@@ -28,7 +28,6 @@ Modals should:
 Modals should not:
 - Be nested inside or replaced by another modal.
 - Be overused as it disrupts the user’s workflow and requires a response.
-- Have content that requires scrolling. If the content length is exceedingly large or requires complex forms, use the [OverlayPanel](./?path=/docs/components-overlaypanel--default) component.
 - Be used for brief warnings and alerts, use the [Messages](./?path=/docs/components-messages--default) component instead.
 
 ### Required Components

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

@@ -3,3 +3,4 @@ import { ModalProps } from '../../types';
 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<ModalProps>;
+export declare const LargeContent: StoryFn<ModalProps>;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.LargeContent = exports.Default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
@@ -112,7 +112,7 @@ var Default = function Default(args) {
     }, "Do you want to continue with this action that you\u2018re performing?"), (0, _react2.jsx)(_index.Box, {
       isRow: true,
       pt: "lg",
-      mr: "auto"
+      variant: "modal.buttonsContainer"
     }, (0, _react2.jsx)(_index.Button, {
       variant: "primary",
       onPress: state.close,
@@ -139,4 +139,73 @@ Default.parameters = {
       }]
     }
   }
-};
+};
+var LargeContent = function LargeContent(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"
+    }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, (0, _extends2["default"])({}, args, {
+      isOpen: state.isOpen,
+      onClose: state.close
+    }), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "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;

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

@@ -32,6 +32,8 @@ declare const _default: {
         pl: string;
         boxShadow: string;
         borderRadius: number;
+        maxHeight: string;
+        overflowY: string;
         '&.is-extra-small': {
             maxWidth: string;
             width: string;
@@ -53,6 +55,29 @@ declare const _default: {
             width: string;
         };
     };
+    headingContainer: {
+        position: string;
+        top: string;
+        mt: string;
+        mb: string;
+        mr: string;
+        pt: string;
+        pr: string;
+        pb: string;
+        background: string;
+    };
+    buttonsContainer: {
+        position: string;
+        bottom: string;
+        p: number;
+        mb: string;
+        pb: string;
+        pt: string;
+        background: string;
+        '& > button': {
+            flexGrow: number;
+        };
+    };
     title: {
         mr: string;
         fontWeight: number;

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

@@ -43,6 +43,9 @@ var content = {
   pl: 'lg',
   boxShadow: 'standard',
   borderRadius: 3,
+  maxHeight: 'calc(100vh - 80px)',
+  // 100% of the window minus 40px on top and bottom
+  overflowY: 'auto',
   '&.is-extra-small': {
     maxWidth: 'none',
     width: 'container.xs'
@@ -64,6 +67,29 @@ var content = {
     width: 'container.full'
   }
 };
+var headingContainer = {
+  position: 'sticky',
+  top: '-md',
+  mt: '-md',
+  mb: '-md',
+  mr: '-lg',
+  pt: 'md',
+  pr: 'lg',
+  pb: 'md',
+  background: 'white'
+};
+var buttonsContainer = {
+  position: 'sticky',
+  bottom: '-lg',
+  p: 0,
+  mb: '-lg',
+  pb: 'lg',
+  pt: 'lg',
+  background: 'white',
+  '& > button': {
+    flexGrow: 0
+  }
+};
 var title = _objectSpread(_objectSpread({}, _Text.text.title), {}, {
   mr: 'sm',
   fontWeight: 3
@@ -80,6 +106,8 @@ var _default = {
   closeIcon: closeIcon,
   container: container,
   content: content,
+  headingContainer: headingContainer,
+  buttonsContainer: buttonsContainer,
   title: title,
   modalCloseButton: modalCloseButton
 };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -306,6 +306,12 @@ declare const _default: {
         content: {
             bg: string;
         };
+        headingContainer: {
+            bg: string;
+        };
+        buttonsContainer: {
+            bg: string;
+        };
     };
     tab: {
         '&.is-selected': {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -54,6 +54,12 @@ var tab = {
 var modal = {
   content: {
     bg: 'background.base'
+  },
+  headingContainer: {
+    bg: 'background.base'
+  },
+  buttonsContainer: {
+    bg: 'background.base'
   }
 };
 var _default = {

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

@@ -1827,6 +1827,88 @@ declare const _default: {
                 color: string;
             };
         };
+        button: {
+            textDecoration: string;
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+                color: string;
+            };
+            '&.is-hovered': {
+                backgroundColor: string;
+                color: string;
+            };
+            alignItems: string;
+            justifyContent: string;
+            minWidth: string;
+            cursor: string;
+            display: string;
+            maxWidth: string;
+            fontFamily: string;
+            fontSize: string;
+            flexGrow: string;
+            fontWeight: number;
+            textAlign: string;
+            verticalAlign: string;
+            lineHeight: number;
+            borderRadius: string;
+            border: string;
+            px: string;
+            py: string;
+            height: string;
+            '&.is-disabled': {
+                opacity: number;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            transition: string;
+        };
+        primaryButton: {
+            textDecoration: string;
+            color: string;
+            backgroundColor: string;
+            borderColor: string;
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+            };
+            '&.is-hovered': {
+                backgroundColor: string;
+            };
+            alignItems: string;
+            justifyContent: string;
+            minWidth: string;
+            cursor: string;
+            display: string;
+            maxWidth: string;
+            fontFamily: string;
+            fontSize: string;
+            flexGrow: string;
+            fontWeight: number;
+            textAlign: string;
+            verticalAlign: string;
+            lineHeight: number;
+            borderRadius: string;
+            border: string;
+            px: string;
+            py: string;
+            height: string;
+            '&.is-disabled': {
+                opacity: number;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            transition: string;
+        };
     };
     cards: {
         interactive: {
@@ -2148,8 +2230,8 @@ declare const _default: {
                 transform: string;
                 transition: string;
                 m: string[];
-                overflow: string;
                 maxHeight: string;
+                overflowY: string;
                 '&.is-open-no-transition': {
                     opacity: string;
                     transform: string;

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

@@ -218,7 +218,7 @@ var baseIconButton = {
 };
 var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   position: 'absolute',
-  top: 22,
+  top: 23,
   right: 22
 });
 var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {

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

@@ -147,5 +147,87 @@ declare const _default: {
             color: string;
         };
     };
+    button: {
+        textDecoration: string;
+        backgroundColor: string;
+        borderColor: string;
+        color: string;
+        '&.is-pressed': {
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
+        };
+        '&.is-hovered': {
+            backgroundColor: string;
+            color: string;
+        };
+        alignItems: string;
+        justifyContent: string;
+        minWidth: string;
+        cursor: string;
+        display: string;
+        maxWidth: string;
+        fontFamily: string;
+        fontSize: string;
+        flexGrow: string;
+        fontWeight: number;
+        textAlign: string;
+        verticalAlign: string;
+        lineHeight: number;
+        borderRadius: string;
+        border: string;
+        px: string;
+        py: string;
+        height: string;
+        '&.is-disabled': {
+            opacity: number;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        transition: string;
+    };
+    primaryButton: {
+        textDecoration: string;
+        color: string;
+        backgroundColor: string;
+        borderColor: string;
+        '&.is-pressed': {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        '&.is-hovered': {
+            backgroundColor: string;
+        };
+        alignItems: string;
+        justifyContent: string;
+        minWidth: string;
+        cursor: string;
+        display: string;
+        maxWidth: string;
+        fontFamily: string;
+        fontSize: string;
+        flexGrow: string;
+        fontWeight: number;
+        textAlign: string;
+        verticalAlign: string;
+        lineHeight: number;
+        borderRadius: string;
+        border: string;
+        px: string;
+        py: string;
+        height: string;
+        '&.is-disabled': {
+            opacity: number;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        transition: string;
+    };
 };
 export default _default;

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

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _button = _interopRequireDefault(require("./button"));
 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) { (0, _defineProperty2["default"])(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; }
 var nextGen = {
@@ -62,11 +63,19 @@ var footerLinks = _objectSpread({}, sideNav);
 var footerHeader = _objectSpread(_objectSpread({}, footerLinks), {}, {
   fontWeight: '2'
 });
+var button = _objectSpread(_objectSpread({}, _button["default"]["default"]), {}, {
+  textDecoration: 'none'
+});
+var primaryButton = _objectSpread(_objectSpread({}, _button["default"].primary), {}, {
+  textDecoration: 'none'
+});
 var _default = {
   nextGen: nextGen,
   onyx: onyx,
   sideNav: sideNav,
   footerLinks: footerLinks,
-  footerHeader: footerHeader
+  footerHeader: footerHeader,
+  button: button,
+  primaryButton: primaryButton
 };
 exports["default"] = _default;

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

@@ -413,8 +413,8 @@ declare const _default: {
             transform: string;
             transition: string;
             m: string[];
-            overflow: string;
             maxHeight: string;
+            overflowY: string;
             '&.is-open-no-transition': {
                 opacity: string;
                 transform: string;

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

@@ -150,8 +150,8 @@ var modal = {
     transform: 'translate(0, -50px)',
     transition: 'opacity 300ms ease, transform 500ms ease-out',
     m: ['sm', 'sm', '1.75rem auto'],
-    overflow: 'hidden',
     maxHeight: 'calc(100vh - 3.5rem)',
+    overflowY: 'auto',
     '&.is-open-no-transition': {
       opacity: '100%',
       transform: 'none'

package/lib/components/Link/Link.stories.js

@@ -1,5 +1,7 @@
 import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+var _context;
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React from 'react';
 import { withDesign } from 'storybook-addon-designs';
@@ -47,7 +49,7 @@ export default {
     variant: {
       control: {
         type: 'select',
-        options: _Object$keys(variants)
+        options: _concatInstanceProperty(_context = []).call(_context, _Object$keys(variants), ['button'])
       }
     }
   },

package/lib/components/Modal/Modal.js

@@ -95,7 +95,9 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   }, propsContentProps, dialogProps, modalProps, {
     ref: modalRef,
     "aria-modal": true
-  }), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, {
+  }), ___EmotionJSX(Box, {
+    variant: "modal.headingContainer"
+  }, hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, {
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",
     variant: "modalCloseButton",
@@ -108,7 +110,7 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   }))), title && ___EmotionJSX(Text, _extends({}, titleProps, {
     variant: "variants.modal.title",
     role: "heading"
-  }), title), children))));
+  }), title)), children))));
 });
 Modal.defaultProps = {
   role: 'dialog',

package/lib/components/Modal/Modal.mdx

@@ -28,7 +28,6 @@ Modals should:
 Modals should not:
 - Be nested inside or replaced by another modal.
 - Be overused as it disrupts the user’s workflow and requires a response.
-- Have content that requires scrolling. If the content length is exceedingly large or requires complex forms, use the [OverlayPanel](./?path=/docs/components-overlaypanel--default) component.
 - Be used for brief warnings and alerts, use the [Messages](./?path=/docs/components-messages--default) component instead.
 
 ### Required Components

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

@@ -103,7 +103,7 @@ export var Default = function Default(args) {
     }, "Do you want to continue with this action that you\u2018re performing?"), ___EmotionJSX(Box, {
       isRow: true,
       pt: "lg",
-      mr: "auto"
+      variant: "modal.buttonsContainer"
     }, ___EmotionJSX(Button, {
       variant: "primary",
       onPress: state.close,
@@ -129,4 +129,72 @@ Default.parameters = {
       }]
     }
   }
+};
+export var LargeContent = function LargeContent(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"
+    }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, _extends({}, args, {
+      isOpen: state.isOpen,
+      onClose: state.close
+    }), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "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"))))
+  );
 };

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

@@ -36,6 +36,9 @@ var content = {
   pl: 'lg',
   boxShadow: 'standard',
   borderRadius: 3,
+  maxHeight: 'calc(100vh - 80px)',
+  // 100% of the window minus 40px on top and bottom
+  overflowY: 'auto',
   '&.is-extra-small': {
     maxWidth: 'none',
     width: 'container.xs'
@@ -57,6 +60,29 @@ var content = {
     width: 'container.full'
   }
 };
+var headingContainer = {
+  position: 'sticky',
+  top: '-md',
+  mt: '-md',
+  mb: '-md',
+  mr: '-lg',
+  pt: 'md',
+  pr: 'lg',
+  pb: 'md',
+  background: 'white'
+};
+var buttonsContainer = {
+  position: 'sticky',
+  bottom: '-lg',
+  p: 0,
+  mb: '-lg',
+  pb: 'lg',
+  pt: 'lg',
+  background: 'white',
+  '& > button': {
+    flexGrow: 0
+  }
+};
 var title = _objectSpread(_objectSpread({}, text.title), {}, {
   mr: 'sm',
   fontWeight: 3
@@ -72,6 +98,8 @@ export default {
   closeIcon: closeIcon,
   container: container,
   content: content,
+  headingContainer: headingContainer,
+  buttonsContainer: buttonsContainer,
   title: title,
   modalCloseButton: modalCloseButton
 };

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -46,6 +46,12 @@ var tab = {
 var modal = {
   content: {
     bg: 'background.base'
+  },
+  headingContainer: {
+    bg: 'background.base'
+  },
+  buttonsContainer: {
+    bg: 'background.base'
   }
 };
 export default {

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

@@ -211,7 +211,7 @@ var baseIconButton = {
 };
 var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   position: 'absolute',
-  top: 22,
+  top: 23,
   right: 22
 });
 var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {

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

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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 buttons from './button';
 var nextGen = {
   color: 'gray-800',
   fontSize: 'md',
@@ -55,10 +56,18 @@ var footerLinks = _objectSpread({}, sideNav);
 var footerHeader = _objectSpread(_objectSpread({}, footerLinks), {}, {
   fontWeight: '2'
 });
+var button = _objectSpread(_objectSpread({}, buttons["default"]), {}, {
+  textDecoration: 'none'
+});
+var primaryButton = _objectSpread(_objectSpread({}, buttons.primary), {}, {
+  textDecoration: 'none'
+});
 export default {
   nextGen: nextGen,
   onyx: onyx,
   sideNav: sideNav,
   footerLinks: footerLinks,
-  footerHeader: footerHeader
+  footerHeader: footerHeader,
+  button: button,
+  primaryButton: primaryButton
 };

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

@@ -141,8 +141,8 @@ var modal = {
     transform: 'translate(0, -50px)',
     transition: 'opacity 300ms ease, transform 500ms ease-out',
     m: ['sm', 'sm', '1.75rem auto'],
-    overflow: 'hidden',
     maxHeight: 'calc(100vh - 3.5rem)',
+    overflowY: 'auto',
     '&.is-open-no-transition': {
       opacity: '100%',
       transform: 'none'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.116.1-alpha.0",
+  "version": "2.117.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",