@telus-uds/components-base 1.66.0 → 1.67.1

package/lib/Listbox/ListboxOverlay.js

@@ -4,47 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 var _portal = require("@gorhom/portal");
-
 var _ThemeProvider = require("../ThemeProvider");
-
 var _Card = _interopRequireDefault(require("../Card"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /* eslint-disable react/require-default-props */
+
 const staticStyles = _StyleSheet.default.create({
   positioner: {
     flex: 1,
     // Grow to maxWidth when possible, shrink when not possible
     position: 'absolute',
     zIndex: 1000000000000000 // Position on top of all the other overlays, including backdrops and modals
-
   },
+
   hidden: {
     // Use opacity not visibility to hide the dropdown during positioning
     // so on web, children may be focused from the first render
     opacity: 0
   }
 });
-
 const paddingVertical = 0;
 const paddingHorizontal = 0;
 const DropdownOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
@@ -76,17 +63,16 @@ const DropdownOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     })
   });
 });
-
 const withPortal = Overlay => {
   // eslint-disable-next-line react/display-name, react/no-multi-comp
   return props => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, { ...props
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, {
+        ...props
       })
     });
   };
 };
-
 DropdownOverlay.displayName = 'DropdownOverlay';
 DropdownOverlay.propTypes = {
   children: _propTypes.default.node.isRequired,
@@ -100,7 +86,5 @@ DropdownOverlay.propTypes = {
   minWidth: _propTypes.default.number,
   onLayout: _propTypes.default.func
 };
-
 var _default = _Platform.default.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;
-
 exports.default = _default;

package/lib/Listbox/PressableItem.js

@@ -4,30 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
 var _utils = require("../utils");
-
 var _ListboxContext = require("./ListboxContext");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /* eslint-disable react/require-default-props */
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs]);
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs]);
 const getItemStyles = _ref => {
   let {
     groupFontName,
@@ -71,7 +60,6 @@ const getItemStyles = _ref => {
     justifyContent: 'center'
   };
 };
-
 const PressableItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     children,
@@ -90,7 +78,6 @@ const PressableItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     selectedId,
     setSelectedId
   } = (0, _ListboxContext.useListboxContext)();
-
   const selectTextStyles = _ref3 => {
     let {
       groupFontName,
@@ -106,7 +93,6 @@ const PressableItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
       lineHeight: lineHeight * itemFontSize
     };
   };
-
   const resolveButtonTokens = pressableState => {
     const themeTokens = (0, _utils.resolvePressableTokens)(tokens, pressableState, {
       isChild,
@@ -114,7 +100,6 @@ const PressableItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     });
     return themeTokens;
   };
-
   const handleKeyPress = event => {
     if (['Enter', ' '].includes(event === null || event === void 0 ? void 0 : event.key)) {
       onPress === null || onPress === void 0 ? void 0 : onPress(event);
@@ -124,7 +109,6 @@ const PressableItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
       prevItemRef.current.focus();
     }
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     isChild: isChild,
     style: pressableState => getItemStyles(resolveButtonTokens(pressableState)),
@@ -153,7 +137,8 @@ const PressableItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   });
 });
 PressableItem.displayName = 'PressableItem';
