@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/Modal/Modal.js

@@ -1,28 +1,21 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(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 _WebModal = _interopRequireDefault(require("./WebModal"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+import React from 'react';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
+import View from "react-native-web/dist/exports/View";
+import ScrollView from "react-native-web/dist/exports/ScrollView";
+import NativeModal from "react-native-web/dist/exports/Modal";
+import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types';
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, copyPropTypes, getTokensPropType, selectSystemProps, useCopy, variantProp, viewProps } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import IconButton from '../IconButton';
+import dictionary from './dictionary';
+import useScrollBlocking from '../utils/useScrollBlocking';
+import ModalContent from './ModalContent';
+import WebModal from './WebModal';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectContainerStyles = _ref => {
   let {
     containerPaddingLeft,
@@ -58,10 +51,10 @@ const selectModalStyles = _ref2 => {
     height,
     paddingLeft,
     paddingRight,
-    paddingTop: _Platform.default.OS !== 'web' ? 16 + paddingTop : paddingTop,
+    paddingTop: Platform.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)
+    ...applyShadowToken(shadow)
   };
 };
 const selectBackdropStyles = _ref3 => {
@@ -81,10 +74,9 @@ const selectCloseButtonContainerStyles = _ref4 => {
   } = _ref4;
   return {
     paddingRight,
-    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
+    paddingTop: Platform.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
 });
@@ -103,7 +95,7 @@ const selectScrollViewStyles = () => ({
  * - 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__*/_react.default.forwardRef((_ref5, ref) => {
+const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   var _modalContentRef$curr2;
   let {
     children,
@@ -127,19 +119,19 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     cancelButtonType,
     ...rest
   } = _ref5;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Modal', tokens, variant, {
     viewport,
     maxWidth
   });
-  const modalRef = (0, _useScrollBlocking.default)(isOpen);
-  const modalBodyRef = _react.default.useRef(ref);
-  const modalContentRef = _react.default.useRef(null);
+  const modalRef = useScrollBlocking(isOpen);
+  const modalBodyRef = React.useRef(ref);
+  const modalContentRef = React.useRef(null);
   const {
     closeIcon: CloseIconComponent
   } = themeTokens;
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+  const getCopy = useCopy({
+    dictionary,
     copy
   });
   const closeLabel = getCopy('closeButton');
@@ -149,10 +141,10 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   const handleKeyUp = event => {
     if (event.key === 'Escape') onClose();
   };
-  const manageFocus = _react.default.useCallback(event => {
+  const manageFocus = React.useCallback(event => {
     if (event.key === 'Tab') {
       var _modalBodyRef$current;
-      const focusableElements = Array.from(modalBodyRef === null || modalBodyRef === void 0 ? void 0 : (_modalBodyRef$current = modalBodyRef.current) === null || _modalBodyRef$current === void 0 ? void 0 : _modalBodyRef$current.querySelectorAll(`
+      const focusableElements = Array.from(modalBodyRef === null || modalBodyRef === void 0 || (_modalBodyRef$current = modalBodyRef.current) === null || _modalBodyRef$current === void 0 ? void 0 : _modalBodyRef$current.querySelectorAll(`
       a[href], button, textarea, input, select, 
       [tabindex]:not([tabindex="-1"]),
       [contenteditable="true"]
@@ -174,10 +166,10 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   const showCloseButton = closeButton !== null;
 
   // These refs are used to manage focus in the web modal container
-  const focusTrapRef = _react.default.useRef(null);
-  const closeButtonRef = _react.default.useRef(null);
-  _react.default.useEffect(() => {
-    if (_Platform.default.OS === 'web') {
+  const focusTrapRef = React.useRef(null);
+  const closeButtonRef = React.useRef(null);
+  React.useEffect(() => {
+    if (Platform.OS === 'web') {
       // Add an event listener to manage keydown and focus in the web modal container
       document.addEventListener('keydown', manageFocus);
 
@@ -186,37 +178,37 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     }
     return undefined;
   }, [manageFocus]);
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     if (isOpen) {
       var _modalContentRef$curr;
-      modalContentRef === null || modalContentRef === void 0 ? void 0 : (_modalContentRef$curr = modalContentRef.current) === null || _modalContentRef$curr === void 0 ? void 0 : _modalContentRef$curr.focus();
+      modalContentRef === null || modalContentRef === void 0 || (_modalContentRef$curr = modalContentRef.current) === null || _modalContentRef$curr === void 0 || _modalContentRef$curr.focus();
     }
-  }, [isOpen, modalContentRef === null || modalContentRef === void 0 ? void 0 : (_modalContentRef$curr2 = modalContentRef.current) === null || _modalContentRef$curr2 === void 0 ? void 0 : _modalContentRef$curr2.focus]);
+  }, [isOpen, modalContentRef === null || modalContentRef === void 0 || (_modalContentRef$curr2 = modalContentRef.current) === null || _modalContentRef$curr2 === void 0 ? void 0 : _modalContentRef$curr2.focus]);
   if (!isOpen) {
     return null;
   }
-  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ScrollView.default, {
+  const content = /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs(ScrollView, {
       contentContainerStyle: [staticStyles.positioningContainer],
       ref: modalRef,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: [/*#__PURE__*/_jsx(View, {
         style: [staticStyles.sizingContainer, selectContainerStyles(themeTokens)],
         pointerEvents: "box-none" // don't capture backdrop press events
         ,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        children: /*#__PURE__*/_jsxs(View, {
           ref: modalBodyRef,
           style: [staticStyles.modal, selectModalStyles(themeTokens)],
           onKeyUp: handleKeyUp,
-          children: [showCloseButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          children: [showCloseButton && /*#__PURE__*/_jsx(View, {
             style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
-            children: closeButton || /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            children: closeButton || /*#__PURE__*/_jsx(IconButton, {
               onPress: handleClose,
               icon: CloseIconComponent,
               accessibilityRole: "button",
               accessibilityLabel: closeLabel,
               ref: closeButtonRef
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalContent.default, {
+          }), /*#__PURE__*/_jsx(ModalContent, {
             tokens: tokens,
             variant: variant,
             onCancel: onCancel,
@@ -230,7 +222,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
             confirmButtonVariant: confirmButtonVariant,
             cancelButtonText: cancelButtonText,
             cancelButtonType: cancelButtonType,
-            children: _Platform.default !== 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+            children: Platform !== 'web' ? /*#__PURE__*/_jsx(ScrollView, {
               style: selectScrollViewStyles,
               children: children
             }) : {
@@ -238,25 +230,25 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
             }
           })]
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
+      }), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
         onPress: handleClose,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        children: /*#__PURE__*/_jsx(View, {
           style: [staticStyles.backdrop, selectBackdropStyles(themeTokens)]
         })
       })]
     })
   });
-  if (_Platform.default.OS === 'web') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_WebModal.default, {
+  if (Platform.OS === 'web') {
+    return /*#__PURE__*/_jsxs(WebModal, {
       ...selectProps(rest),
       ref: modalContentRef,
-      children: [content, /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: [content, /*#__PURE__*/_jsx(View, {
         accessibilityRole: "button",
         ref: focusTrapRef
       })]
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
+  return /*#__PURE__*/_jsx(NativeModal, {
     transparent: true,
     ...selectProps(rest),
     children: content
@@ -265,78 +257,77 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
 Modal.displayName = 'Modal';
 Modal.propTypes = {
   ...selectedSystemPropTypes,
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]),
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   /**
    * To define the locale of the copy
    */
-  copy: _utils.copyPropTypes,
+  copy: copyPropTypes,
   /**
    * Setting this to `true` will open the `Modal`
    */
-  isOpen: _propTypes.default.bool,
+  isOpen: PropTypes.bool,
   /**
    * This function is triggered when the `Modal` is closed
    */
-  onClose: _propTypes.default.func,
+  onClose: PropTypes.func,
   /**
    * `max-width` is applied to the `Modal` container
    */
-  maxWidth: _propTypes.default.bool,
-  tokens: (0, _utils.getTokensPropType)('Modal'),
-  variant: _utils.variantProp.propType,
+  maxWidth: PropTypes.bool,
+  tokens: getTokensPropType('Modal'),
+  variant: 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.node,
   /**
    * Receive a string to set the heading of the modal.
    */
-  heading: _propTypes.default.string,
+  heading: PropTypes.string,
   /**
    * Receive h3 or h4 to define the level of the heading.
    */
-  headingLevel: _propTypes.default.oneOf(['h3', 'h4']),
+  headingLevel: PropTypes.oneOf(['h3', 'h4']),
   /**
    * Receive a string to set the sub heading of the modal.
    */
-  subHeading: _propTypes.default.string,
+  subHeading: PropTypes.string,
   /**
    * Receive small, medium or large to set the size of the sub heading.
    */
-  subHeadingSize: _propTypes.default.oneOf(['small', 'medium', 'large']),
+  subHeadingSize: PropTypes.oneOf(['small', 'medium', 'large']),
   /**
    * Receive a string to set the bodyText of the modal.
    */
-  bodyText: _propTypes.default.string,
+  bodyText: PropTypes.string,
   /**
    * Receive a string text for the confirm button.
    */
-  confirmButtonText: _propTypes.default.string,
+  confirmButtonText: PropTypes.string,
   /**
    * Receives a variant of button for the confirm button.
    */
-  confirmButtonVariant: _propTypes.default.object,
+  confirmButtonVariant: PropTypes.object,
   /**
    * Receive a function for the onConfirm event in the confirm button.
    */
-  onConfirm: _propTypes.default.func,
+  onConfirm: PropTypes.func,
   /**
    * Receive a string text for the cancel button.
    */
-  cancelButtonText: _propTypes.default.string,
+  cancelButtonText: PropTypes.string,
   /**
    * Receives a variant of button for the cancel button.
    */
-  cancelButtonType: _propTypes.default.elementType,
+  cancelButtonType: PropTypes.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
+  onCancel: PropTypes.func
 };
-var _default = Modal;
-exports.default = _default;
-const staticStyles = _StyleSheet.default.create({
+export default Modal;
+const staticStyles = StyleSheet.create({
   backdrop: {
     position: 'absolute',
     top: 0,
@@ -344,7 +335,7 @@ const staticStyles = _StyleSheet.default.create({
     right: 0,
     bottom: 0,
     zIndex: -1,
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         cursor: 'pointer'
       }
@@ -360,11 +351,10 @@ const staticStyles = _StyleSheet.default.create({
     // 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)
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         overflow: 'auto'
       }

package/lib/Modal/ModalContent.js

@@ -1,24 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(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 }; }
-const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types';
+import Box from '../Box';
+import { Button } from '../Button';
+import { TextButton } from '../Link';
+import Spacer from '../Spacer';
+import Typography from '../Typography';
+import { useThemeTokens } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     heading,
     headingLevel = 'h3',
@@ -33,20 +26,20 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     tokens,
     variant,
     cancelButtonText,
-    cancelButtonType: CancelButton = _Link.TextButton,
+    cancelButtonType: CancelButton = TextButton,
     children,
     onCancel
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = useViewport();
   const {
     headingColor,
     cancelButtonColor,
     ...themeTokens
-  } = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
+  } = useThemeTokens('Modal', tokens, variant, {
     viewport
   });
-  const [scrollContainerHeight, setScrollContainerHeight] = _react.default.useState(0);
-  const [scrollContentHeight, setScrollContentHeight] = _react.default.useState(0);
+  const [scrollContainerHeight, setScrollContainerHeight] = React.useState(0);
+  const [scrollContentHeight, setScrollContentHeight] = React.useState(0);
   const handleContainerLayout = _ref2 => {
     let {
       nativeEvent: {
@@ -72,6 +65,7 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       borderColor,
       gap,
       direction,
+      footerTopWidth,
       hasBorder
     } = _ref3;
     return {
@@ -83,8 +77,8 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       paddingLeft,
       paddingRight,
       paddingTop,
-      borderTopColor: hasBorder ? borderColor : 'transparent',
-      borderTopWidth: hasBorder ? 1 : 0
+      borderTopWidth: footerTopWidth > 0 ? footerTopWidth : hasBorder && 1 || 0,
+      borderTopColor: borderColor
     };
   };
   const headingStyles = {
@@ -95,12 +89,12 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const subheadingStyles = {
     marginTop: themeTokens.subHeadingMarginTop
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+  return /*#__PURE__*/_jsxs(View, {
     style: styles.modalContent,
     ref: ref,
-    children: [hasHeadingSection && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    children: [hasHeadingSection && /*#__PURE__*/_jsxs(View, {
       style: headingStyles,
-      children: [heading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      children: [heading && /*#__PURE__*/_jsx(Typography, {
         variant: {
           size: headingLevel
         },
@@ -109,41 +103,41 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         },
         heading: headingLevel,
         children: heading
-      }), subHeading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      }), subHeading && /*#__PURE__*/_jsx(View, {
         style: subheadingStyles,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        children: /*#__PURE__*/_jsx(Typography, {
           variant: {
             size: subHeadingSize
           },
           children: subHeading
         })
-      }), Boolean(bodyText && hasHeadingSection) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      }), Boolean(bodyText && hasHeadingSection) && /*#__PURE__*/_jsx(Spacer, {
         space: 3
       })]
-    }), bodyText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    }), bodyText && /*#__PURE__*/_jsx(Box, {
       scroll: {
         onContentSizeChange,
         showsVerticalScrollIndicator: true
       },
       onLayout: handleContainerLayout,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      children: /*#__PURE__*/_jsx(Typography, {
         children: bodyText
       })
-    }), children, (hasConfirmButton || hasCancelButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    }), children, (hasConfirmButton || hasCancelButton) && /*#__PURE__*/_jsxs(View, {
       style: [selectFooterContainerStyles({
         ...themeTokens,
         hasBorder: isContentOverflowing
       })],
-      children: [hasConfirmButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+      children: [hasConfirmButton && /*#__PURE__*/_jsx(Button, {
         variant: confirmButtonVariant,
         tokens: {
           width: viewport === 'xs' || viewport === 'sm' ? '100%' : undefined
         },
         onPress: onConfirm,
         children: confirmButtonText
-      }), hasCancelButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      }), hasCancelButton ? /*#__PURE__*/_jsx(View, {
         style: styles.cancelButton,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CancelButton, {
+        children: /*#__PURE__*/_jsx(CancelButton, {
           tokens: {
             color: cancelButtonColor
           },
@@ -155,32 +149,31 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   });
 });
 ModalContent.displayName = 'ModalContent';
-const styles = _StyleSheet.default.create({
+const styles = StyleSheet.create({
   modalContent: {
     flex: 1,
     flexDirection: 'column',
-    minHeight: _Platform.default.OS === 'web' ? '100%' : 'auto'
+    minHeight: Platform.OS === 'web' ? '100%' : 'auto'
   },
   cancelButton: {
     display: 'flex'
   }
 });
 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,
+  tokens: PropTypes.object,
+  variant: PropTypes.object,
+  heading: PropTypes.string,
+  headingLevel: PropTypes.oneOf(['h3', 'h4']),
+  subHeading: PropTypes.string,
+  subHeadingSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  bodyText: PropTypes.string,
+  confirmButtonText: PropTypes.string,
+  confirmButtonVariant: PropTypes.object,
+  onConfirm: PropTypes.func,
+  cancelButtonText: PropTypes.string,
+  cancelButtonType: PropTypes.elementType,
   // TODO: figure out a way of passing an icon to the TextButton
-  children: _propTypes.default.node,
-  onCancel: _propTypes.default.func
+  children: PropTypes.node,
+  onCancel: PropTypes.func
 };
-var _default = ModalContent;
-exports.default = _default;
+export default ModalContent;

package/lib/Modal/WebModal.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(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 _Portal = _interopRequireDefault(require("../Portal"));
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Portal from '../Portal';
+import { a11yProps, selectSystemProps, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
  * WebModal component.
@@ -22,18 +15,18 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * @param {ReactNode} props.children - The content of the modal.
  * @returns {JSX.Element} The rendered WebModal component.
  */
-const WebModal = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const WebModal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     ...rest
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.default, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsx(View, {
       style: staticStyles.container,
       ...selectProps(rest),
       focusable: true,
       ref: ref,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/_jsx("div", {
         style: staticStyles.content,
         role: "dialog",
         "aria-modal": true,
@@ -46,9 +39,9 @@ WebModal.displayName = 'WebModal';
 WebModal.propTypes = {
   ...selectedSystemPropTypes,
   // children to be rendered within the modal
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)])
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
 };
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   container: {
     position: 'fixed',
     backgroundColor: 'rgba(0, 0, 0, 0)',
@@ -80,5 +73,4 @@ const staticStyles = _StyleSheet.default.create({
     overflowY: 'auto'
   }
 });
-var _default = WebModal;
-exports.default = _default;
+export default WebModal;

package/lib/Modal/dictionary.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
+export default {
   en: {
     // English text from TDS Community `Modal`
     closeButton: 'Close'
@@ -12,5 +6,4 @@ var _default = {
   fr: {
     closeButton: 'Fermer'
   }
-};
-exports.default = _default;
+};

package/lib/Modal/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-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;
+import Modal from './Modal';
+export default Modal;