@pingux/astro 2.118.3-alpha.0 → 2.119.0-alpha.0

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

@@ -66,6 +66,8 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     shouldCloseOnInteractOutside: shouldCloseOnInteractOutside,
     children: children
   }, propsContentProps);
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var shouldShow = state ? (state === null || state === void 0 ? void 0 : state.isTransitioning) || isOpen : isOpen;
   var modalState = {
     close: onClose,
@@ -92,6 +94,15 @@ 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"], {
+    variant: "modal.header"
+  }, (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({}, titleProps, {
+    variant: "modalTitle",
+    role: "heading"
+  }), title)) : (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({}, titleProps, {
+    variant: "variants.modal.title",
+    role: "heading"
+  }), title));
   return (0, _react2.jsx)(_reactAria.OverlayContainer, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "modal.container"
   }, (0, _reactAria.mergeProps)(containerProps, underlayProps, others), {
@@ -118,10 +129,7 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     title: {
       name: 'Close Icon'
     }
-  }))), title && (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({}, titleProps, {
-    variant: "variants.modal.title",
-    role: "heading"
-  }), title)), children))));
+  }))), titleContent), children))));
 });
 Modal.defaultProps = {
   role: 'dialog',

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

@@ -91,27 +91,43 @@ var _default = {
     }
   },
   args: {
-    title: 'Continue',
     hasCloseButton: true
   }
 };
 exports["default"] = _default;
 var Default = function Default(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, {
+  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",
@@ -122,7 +138,20 @@ var Default = function Default(args) {
       variant: "link",
       onPress: state.close,
       "aria-label": "Cancel"
-    }, "Cancel"))))
+    }, "Cancel")));
+  }
+  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 || state.isTransitioning) && (0, _react2.jsx)(_index.Modal, (0, _extends2["default"])({}, args, {
+      isOpen: state.isOpen,
+      onClose: state.close,
+      state: state,
+      title: "Continue"
+    }), ModalBodyContent))
   );
 };
 exports.Default = Default;