-PressableItem.propTypes = { ...selectedSystemPropTypes,
+PressableItem.propTypes = {
+  ...selectedSystemPropTypes,
   href: _propTypes.default.string,
   isChild: _propTypes.default.bool,
   children: _propTypes.default.node.isRequired,

package/lib/Listbox/index.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _Listbox = _interopRequireDefault(require("./Listbox"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _Listbox.default;
 exports.default = _default;

package/lib/Modal/Modal.js

@@ -4,45 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
 var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TouchableWithoutFeedback"));
-
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
 var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
-
 var _Modal = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Modal"));
-
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _ThemeProvider = require("../ThemeProvider");
-
 var _utils = require("../utils");
-
 var _ViewportProvider = require("../ViewportProvider");
-
 var _IconButton = _interopRequireDefault(require("../IconButton"));
-
 var _dictionary = _interopRequireDefault(require("./dictionary"));
-
 var _useScrollBlocking = _interopRequireDefault(require("../utils/useScrollBlocking"));
-
+var _ModalContent = _interopRequireDefault(require("./ModalContent"));
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-
 const selectContainerStyles = _ref => {
   let {
     containerPaddingLeft,
@@ -61,7 +42,6 @@ const selectContainerStyles = _ref => {
     paddingBottom: containerPaddingBottom
   };
 };
-
 const selectModalStyles = _ref2 => {
   let {
     backgroundColor,
@@ -79,12 +59,12 @@ const selectModalStyles = _ref2 => {
     height,
     paddingLeft,
     paddingRight,
-    paddingTop,
+    paddingTop: _Platform.default.OS !== 'web' ? 16 + paddingTop : paddingTop,
+    // the 16 additions are due to the border that is present in the mobile version
     paddingBottom,
     ...(0, _ThemeProvider.applyShadowToken)(shadow)
   };
 };
-
 const selectBackdropStyles = _ref3 => {
   let {
     backdropColor,
@@ -95,7 +75,6 @@ const selectBackdropStyles = _ref3 => {
     opacity: backdropOpacity
   };
 };
-
 const selectCloseButtonContainerStyles = _ref4 => {
   let {
     paddingRight,
@@ -103,9 +82,14 @@ const selectCloseButtonContainerStyles = _ref4 => {
   } = _ref4;
   return {
     paddingRight,
-    paddingTop
+    paddingTop: _Platform.default.OS !== 'web' ? 24 + paddingTop : paddingTop // The 24 additions are due to the border that is present in the mobile version for the close button
   };
 };
+
+const selectScrollViewStyles = () => ({
+  flex: 1
+});
+
 /**
  * A modal window is a secondary window that opens on top of the main one.
  * Users have to interact with it before they can carry out their task and return to the main window.
@@ -120,8 +104,6 @@ const selectCloseButtonContainerStyles = _ref4 => {
  * - Don’t use modals to reinforce or repeat information already available in the parent page or view
  * - Don’t use modals consecutively
  */
-
-
 const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   let {
     children,
@@ -129,9 +111,20 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     onClose,
     maxWidth,
     tokens,
-    variant,
     copy,
     closeButton,
+    onCancel = onClose,
+    onConfirm,
+    heading,
+    headingLevel,
+    subHeading,
+    subHeadingSize,
+    bodyText,
+    variant = {},
+    confirmButtonText,
+    confirmButtonVariant,
+    cancelButtonText,
+    cancelButtonType,
     ...rest
   } = _ref5;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -148,23 +141,19 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     copy
   });
   const closeLabel = getCopy('closeButton');
-
   const handleClose = () => {
     if (typeof onClose === 'function') onClose();
   };
-
   const handleKeyUp = event => {
     if (event.key === 'Escape') onClose();
-  }; // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
-  // Hide the close button if `closeButton` is `null`.
-
+  };
 
+  // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
+  // Hide the close button if `closeButton` is `null`.
   const showCloseButton = closeButton !== null;
-
   if (!isOpen) {
     return null;
   }
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
     transparent: true,
     ...selectProps(rest),
@@ -187,7 +176,27 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
               accessibilityRole: "button",
               accessibilityLabel: closeLabel
             })
-          }), children]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalContent.default, {
+            tokens: tokens,
+            variant: variant,
+            onCancel: onCancel,
+            onConfirm: onConfirm,
+            heading: heading,
+            headingLevel: headingLevel,
+            subHeading: subHeading,
+            subHeadingSize: subHeadingSize,
+            bodyText: bodyText,
+            confirmButtonText: confirmButtonText,
+            confirmButtonVariant: confirmButtonVariant,
+            cancelButtonText: cancelButtonText,
+            cancelButtonType: cancelButtonType,
+            children: _Platform.default !== 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+              style: selectScrollViewStyles,
+              children: children
+            }) : {
+              children
+            }
+          })]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
         onPress: handleClose,
@@ -199,39 +208,79 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   });
 });
 Modal.displayName = 'Modal';
