@pingux/astro 2.130.3 → 2.130.4

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

@@ -129,7 +129,9 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     title: {
       name: 'Close Icon'
     }
-  }))), titleContent), children))));
+  }))), titleContent), (0, _react2.jsx)(_Box["default"], {
+    pt: "lg"
+  }, children)))));
 });
 Modal.defaultProps = {
   role: 'dialog',

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

@@ -98,49 +98,23 @@ var _default = {
 exports["default"] = _default;
 var Default = function Default(args) {
   var state = (0, _hooks.useModalState)();
-  var _useGetTheme = (0, _hooks.useGetTheme)(),
-    isOnyx = _useGetTheme.themeState.isOnyx;
-  var ModalBodyContent;
-  if (isOnyx) {
-    ModalBodyContent = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
-      p: "lg"
-    }, (0, _react2.jsx)(_index.Text, {
-      color: "text.primary"
-    }, "Do you want to continue with this action that you\u2018re performing?")), (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      variant: "modal.footer"
-    }, (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      ml: "auto"
-    }, (0, _react2.jsx)(_index.Button, {
-      variant: "link",
-      onPress: state.close,
-      "aria-label": "Cancel"
-    }, "Cancel"), (0, _react2.jsx)(_index.Button, {
-      variant: "primary",
-      onPress: state.close,
-      ml: "sm",
-      "aria-label": "Save"
-    }, "Save"))));
-  } else {
-    ModalBodyContent = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
-    }, "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,
-      mr: "md",
-      "aria-label": "Continue"
-    }, "Continue"), (0, _react2.jsx)(_index.Button, {
-      variant: "link",
-      onPress: state.close,
-      "aria-label": "Cancel"
-    }, "Cancel")));
-  }
+  var ModalBodyContent = (0, _react2.jsx)(_index.Box, {
+    gap: "lg"
+  }, (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,
+    pt: "lg",
+    mr: "auto",
+    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.
@@ -172,8 +146,6 @@ Default.parameters = {
 };
 var LargeContent = function LargeContent(args) {
   var state = (0, _hooks.useModalState)();
-  var _useGetTheme2 = (0, _hooks.useGetTheme)(),
-    isOnyx = _useGetTheme2.themeState.isOnyx;
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
@@ -183,73 +155,11 @@ var LargeContent = function LargeContent(args) {
     }, "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",
-      px: isOnyx && 'lg'
-    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (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.Box, {
       isRow: true,
-      variant: "modal.buttonsContainer",
-      px: isOnyx && 'lg'
+      variant: "modal.buttonsContainer"
     }, (0, _react2.jsx)(_index.Button, {
       variant: "primary",
       onPress: state.close,

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

@@ -64,7 +64,7 @@ declare const _default: {
         pt: string;
         pr: string;
         pb: string;
-        background: string;
+        backgroundColor: string;
     };
     buttonsContainer: {
         position: string;

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

@@ -76,7 +76,7 @@ var headingContainer = {
   pt: 'md',
   pr: 'lg',
   pb: 'md',
-  background: 'white'
+  backgroundColor: 'background.base'
 };
 var buttonsContainer = {
   position: 'sticky',

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

@@ -2811,7 +2811,10 @@ declare const _default: {
         };
         modal: {
             content: {
-                p: number;
+                boxShadow: string;
+                px: string;
+                pb: string;
+                pt: number;
                 borderRadius: string;
                 opacity: number;
                 top: string;
@@ -2853,20 +2856,9 @@ declare const _default: {
                 justifyContent: string;
             };
             header: {
-                px: string;
-                py: string;
-                borderBottom: string;
-                borderBottomColor: string;
+                pt: string;
                 bg: string;
-            };
-            footer: {
-                borderTop: string;
-                borderTopColor: string;
-                px: string;
-                py: string;
-            };
-            buttonsContainer: {
-                bottom: number;
+                mb: string;
             };
         };
         tab: {

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

@@ -357,7 +357,7 @@ var baseIconButton = {
 var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   position: 'absolute',
   top: 32,
-  right: 42
+  right: 18
 });
 var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {
   path: {

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

@@ -410,7 +410,10 @@ declare const _default: {
     };
     modal: {
         content: {
-            p: number;
+            boxShadow: string;
+            px: string;
+            pb: string;
+            pt: number;
             borderRadius: string;
             opacity: number;
             top: string;
@@ -452,20 +455,9 @@ declare const _default: {
             justifyContent: string;
         };
         header: {
-            px: string;
-            py: string;
-            borderBottom: string;
-            borderBottomColor: string;
+            pt: string;
             bg: string;
-        };
-        footer: {
-            borderTop: string;
-            borderTopColor: string;
-            px: string;
-            py: string;
-        };
-        buttonsContainer: {
-            bottom: number;
+            mb: string;
         };
     };
     tab: {

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

@@ -150,7 +150,10 @@ var modalSize = {
 };
 var modal = {
   content: {
-    p: 0,
+    boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.5)',
+    px: 'lg',
+    pb: 'lg',
+    pt: 0,
     borderRadius: '4px',
     opacity: 0,
     top: '0',
@@ -192,20 +195,9 @@ var modal = {
     justifyContent: 'start'
   },
   header: {
-    px: 'lg',
-    py: 'md',
-    borderBottom: '1px solid',
-    borderBottomColor: 'border.base',
-    bg: 'background.base'
-  },
-  footer: {
-    borderTop: '1px solid',
-    borderTopColor: 'border.base',
-    px: 'lg',
-    py: 'md'
-  },
-  buttonsContainer: {
-    bottom: 0
+    pt: 'lg',
+    bg: 'background.base',
+    mb: 'lg'
   }
 };
 var listBox = {

package/lib/components/Modal/Modal.js

@@ -118,7 +118,9 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
     title: {
       name: 'Close Icon'
     }
-  }))), titleContent), children))));
+  }))), titleContent), ___EmotionJSX(Box, {
+    pt: "lg"
+  }, children)))));
 });
 Modal.defaultProps = {
   role: 'dialog',

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { useGetTheme, useModalState } from '../../hooks';
+import { useModalState } from '../../hooks';
 import { Box, Button, Modal, OverlayProvider, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { modalSizes } from '../../utils/devUtils/constants/modalSizes';
@@ -89,49 +89,23 @@ export default {
 };
 export var Default = function Default(args) {
   var state = useModalState();
-  var _useGetTheme = useGetTheme(),
-    isOnyx = _useGetTheme.themeState.isOnyx;
-  var ModalBodyContent;
-  if (isOnyx) {
-    ModalBodyContent = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
-      p: "lg"
-    }, ___EmotionJSX(Text, {
-      color: "text.primary"
-    }, "Do you want to continue with this action that you\u2018re performing?")), ___EmotionJSX(Box, {
-      isRow: true,
-      variant: "modal.footer"
-    }, ___EmotionJSX(Box, {
-      isRow: true,
-      ml: "auto"
-    }, ___EmotionJSX(Button, {
-      variant: "link",
-      onPress: state.close,
-      "aria-label": "Cancel"
-    }, "Cancel"), ___EmotionJSX(Button, {
-      variant: "primary",
-      onPress: state.close,
-      ml: "sm",
-      "aria-label": "Save"
-    }, "Save"))));
-  } else {
-    ModalBodyContent = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
-      pt: "lg"
-    }, "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,
-      mr: "md",
-      "aria-label": "Continue"
-    }, "Continue"), ___EmotionJSX(Button, {
-      variant: "link",
-      onPress: state.close,
-      "aria-label": "Cancel"
-    }, "Cancel")));
-  }
+  var ModalBodyContent = ___EmotionJSX(Box, {
+    gap: "lg"
+  }, ___EmotionJSX(Text, null, "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,
+    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.
@@ -162,8 +136,6 @@ Default.parameters = {
 };
 export var LargeContent = function LargeContent(args) {
   var state = useModalState();
-  var _useGetTheme2 = useGetTheme(),
-    isOnyx = _useGetTheme2.themeState.isOnyx;
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
@@ -173,73 +145,11 @@ export var LargeContent = function LargeContent(args) {
     }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, _extends({}, args, {
       isOpen: state.isOpen,
       onClose: state.close
-    }), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, {
-      pt: "lg",
-      px: isOnyx && 'lg'
-    }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Box, {
+    }), ___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",
-      px: isOnyx && 'lg'
+      variant: "modal.buttonsContainer"
     }, ___EmotionJSX(Button, {
       variant: "primary",
       onPress: state.close,

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

@@ -69,7 +69,7 @@ var headingContainer = {
   pt: 'md',
   pr: 'lg',
   pb: 'md',
-  background: 'white'
+  backgroundColor: 'background.base'
 };
 var buttonsContainer = {
   position: 'sticky',

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

@@ -349,7 +349,7 @@ var baseIconButton = {
 var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   position: 'absolute',
   top: 32,
-  right: 42
+  right: 18
 });
 var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {
   path: {

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

@@ -141,7 +141,10 @@ var modalSize = {
 };
 var modal = {
   content: {
-    p: 0,
+    boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.5)',
+    px: 'lg',
+    pb: 'lg',
+    pt: 0,
     borderRadius: '4px',
     opacity: 0,
     top: '0',
@@ -183,20 +186,9 @@ var modal = {
     justifyContent: 'start'
   },
   header: {
-    px: 'lg',
-    py: 'md',
-    borderBottom: '1px solid',
-    borderBottomColor: 'border.base',
-    bg: 'background.base'
-  },
-  footer: {
-    borderTop: '1px solid',
-    borderTopColor: 'border.base',
-    px: 'lg',
-    py: 'md'
-  },
-  buttonsContainer: {
-    bottom: 0
+    pt: 'lg',
+    bg: 'background.base',
+    mb: 'lg'
   }
 };
 var listBox = {

package/package.json

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