@@ -142,6 +171,8 @@ 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.
@@ -152,50 +183,72 @@ var LargeContent = function LargeContent(args) {
       isOpen: state.isOpen,
       onClose: state.close
     }), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Box, {
       isRow: true,
-      variant: "modal.buttonsContainer"
+      variant: "modal.buttonsContainer",
+      px: isOnyx && 'lg'
     }, (0, _react2.jsx)(_index.Button, {
       variant: "primary",
       onPress: state.close,

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

@@ -104,6 +104,17 @@ export declare const text: {
         wordWrap: wordWrapText;
         wordBreak: wordBreak;
     };
+    modalTitle: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: overflowWrap;
+        maxWidth: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
+    };
     placeholder: {
         fontWeight: number;
         color: string;

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

@@ -206,6 +206,12 @@ var text = _objectSpread(_objectSpread(_objectSpread({
   }, textEllipsis),
   listViewItemSubtext: _objectSpread(_objectSpread({}, listViewItemSubtext), textEllipsis),
   listViewItemText: _objectSpread(_objectSpread({}, listViewItemText), textEllipsis),
+  modalTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: '20px',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  }),
   placeholder: {
     fontWeight: -1,
     color: 'text.secondary',

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

@@ -1289,12 +1289,6 @@ declare const _default: {
             color: string;
             lineHeight: string;
         };
-        modalTitle: {
-            fontSize: string;
-            fontWeight: string;
-            color: string;
-            fontFamily: string;
-        };
         tabLabel: {
             color: string;
         };
@@ -2223,7 +2217,7 @@ declare const _default: {
         };
         modal: {
             content: {
-                pt: string;
+                p: number;
                 borderRadius: string;
                 opacity: number;
                 top: string;
@@ -2264,6 +2258,22 @@ declare const _default: {
             container: {
                 justifyContent: string;
             };
+            header: {
+                px: string;
+                py: string;
+                borderBottom: string;
+                borderBottomColor: string;
+                bg: string;
+            };
+            footer: {
+                borderTop: string;
+                borderTopColor: string;
+                px: string;
+                py: string;
+            };
+            buttonsContainer: {
+                bottom: number;
+            };
         };
         tab: {
             borderRadius: string;

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

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

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

@@ -57,12 +57,6 @@ export declare const text: {
         color: string;
         lineHeight: string;
     };
-    modalTitle: {
-        fontSize: string;
-        fontWeight: string;
-        color: string;
-        fontFamily: string;
-    };
     tabLabel: {
         color: string;
     };

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

@@ -71,12 +71,6 @@ var text = _objectSpread(_objectSpread({
     color: 'text.primary',
     lineHeight: '24px'
   },
-  modalTitle: {
-    fontSize: '20px',
-    fontWeight: '2',
-    color: 'text.secondary',
-    fontFamily: 'standard'
-  },
   tabLabel: {
     color: 'text.primary'
   },

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

@@ -406,7 +406,7 @@ declare const _default: {
     };
     modal: {
         content: {
-            pt: string;
+            p: number;
             borderRadius: string;
             opacity: number;
             top: string;
@@ -447,6 +447,22 @@ declare const _default: {
         container: {
             justifyContent: string;
         };
+        header: {
+            px: string;
+            py: string;
+            borderBottom: string;
+            borderBottomColor: string;
+            bg: string;
+        };
+        footer: {
+            borderTop: string;
+            borderTopColor: string;
+            px: string;
+            py: string;
+        };
+        buttonsContainer: {
+            bottom: number;
+        };
     };
     tab: {
         borderRadius: string;

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

@@ -143,7 +143,7 @@ var modalSize = {
 };
 var modal = {
   content: {
-    pt: '15px',
+    p: 0,
     borderRadius: '4px',
     opacity: 0,
     top: '0',
@@ -183,6 +183,22 @@ var modal = {
   },
   container: {
     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
   }
 };
 var listBox = {

package/lib/components/Modal/Modal.js

@@ -16,7 +16,7 @@ import React, { forwardRef } from 'react';
 import { FocusScope, mergeProps, OverlayContainer, useDialog } from 'react-aria';
 import CloseIcon from '@pingux/mdi-react/CloseIcon';
 import { useModalOverlay } from '@react-aria/overlays';
-import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
+import { useGetTheme, useLocalOrForwardRef, useStatusClasses } from '../../hooks';
 import Box from '../Box';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
@@ -55,6 +55,8 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
     shouldCloseOnInteractOutside: shouldCloseOnInteractOutside,
     children: children
   }, propsContentProps);
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var shouldShow = state ? (state === null || state === void 0 ? void 0 : state.isTransitioning) || isOpen : isOpen;
   var modalState = {
     close: onClose,
@@ -81,6 +83,15 @@ 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, {
+    variant: "modal.header"
+  }, ___EmotionJSX(Text, _extends({}, titleProps, {
+    variant: "modalTitle",
+    role: "heading"
+  }), title)) : ___EmotionJSX(Text, _extends({}, titleProps, {
+    variant: "variants.modal.title",
+    role: "heading"
+  }), title));
   return ___EmotionJSX(OverlayContainer, null, ___EmotionJSX(Box, _extends({
     variant: "modal.container"
   }, mergeProps(containerProps, underlayProps, others), {
@@ -107,10 +118,7 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
     title: {
       name: 'Close Icon'
     }
-  }))), title && ___EmotionJSX(Text, _extends({}, titleProps, {
-    variant: "variants.modal.title",
-    role: "heading"
-  }), title)), children))));
+  }))), titleContent), 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 { useModalState } from '../../hooks';
+import { useGetTheme, 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';
@@ -83,26 +83,42 @@ export default {
     }
   },
   args: {
-    title: 'Continue',
     hasCloseButton: true
   }
 };
 export var Default = function Default(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, {
+  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",
@@ -113,7 +129,20 @@ export var Default = function Default(args) {
       variant: "link",
       onPress: state.close,
       "aria-label": "Cancel"
-    }, "Cancel"))))
+    }, "Cancel")));
+  }
+  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 || state.isTransitioning) && ___EmotionJSX(Modal, _extends({}, args, {
+      isOpen: state.isOpen,
+      onClose: state.close,
+      state: state,
+      title: "Continue"
+    }), ModalBodyContent))
   );
 };
 Default.parameters = {
@@ -132,6 +161,8 @@ 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.
@@ -142,50 +173,72 @@ export var LargeContent = function LargeContent(args) {
       isOpen: state.isOpen,
       onClose: state.close
     }), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, {
-      pt: "lg"
+      pt: "lg",
+      px: isOnyx && 'lg'
     }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Box, {
       isRow: true,
-      variant: "modal.buttonsContainer"
+      variant: "modal.buttonsContainer",
+      px: isOnyx && 'lg'
     }, ___EmotionJSX(Button, {
       variant: "primary",
       onPress: state.close,

package/lib/components/Text/Text.styles.js

@@ -197,6 +197,12 @@ export var text = _objectSpread(_objectSpread(_objectSpread({
   }, textEllipsis),
   listViewItemSubtext: _objectSpread(_objectSpread({}, listViewItemSubtext), textEllipsis),
   listViewItemText: _objectSpread(_objectSpread({}, listViewItemText), textEllipsis),
+  modalTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: '20px',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  }),
   placeholder: {
     fontWeight: -1,
     color: 'text.secondary',

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

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

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

@@ -64,12 +64,6 @@ export var text = _objectSpread(_objectSpread({
     color: 'text.primary',
     lineHeight: '24px'
   },
-  modalTitle: {
-    fontSize: '20px',
-    fontWeight: '2',
-    color: 'text.secondary',
-    fontFamily: 'standard'
-  },
   tabLabel: {
     color: 'text.primary'
   },

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

@@ -134,7 +134,7 @@ var modalSize = {
 };
 var modal = {
   content: {
-    pt: '15px',
+    p: 0,
     borderRadius: '4px',
     opacity: 0,
     top: '0',
@@ -174,6 +174,22 @@ var modal = {
   },
   container: {
     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
   }
 };
 var listBox = {

package/package.json

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

package/lib/cjs/recipes/NextGen/ModalNextGen.stories.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: () => React.JSX.Element;

package/lib/cjs/recipes/NextGen/ModalNextGen.stories.js

@@ -1,74 +0,0 @@
-"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 _hooks = require("../../hooks");
-var _index = require("../../index");
-var _react2 = require("@emotion/react");
-var _default = {
-  title: 'Onyx Recipes/Modal'
-};
-exports["default"] = _default;
-var Default = function Default() {
-  var state = (0, _hooks.useModalState)();
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
-    onPress: state.open,
-    "aria-label": "Open modal"
-  }, "Open Modal"), (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.Modal, {
-    isOpen: state.isOpen,
-    onClose: state.close,
-    state: state,
-    hasCloseButton: true,
-    contentProps: {
-      sx: {
-        p: '0px !important'
-      }
-    }
-  }, (0, _react2.jsx)(_index.Box, {
-    sx: {
-      p: '1rem 1.5rem',
-      borderBottom: '1px solid',
-      borderBottomColor: 'border.base',
-      bg: 'background.base'
-    }
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "modalTitle"
-  }, "Modal Title")), (0, _react2.jsx)(_index.Box, {
-    p: "1.5rem 1.5rem"
-  }, (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,
-    sx: {
-      borderTop: '1px solid',
-      borderTopColor: 'border.base',
-      p: '1rem 1.5rem'
-    }
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    mr: "auto"
-  }, (0, _react2.jsx)(_index.Button, {
-    variant: "link",
-    onPress: state.close,
-    "aria-label": "Continue"
-  }, "Previous")), (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: ".25rem",
-    "aria-label": "Continue",
-    isDisabled: true
-  }, "Next")))));
-};
-exports.Default = Default;