-Modal.propTypes = { ...selectedSystemPropTypes,
+Modal.propTypes = {
+  ...selectedSystemPropTypes,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]),
-
   /**
    * To define the locale of the copy
    */
   copy: _utils.copyPropTypes,
-
   /**
    * Setting this to `true` will open the `Modal`
    */
   isOpen: _propTypes.default.bool,
-
   /**
    * This function is triggered when the `Modal` is closed
    */
   onClose: _propTypes.default.func,
-
   /**
    * `max-width` is applied to the `Modal` container
    */
   maxWidth: _propTypes.default.bool,
   tokens: (0, _utils.getTokensPropType)('Modal'),
   variant: _utils.variantProp.propType,
-
   /**
    * Pass a react node to override the default close button or pass `null` to hide the close button.
    */
-  closeButton: _propTypes.default.node
+  closeButton: _propTypes.default.node,
+  /**
+   * Receive a string to set the heading of the modal.
+   */
+  heading: _propTypes.default.string,
+  /**
+   * Receive h3 or h4 to define the level of the heading.
+   */
+  headingLevel: _propTypes.default.oneOf(['h3', 'h4']),
+  /**
+   * Receive a string to set the sub heading of the modal.
+   */
+  subHeading: _propTypes.default.string,
+  /**
+   * Receive small, medium or large to set the size of the sub heading.
+   */
+  subHeadingSize: _propTypes.default.oneOf(['small', 'medium', 'large']),
+  /**
+   * Receive a string to set the bodyText of the modal.
+   */
+  bodyText: _propTypes.default.string,
+  /**
+   * Receive a string text for the confirm button.
+   */
+  confirmButtonText: _propTypes.default.string,
+  /**
+   * Receives a variant of button for the confirm button.
+   */
+  confirmButtonVariant: _propTypes.default.object,
+  /**
+   * Receive a function for the onConfirm event in the confirm button.
+   */
+  onConfirm: _propTypes.default.func,
+  /**
+   * Receive a string text for the cancel button.
+   */
+  cancelButtonText: _propTypes.default.string,
+  /**
+   * Receives a variant of button for the cancel button.
+   */
+  cancelButtonType: _propTypes.default.elementType,
+  // TODO: figure out a way of passing an icon to the TextButton
+  /**
+   * Receive a function for the onCancel event in the cancel button.
+   */
+  onCancel: _propTypes.default.func
 };
 var _default = Modal;
 exports.default = _default;
