@pingux/astro 2.149.0 → 2.149.1

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 { useGetTheme, useModalState } from '../../hooks';
-import { Box, Button, Item, Menu, Modal, ModalBody, ModalFooter, ModalHeader, OverlayProvider, PopoverMenu, RadioField, RadioGroupField, SearchField, SelectField, Text } from '../../index';
+import { useModalState } from '../../hooks';
+import { Box, Button, Item, Modal, OverlayProvider, 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,6 +89,21 @@ 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.
@@ -98,16 +113,10 @@ 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"
-    }), ___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"
-    })))
+    }), ModalBodyContent))
   );
 };
 Default.parameters = {
@@ -127,53 +136,27 @@ 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(ModalBody, null, ___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(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
-    })))
+    }, ___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"))))
   );
 };
 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],
@@ -194,9 +177,8 @@ export var WithInputField = function WithInputField() {
   }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, {
     isOpen: state.isOpen,
     onClose: state.close
-  }, ___EmotionJSX(ModalBody, null, ___EmotionJSX(Box, {
-    gap: "lg",
-    pt: isOnyx ? '' : 'lg'
+  }, ___EmotionJSX(Box, {
+    gap: "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, {
@@ -235,42 +217,19 @@ export var WithInputField = function WithInputField() {
       key: item.key,
       textValue: item.name
     }, item.name);
-  }))), ___EmotionJSX(ModalFooter, {
-    onSubmit: state.close,
-    onCancel: state.close
-  })));
-};
-export var WithPopoverMenu = function WithPopoverMenu() {
-  var state = useModalState();
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
-    onPress: state.open,
-    "aria-label": "Open modal"
-  }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, {
-    isOpen: state.isOpen,
-    onClose: state.close
-  }, ___EmotionJSX(ModalHeader, {
-    hasCloseButton: true,
-    onClose: state.close,
-    title: "Lorem Ipsum"
-  }), ___EmotionJSX(ModalBody, null, ___EmotionJSX(Box, {
-    gap: "lg"
-  }, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
-    onAction: function onAction() {
-      return console.log('on action');
-    }
-  }, ___EmotionJSX(Item, {
-    key: "edit"
-  }, "Edit"), ___EmotionJSX(Item, {
-    key: "duplicate"
-  }, "Duplicate"), ___EmotionJSX(Item, {
-    key: "delete",
-    textValue: "delete"
-  }, ___EmotionJSX(Text, {
-    color: "critical.bright"
-  }, "Delete")))))), ___EmotionJSX(ModalFooter, {
-    onSubmit: state.close,
-    onCancel: state.close
-  })));
+  }), ___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")))));
 };
 WithInputField.parameters = {
   a11y: {

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

@@ -23,15 +23,22 @@ var container = {
   background: '#00000040',
   display: 'flex',
   alignItems: 'center',
-  overflowY: 'auto'
+  justifyContent: 'center'
 };
 var content = {
+  position: 'relative',
   outline: 'none',
   background: 'white',
   color: 'black',
+  pt: 'md',
+  pr: 'lg',
+  pb: 'lg',
+  pl: 'lg',
   boxShadow: 'standard',
   borderRadius: 3,
-  margin: 'auto',
+  maxHeight: 'calc(100vh - 80px)',
+  // 100% of the window minus 40px on top and bottom
+  overflowY: 'auto',
   '&.is-extra-small': {
     maxWidth: 'none',
     width: 'container.xs'
@@ -54,40 +61,27 @@ var content = {
   }
 };
 var headingContainer = {
-  position: 'relative',
-  backgroundColor: 'background.base',
-  px: 'lg',
-  py: 'md'
-};
-var header = {
-  position: 'relative',
-  backgroundColor: 'background.base',
-  pb: 'md'
-};
-var body = {};
-export var closeButton = {
-  position: 'absolute',
-  top: 0,
-  right: -14,
-  alignSelf: 'auto',
-  width: '22px',
-  height: '22px'
-};
-var bodyContainer = {
-  px: 'lg'
-};
-var footer = {
-  py: 'lg',
-  background: 'white',
-  '& > button': {
-    flexGrow: 0
-  }
+  position: 'sticky',
+  top: '-md',
+  mt: '-md',
+  mb: '-md',
+  mr: '-lg',
+  pt: 'md',
+  pr: 'lg',
+  pb: 'md',
+  backgroundColor: 'background.base'
 };
 var buttonsContainer = {
+  position: 'sticky',
+  bottom: '-lg',
   p: 0,
+  mb: '-lg',
   pb: 'lg',
   pt: 'lg',
-  background: 'white'
+  background: 'white',
+  '& > button': {
+    flexGrow: 0
+  }
 };
 var title = _objectSpread(_objectSpread({}, text.title), {}, {
   mr: 'sm',
@@ -97,7 +91,6 @@ export var modalCloseButton = {
   position: 'absolute',
   top: 14,
   right: 10,
-  alignSelf: 'auto',
   width: '22px',
   height: '22px'
 };
@@ -106,12 +99,7 @@ export default {
   container: container,
   content: content,
   headingContainer: headingContainer,
-  bodyContainer: bodyContainer,
-  title: title,
-  modalCloseButton: modalCloseButton,
   buttonsContainer: buttonsContainer,
-  header: header,
-  body: body,
-  footer: footer,
-  closeButton: closeButton
+  title: title,
+  modalCloseButton: modalCloseButton
 };

package/lib/components/Modal/index.js

@@ -1,4 +1 @@
-export { default } from './Modal';
-export { default as ModalBody } from './ModalBody';
-export { default as ModalFooter } from './ModalFooter';
-export { default as ModalHeader } from './ModalHeader';
+export { default } from './Modal';

package/lib/components/Modal/tests/Modal.integration.test.js

@@ -78,8 +78,6 @@ test('keyboard interaction with the trigger should open the modal', function ()
 test('close button should close the modal', function () {
   getComposedComponent({
     isDefaultOpen: true
-  }, {
-    title: 'Lorem Ipsum'
   });
 
   // Target the close button
@@ -89,8 +87,6 @@ test('close button should close the modal', function () {
 test('keyboard interactions on the close button should close the modal', function () {
   getComposedComponent({
     isDefaultOpen: true
-  }, {
-    title: 'Lorem Ipsum'
   });
 
   // Target the close button

package/lib/components/Modal/tests/Modal.unit.test.js

@@ -198,7 +198,6 @@ test('should only hide the top-most overlay', function () {
 });
 test('should render a close button if hasCloseButton is true', function () {
   getComponent({
-    title: 'Lorem Ipsum',
     hasCloseButton: true
   });
   expect(screen.queryByRole('button')).toBeInTheDocument();
@@ -210,7 +209,6 @@ test('should render a custom close button if hasCloseButton is true and custom b
     });
   };
   getComponent({
-    title: 'Lorem Ipsum',
     hasCloseButton: true,
     closeButton: ___EmotionJSX(MyButton, null)
   });
@@ -219,7 +217,6 @@ test('should render a custom close button if hasCloseButton is true and custom b
 });
 test('shouldn\'t auto focus the first tabbable element', function () {
   getComponent({
-    title: 'Lorem Ipsum',
     hasCloseButton: true
   });
   var button = screen.queryByRole('button');
@@ -227,7 +224,6 @@ test('shouldn\'t auto focus the first tabbable element', function () {
 });
 test('should auto focus the first tabbable element if "hasAutoFocus" is true', function () {
   getComponent({
-    title: 'Lorem Ipsum',
     hasCloseButton: true,
     hasAutoFocus: true
   });

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

@@ -35,7 +35,6 @@ var baseIconButton = {
   }
 };
 var hintButton = _objectSpread({}, baseIconButton);
-var modalCloseButton = _objectSpread({}, baseIconButton);
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
   inverted: _objectSpread(_objectSpread({}, baseIconButton), {}, {
@@ -79,7 +78,6 @@ var iconButtons = {
     }
   }),
   modalCloseButton: _objectSpread({}, baseIconButton),
-  modalHeaderCloseButton: _objectSpread({}, baseIconButton),
   messageCloseButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     '&.is-hovered': {
       backgroundColor: '#455469'
@@ -278,7 +276,6 @@ var buttons = {
     }
   },
   iconButtons: iconButtons,
-  modalCloseButton: modalCloseButton,
   listBoxLink: {
     color: 'blue-400',
     '&.is-pressed': {

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

@@ -46,26 +46,9 @@ var modal = {
     bg: 'background.base'
   },
   headingContainer: {
-    borderBottom: '1px solid',
-    borderBottomColor: 'border.base',
     bg: 'background.base'
   },
-  header: {
-    borderBottom: '1px solid',
-    borderBottomColor: 'border.base',
-    bg: 'background.base'
-  },
-  body: {
-    bg: 'background.base'
-  },
-  footer: {
-    borderTop: '1px solid',
-    borderTopColor: 'border.base',
-    bg: 'background.base'
-  },
-  footerContainer: {
-    borderTop: '1px solid',
-    borderTopColor: 'border.base',
+  buttonsContainer: {
     bg: 'background.base'
   }
 };

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

@@ -348,7 +348,11 @@ var baseIconButton = {
     }
   }
 };
-var modalCloseButton = _objectSpread({}, baseIconButton);
+var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
+  position: 'absolute',
+  top: 32,
+  right: 18
+});
 var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {
   path: {
     fill: 'blue'
@@ -439,11 +443,6 @@ var iconButtons = {
     display: 'inline-flex'
   }),
   modalCloseButton: modalCloseButton,
-  modalHeaderCloseButton: _objectSpread(_objectSpread({}, modalCloseButton), {}, {
-    top: '50%',
-    transform: 'translateY(-50%)',
-    right: '16px'
-  }),
   badge: {
     deleteButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
       borderRadius: '50%',

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

@@ -71,10 +71,17 @@ var modalSize = {
 var modal = {
   content: {
     boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.5)',
-    borderRadius: '1em',
+    px: 'lg',
+    pb: 'lg',
+    pt: 0,
+    borderRadius: '4px',
     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'
@@ -104,35 +111,13 @@ var modal = {
       maxWidth: modalSize.full
     }
   },
-  headingContainer: {
-    borderBottom: '1px solid',
-    borderBottomColor: 'gray-200',
-    bg: 'background.base',
-    borderRadius: '1em 1em 0px 0px'
+  container: {
+    justifyContent: 'start'
   },
   header: {
-    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'
+    pt: 'lg',
+    bg: 'background.base',
+    mb: 'lg'
   }
 };
 var listBox = {

package/package.json

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

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

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

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

@@ -1,30 +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 _storybookAddonDesigns = require("storybook-addon-designs");
-var _storybookDocsLayout = _interopRequireDefault(require("../../../../.storybook/storybookDocsLayout"));
-var _index = require("../../../index");
-var _react2 = require("@emotion/react");
-var _default = {
-  title: 'Components/Modal/Convenience/ModalBody',
-  component: _index.ModalBody,
-  decorators: [_storybookAddonDesigns.withDesign],
-  parameters: {
-    docs: {
-      page: function page() {
-        return (0, _react2.jsx)(_storybookDocsLayout["default"], null);
-      }
-    }
-  }
-};
-exports["default"] = _default;
-var Default = function Default() {
-  return (0, _react2.jsx)(_index.ModalBody, null, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, null, "Do you want to continue with this action that you\u2018re performing?")));
-};
-exports.Default = Default;

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

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

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

@@ -1,35 +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 _storybookAddonDesigns = require("storybook-addon-designs");
-var _storybookDocsLayout = _interopRequireDefault(require("../../../../.storybook/storybookDocsLayout"));
-var _hooks = require("../../../hooks");
-var _index = require("../../../index");
-var _react2 = require("@emotion/react");
-var _default = {
-  title: 'Components/Modal/Convenience/ModalFooter',
-  component: _index.ModalFooter,
-  decorators: [_storybookAddonDesigns.withDesign],
-  parameters: {
-    docs: {
-      page: function page() {
-        return (0, _react2.jsx)(_storybookDocsLayout["default"], null);
-      }
-    }
-  }
-};
-exports["default"] = _default;
-var Default = function Default() {
-  var state = (0, _hooks.useModalState)();
-  return (0, _react2.jsx)(_index.ModalFooter, {
-    onSubmit: state.close,
-    onCancel: state.close
-  });
-};
-exports.Default = Default;

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

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

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

@@ -1,36 +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 _storybookAddonDesigns = require("storybook-addon-designs");
-var _storybookDocsLayout = _interopRequireDefault(require("../../../../.storybook/storybookDocsLayout"));
-var _hooks = require("../../../hooks");
-var _index = require("../../../index");
-var _react2 = require("@emotion/react");
-var _default = {
-  title: 'Components/Modal/Convenience/ModalHeader',
-  component: _index.ModalHeader,
-  decorators: [_storybookAddonDesigns.withDesign],
-  parameters: {
-    docs: {
-      page: function page() {
-        return (0, _react2.jsx)(_storybookDocsLayout["default"], null);
-      }
-    }
-  }
-};
-exports["default"] = _default;
-var Default = function Default() {
-  var state = (0, _hooks.useModalState)();
-  return (0, _react2.jsx)(_index.ModalHeader, {
-    hasCloseButton: true,
-    onClose: state.close,
-    title: "Continue"
-  });
-};
-exports.Default = Default;

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

@@ -1,9 +0,0 @@
-import React, { ReactNode } from 'react';
-type ModalBodyProps = {
-    children?: ReactNode;
-    isScrollable?: boolean;
-    scrollProps?: object;
-    containerProps?: object;
-};
-declare const ModalBody: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLElement>>;
-export default ModalBody;