package/lib/recipes/NextGen/ModalNextGen.stories.js

@@ -1,64 +0,0 @@
-import React from 'react';
-import { useModalState } from '../../hooks';
-import { Box, Button, Modal, OverlayProvider, Text } from '../../index';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Onyx Recipes/Modal'
-};
-export var Default = function Default() {
-  var state = useModalState();
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
-    onPress: state.open,
-    "aria-label": "Open modal"
-  }, "Open Modal"), (state.isOpen || state.isTransitioning) && ___EmotionJSX(Modal, {
-    isOpen: state.isOpen,
-    onClose: state.close,
-    state: state,
-    hasCloseButton: true,
-    contentProps: {
-      sx: {
-        p: '0px !important'
-      }
-    }
-  }, ___EmotionJSX(Box, {
-    sx: {
-      p: '1rem 1.5rem',
-      borderBottom: '1px solid',
-      borderBottomColor: 'border.base',
-      bg: 'background.base'
-    }
-  }, ___EmotionJSX(Text, {
-    variant: "modalTitle"
-  }, "Modal Title")), ___EmotionJSX(Box, {
-    p: "1.5rem 1.5rem"
-  }, ___EmotionJSX(Text, {
-    color: "text.primary"
-  }, "Do you want to continue with this action that you\u2018re performing?")), ___EmotionJSX(Box, {
-    isRow: true,
-    sx: {
-      borderTop: '1px solid',
-      borderTopColor: 'border.base',
-      p: '1rem 1.5rem'
-    }
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    mr: "auto"
-  }, ___EmotionJSX(Button, {
-    variant: "link",
-    onPress: state.close,
-    "aria-label": "Continue"
-  }, "Previous")), ___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: ".25rem",
-    "aria-label": "Continue",
-    isDisabled: true
-  }, "Next")))));
-};