-
 const staticStyles = _StyleSheet.default.create({
   backdrop: {
     position: 'absolute',
@@ -255,8 +304,8 @@ const staticStyles = _StyleSheet.default.create({
     maxHeight: '100%',
     // so that the container can expand up to the full viewport height
     width: '100%' // ensure that the modal actually expands to the set maxWidth
-
   },
+
   modal: {
     maxHeight: '100%',
     // so that the modal can expand vertically up to the  sizing container's height (exclusive of its vertical padding)

package/lib/Modal/ModalContent.js

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Box = _interopRequireDefault(require("../Box"));
+var _Button = require("../Button");
+var _Link = require("../Link");
+var _Spacer = _interopRequireDefault(require("../Spacer"));
+var _Typography = _interopRequireDefault(require("../Typography"));
+var _ThemeProvider = require("../ThemeProvider");
+var _ViewportProvider = require("../ViewportProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const ModalContent = _ref => {
+  let {
+    heading,
+    headingLevel = 'h3',
+    subHeading,
+    subHeadingSize = 'medium',
+    bodyText,
+    confirmButtonText,
+    confirmButtonVariant = {
+      priority: 'high'
+    },
+    onConfirm,
+    tokens,
+    variant,
+    cancelButtonText,
+    cancelButtonType: CancelButton = _Link.TextButton,
+    children,
+    onCancel
+  } = _ref;
+  const {
+    headingColor,
+    cancelButtonColor,
+    ...themeTokens
+  } = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant);
+  const [scrollContainerHeight, setScrollContainerHeight] = (0, _react.useState)(0);
+  const [scrollContentHeight, setScrollContentHeight] = (0, _react.useState)(0);
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const handleContainerLayout = _ref2 => {
+    let {
+      nativeEvent: {
+        layout: {
+          height
+        }
+      }
+    } = _ref2;
+    return setScrollContainerHeight(height);
+  };
+  const onContentSizeChange = (_, height) => setScrollContentHeight(height);
+  const isContentOverflowing = scrollContentHeight > scrollContainerHeight;
+  const hasConfirmButton = confirmButtonText !== undefined && onConfirm !== undefined;
+  const hasCancelButton = cancelButtonText !== undefined && onCancel !== undefined;
+  const hasHeadingSection = Boolean(heading || subHeading);
+  const selectFooterContainerStyles = _ref3 => {
+    let {
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      marginLeft,
+      marginRight,
+      borderColor,
+      gap,
+      direction,
+      hasBorder
+    } = _ref3;
+    return {
+      flexDirection: direction,
+      alignItems: 'center',
+      gap,
+      marginLeft: -marginLeft,
+      marginRight: -marginRight,
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      borderTopColor: hasBorder ? borderColor : 'transparent',
+      borderTopWidth: hasBorder ? 1 : 0
+    };
+  };
+  const headingStyles = {
+    flexDirection: 'column',
+    paddingTop: 8,
+    paddingRight: themeTokens.headingPaddingRight
+  };
+  const subheadingStyles = {
+    marginTop: themeTokens.subHeadingMarginTop
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: styles.modalContent,
+    children: [hasHeadingSection && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: headingStyles,
+      children: [heading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        variant: {
+          size: headingLevel
+        },
+        tokens: {
+          color: headingColor
+        },
+        heading: headingLevel,
+        children: heading
+      }), subHeading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: subheadingStyles,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: {
+            size: subHeadingSize
+          },
+          children: subHeading
+        })
+      }), Boolean(bodyText && hasHeadingSection) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+        space: 3
+      })]
+    }), bodyText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      scroll: {
+        onContentSizeChange,
+        showsVerticalScrollIndicator: true
+      },
+      onLayout: handleContainerLayout,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        children: bodyText
+      })
+    }), children, (hasConfirmButton || hasCancelButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [selectFooterContainerStyles({
+        ...themeTokens,
+        hasBorder: isContentOverflowing
+      })],
+      children: [hasConfirmButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+        variant: confirmButtonVariant,
+        tokens: {
+          width: viewport === 'xs' || viewport === 'sm' ? '100%' : undefined
+        },
+        onPress: onConfirm,
+        children: confirmButtonText
+      }), hasCancelButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: styles.styledTextButtonContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CancelButton, {
+          tokens: {
+            color: cancelButtonColor
+          },
+          onPress: onCancel,
+          children: cancelButtonText
+        })
+      }) : null]
+    })]
+  });
+};
+const styles = _StyleSheet.default.create({
+  modalContent: {
+    flex: 1,
+    flexDirection: 'column',
+    minHeight: _Platform.default.OS === 'web' ? '100%' : 'auto'
+  },
+  styledTextButtonContainer: {
+    flex: 1
+  }
+});
+ModalContent.propTypes = {
+  tokens: _propTypes.default.object,
+  variant: _propTypes.default.object,
+  heading: _propTypes.default.string,
+  headingLevel: _propTypes.default.oneOf(['h3', 'h4']),
+  subHeading: _propTypes.default.string,
+  subHeadingSize: _propTypes.default.oneOf(['small', 'medium', 'large']),
+  bodyText: _propTypes.default.string,
+  confirmButtonText: _propTypes.default.string,
+  confirmButtonVariant: _propTypes.default.object,
+  onConfirm: _propTypes.default.func,
+  cancelButtonText: _propTypes.default.string,
+  cancelButtonType: _propTypes.default.elementType,
+  // TODO: figure out a way of passing an icon to the TextButton
+  children: _propTypes.default.node,
+  onCancel: _propTypes.default.func
+};
+var _default = ModalContent;
+exports.default = _default;

package/lib/Modal/index.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _Modal = _interopRequireDefault(require("./Modal"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _Modal.default;
 exports.default = _default;