@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/FlexGrid/FlexGrid.js

@@ -1,28 +1,21 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _systemConstants = require("@telus-uds/system-constants");
-var _utils = require("../utils");
-var _Row = _interopRequireDefault(require("./Row"));
-var _Col = _interopRequireDefault(require("./Col"));
-var _GutterContext = _interopRequireDefault(require("./providers/GutterContext"));
-var _helpers = _interopRequireDefault(require("./helpers"));
-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 [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
+import { a11yProps, viewProps, getA11yPropsFromHtmlTag, layoutTags, selectSystemProps, BaseView, StyleSheet, createMediaQueryStyles } from '../utils';
+import Row from './Row';
+import Col from './Col';
+import GutterContext from './providers/GutterContext';
+import applyInheritance from './helpers';
+import { useTheme } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
  * A mobile-first flexbox grid.
  */
 
-const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const FlexGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     limitWidth = true,
     gutter = true,
@@ -38,13 +31,13 @@ const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     dataSet,
     ...rest
   } = _ref;
-  const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
+  const viewport = useViewport();
   const {
     themeOptions: {
       enableMediaQueryStyleSheet
     }
-  } = (0, _ThemeProvider.useTheme)();
+  } = useTheme();
   let flexgridStyles;
   let mediaIds;
   const stylesByViewport = {
@@ -52,19 +45,19 @@ const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
     },
     sm: {
-      maxWidth: limitWidth && _systemConstants.viewports.map.get('sm'),
+      maxWidth: limitWidth && viewports.map.get('sm'),
       flexDirection: reverseLevel[1] ? 'column-reverse' : 'column'
     },
     md: {
-      maxWidth: limitWidth && _systemConstants.viewports.map.get('md'),
+      maxWidth: limitWidth && viewports.map.get('md'),
       flexDirection: reverseLevel[2] ? 'column-reverse' : 'column'
     },
     lg: {
-      maxWidth: limitWidth && _systemConstants.viewports.map.get('lg'),
+      maxWidth: limitWidth && viewports.map.get('lg'),
       flexDirection: reverseLevel[3] ? 'column-reverse' : 'column'
     },
     xl: {
-      maxWidth: limitWidth && _systemConstants.viewports.map.get('xl'),
+      maxWidth: limitWidth && viewports.map.get('xl'),
       flexDirection: reverseLevel[4] ? 'column-reverse' : 'column'
     }
   };
@@ -75,11 +68,11 @@ const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     marginHorizontal: outsideGutter ? 'auto' : -16
   };
   if (enableMediaQueryStyleSheet) {
-    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(stylesByViewport);
+    const mediaQueryStyles = createMediaQueryStyles(stylesByViewport);
     const {
       ids,
       styles
-    } = _utils.StyleSheet.create({
+    } = StyleSheet.create({
       flexgrid: {
         ...staticStyles,
         ...mediaQueryStyles
@@ -95,16 +88,16 @@ const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   }
   const props = {
     accessibilityRole,
-    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...selectProps(rest)
   };
   const dataSetValue = mediaIds ? {
     media: mediaIds,
     ...dataSet
   } : dataSet;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GutterContext.default.Provider, {
+  return /*#__PURE__*/_jsx(GutterContext.Provider, {
     value: gutter,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.BaseView, {
+    children: /*#__PURE__*/_jsx(BaseView, {
       ref: ref,
       ...props,
       style: flexgridStyles,
@@ -119,48 +112,47 @@ FlexGrid.propTypes = {
   /**
    * Whether or not to give the grid a fixed width. This also centres the grid horizontally.
    */
-  limitWidth: _propTypes.default.bool,
+  limitWidth: PropTypes.bool,
   /**
    * Whether or not to include gutters in between columns.
    */
-  gutter: _propTypes.default.bool,
+  gutter: PropTypes.bool,
   /**
    * Whether or not to include gutter at the ends to the left and right of the FlexGrid
    */
-  outsideGutter: _propTypes.default.bool,
+  outsideGutter: PropTypes.bool,
   /**
    * Choose if the item order should be reversed from the 'xs' breakpoint. When you pass in false, the order will be normal from the xs breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  xsReverse: _propTypes.default.bool,
+  xsReverse: PropTypes.bool,
   /**
    * Choose if the item order should be reversed from the 'sm' breakpoint. When you pass in false, the order will be normal from the sm breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  smReverse: _propTypes.default.bool,
+  smReverse: PropTypes.bool,
   /**
    * Choose if the item order should be reversed from the 'md' breakpoint. When you pass in false, the order will be normal from the md breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  mdReverse: _propTypes.default.bool,
+  mdReverse: PropTypes.bool,
   /**
    * Choose if the item order should be reversed from the 'lg' breakpoint. When you pass in false, the order will be normal from the lg breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  lgReverse: _propTypes.default.bool,
+  lgReverse: PropTypes.bool,
   /**
    * Choose if the item order should be reversed from the 'xl' breakpoint. When you pass in false, the order will be normal from the xl breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  xlReverse: _propTypes.default.bool,
+  xlReverse: PropTypes.bool,
   /**
    * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
    *
    * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
    * is not defined, the accessibilityRole will default to "heading".
    */
-  tag: _propTypes.default.oneOf(_utils.layoutTags),
+  tag: PropTypes.oneOf(layoutTags),
   /**
    * The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components.
    */
-  children: _propTypes.default.node.isRequired
+  children: PropTypes.node.isRequired
 };
-FlexGrid.Row = _Row.default;
-FlexGrid.Col = _Col.default;
-var _default = FlexGrid;
-exports.default = _default;
+FlexGrid.Row = Row;
+FlexGrid.Col = Col;
+export default FlexGrid;

package/lib/FlexGrid/Row/Row.js

@@ -1,17 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _helpers = _interopRequireDefault(require("../helpers"));
-var _utils = require("../../utils");
-var _ThemeProvider = require("../../ThemeProvider");
-var _ViewportProvider = require("../../ViewportProvider");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import applyInheritance from '../helpers';
+import { BaseView, StyleSheet, createMediaQueryStyles } from '../../utils';
+import { useTheme } from '../../ThemeProvider';
+import { useViewport } from '../../ViewportProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
 const horizontalAlignStyles = horizontalAlign => {
   switch (horizontalAlign) {
     case 'start':
@@ -65,7 +58,7 @@ const distributeStyles = distribute => {
       return {};
   }
 };
-const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const Row = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     horizontalAlign,
     verticalAlign,
@@ -82,8 +75,8 @@ const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     themeOptions: {
       enableMediaQueryStyleSheet
     }
-  } = (0, _ThemeProvider.useTheme)();
-  const viewport = (0, _ViewportProvider.useViewport)();
+  } = useTheme();
+  const viewport = useViewport();
   const staticStyles = {
     width: '100%',
     marginVertical: 0,
@@ -95,7 +88,7 @@ const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ...verticalAlignStyles(verticalAlign),
     ...distributeStyles(distribute)
   };
-  const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
+  const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
   const stylesByViewport = {
     xs: {
       flexDirection: reverseLevel[0] ? 'row-reverse' : 'row',
@@ -121,11 +114,11 @@ const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let rowStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(stylesByViewport);
+    const mediaQueryStyles = createMediaQueryStyles(stylesByViewport);
     const {
       ids,
       styles
-    } = _utils.StyleSheet.create({
+    } = StyleSheet.create({
       row: {
         ...staticStyles,
         ...mediaQueryStyles
@@ -139,7 +132,7 @@ const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       ...stylesByViewport[viewport]
     };
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.BaseView, {
+  return /*#__PURE__*/_jsx(BaseView, {
     ref: ref,
     ...rest,
     style: rowStyles,
@@ -154,36 +147,35 @@ Row.propTypes = {
   /**
    * Align columns horizontally within their row.
    */
-  horizontalAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
+  horizontalAlign: PropTypes.oneOf(['start', 'center', 'end']),
   /**
    * Align columns vertically within their row.
    */
-  verticalAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom']),
+  verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
   /**
    * Distribute empty space around columns.
    */
-  distribute: _propTypes.default.oneOf(['around', 'between']),
+  distribute: PropTypes.oneOf(['around', 'between']),
   /**
    * Choose if the item order should be reversed from the 'xs' breakpoint. When you pass in false, the order will be normal from the xs breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  xsReverse: _propTypes.default.bool,
+  xsReverse: PropTypes.bool,
   /**
    * Choose if the item order should be reversed from the 'sm' breakpoint. When you pass in false, the order will be normal from the sm breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  smReverse: _propTypes.default.bool,
+  smReverse: PropTypes.bool,
   /**
    * Choose if the item order should be reversed from the 'md' breakpoint. When you pass in false, the order will be normal from the md breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  mdReverse: _propTypes.default.bool,
+  mdReverse: PropTypes.bool,
   /**
    * Choose if the item order should be reversed from the 'lg' breakpoint. When you pass in false, the order will be normal from the lg breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  lgReverse: _propTypes.default.bool,
+  lgReverse: PropTypes.bool,
   /**
    * Choose if the item order should be reversed from the 'xl' breakpoint. When you pass in false, the order will be normal from the xl breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  xlReverse: _propTypes.default.bool,
-  children: _propTypes.default.node.isRequired
+  xlReverse: PropTypes.bool,
+  children: PropTypes.node.isRequired
 };
-var _default = Row;
-exports.default = _default;
+export default Row;

package/lib/FlexGrid/Row/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Row = _interopRequireDefault(require("./Row"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _Row.default;
-exports.default = _default;
+import Row from './Row';
+export default Row;

package/lib/FlexGrid/helpers/index.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 const applyInheritance = sizes => {
   let prevSize;
   return sizes.map((size, index) => {
@@ -18,5 +12,4 @@ const applyInheritance = sizes => {
     return undefined;
   });
 };
-var _default = applyInheritance;
-exports.default = _default;
+export default applyInheritance;

package/lib/FlexGrid/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _FlexGrid = _interopRequireDefault(require("./FlexGrid"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _FlexGrid.default;
-exports.default = _default;
+import FlexGrid from './FlexGrid';
+export default FlexGrid;

package/lib/FlexGrid/providers/GutterContext.js

@@ -1,11 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const GutterContext = /*#__PURE__*/_react.default.createContext(false);
-var _default = GutterContext;
-exports.default = _default;
+import React from 'react';
+const GutterContext = /*#__PURE__*/React.createContext(false);
+export default GutterContext;

package/lib/Footnote/Footnote.js

@@ -1,29 +1,22 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
-var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TouchableWithoutFeedback"));
-var _Modal = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Modal"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _SafeAreaView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/SafeAreaView"));
-var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _utils = require("../utils");
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _OrderedList = _interopRequireDefault(require("../OrderedList"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
+import Modal from "react-native-web/dist/exports/Modal";
+import View from "react-native-web/dist/exports/View";
+import SafeAreaView from "react-native-web/dist/exports/SafeAreaView";
+import ScrollView from "react-native-web/dist/exports/ScrollView";
+import defaultDictionary from './dictionary';
+import { getTokensPropType, htmlAttrs, selectSystemProps, useCopy, viewProps } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import { useTheme, useThemeTokens } from '../ThemeProvider';
+import Typography from '../Typography';
+import Icon from '../Icon';
+import OrderedList from '../OrderedList';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
 const selectFootnoteStyle = _ref => {
   let {
     screenHeight,
@@ -137,7 +130,7 @@ const selectCustomContentFontStyle = _ref5 => {
  * - When `Footnote` is open, the inert prop must be set on all children of body excluding the Footnote
  * - When `Footnote` is closed, focus must return to the initiating element
  */
-const Footnote = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+const Footnote = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     copy = 'en',
     number = undefined,
@@ -146,72 +139,72 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     isOpen = false,
     tokens,
     variant = {},
-    dictionary = _dictionary.default,
+    dictionary = defaultDictionary,
     ...rest
   } = _ref6;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Footnote', tokens, variant, {
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Footnote', tokens, variant, {
     viewport
   });
-  const themeOptions = (0, _ThemeProvider.useTheme)();
-  const getCopy = (0, _utils.useCopy)({
+  const themeOptions = useTheme();
+  const getCopy = useCopy({
     dictionary,
     copy
   });
-  const [isVisible, setIsVisible] = _react.default.useState(false);
-  const screenHeight = _Dimensions.default.get('screen').height;
-  const screenWidth = _Dimensions.default.get('screen').width;
-  const getFootnoteBodyContent = _react.default.useCallback(() => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  const screenHeight = Dimensions.get('screen').height;
+  const screenWidth = Dimensions.get('screen').width;
+  const getFootnoteBodyContent = React.useCallback(() => {
     if (!number || !content) {
       return null;
     }
-    if ( /*#__PURE__*/_react.default.isValidElement(content)) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    if (/*#__PURE__*/React.isValidElement(content)) {
+      return /*#__PURE__*/_jsx(View, {
         style: selectCustomContentFontStyle(themeTokens),
         children: content
       });
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedList.default, {
+    return /*#__PURE__*/_jsx(OrderedList, {
       start: number,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedList.default.Item, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      children: /*#__PURE__*/_jsx(OrderedList.Item, {
+        children: /*#__PURE__*/_jsx(Text, {
           style: selectCustomContentFontStyle(themeTokens),
           children: content
         })
       }, number)
     });
   }, [content, number, themeTokens]);
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     if (isOpen) {
       setIsVisible(true);
     }
   }, [isOpen]);
-  const closeFootnote = _react.default.useCallback((event, options) => {
+  const closeFootnote = React.useCallback((event, options) => {
     onClose(event, options);
     setIsVisible(false);
   }, [onClose]);
   const handleClose = event => closeFootnote(event, {
     returnFocus: true
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     ...selectProps(rest),
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
+    children: /*#__PURE__*/_jsx(Modal, {
       visible: isVisible,
       animationType: "slide",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SafeAreaView.default, {
+      children: /*#__PURE__*/_jsx(SafeAreaView, {
         style: staticStyles.container,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+        children: /*#__PURE__*/_jsx(ScrollView, {
           style: selectFootnoteStyle({
             screenHeight,
             isVisible,
             ...themeTokens
           }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          children: /*#__PURE__*/_jsxs(View, {
             style: staticStyles.content,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+            children: [/*#__PURE__*/_jsxs(View, {
               style: [selectFootnoteHeaderContentStyle(themeTokens), staticStyles.headerContent],
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              children: [/*#__PURE__*/_jsx(Typography, {
                 tokens: {
                   fontSize: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.headerFontSize,
                   lineHeight: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.headerLineHeight
@@ -220,12 +213,12 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
                   size: 'h4'
                 },
                 children: getCopy('heading')
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
+              }), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
                 onPress: handleClose,
                 accessibilityLabel: getCopy('close'),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+                children: /*#__PURE__*/_jsx(View, {
                   style: [selectFootnoteCloseButtonStyle(themeTokens), staticStyles.closeButton],
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                  children: /*#__PURE__*/_jsx(Icon, {
                     icon: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.closeIcon,
                     tokens: {
                       size: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.closeButtonIconSize
@@ -233,7 +226,7 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
                   })
                 })
               })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            }), /*#__PURE__*/_jsx(View, {
               style: selectFootnoteBodyStyle({
                 maxWidth: themeOptions.contentMaxWidth,
                 screenWidth,
@@ -248,37 +241,37 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   });
 });
 Footnote.displayName = 'Footnote';
-const copyShape = _propTypes.default.shape({
-  close: _propTypes.default.string.isRequired,
-  heading: _propTypes.default.string.isRequired
+const copyShape = PropTypes.shape({
+  close: PropTypes.string.isRequired,
+  heading: PropTypes.string.isRequired
 });
 
 // If a language dictionary entry is provided, it must contain every key
-const dictionaryContentShape = _propTypes.default.shape({
-  a11yLabel: _propTypes.default.string.isRequired,
-  close: _propTypes.default.string.isRequired,
-  heading: _propTypes.default.string.isRequired
+const dictionaryContentShape = PropTypes.shape({
+  a11yLabel: PropTypes.string.isRequired,
+  close: PropTypes.string.isRequired,
+  heading: PropTypes.string.isRequired
 });
 Footnote.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('Footnote'),
+  tokens: getTokensPropType('Footnote'),
   /**
    * The content.
    */
-  content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   /**
    * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
    * To provide your own, pass a JSON object with the keys `heading` and `close`.
    */
-  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), copyShape]),
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), copyShape]),
   /**
    * A boolean flag used hide or show the `Footnote`. Set to `true` to open the `Footnote`.
    */
-  isOpen: _propTypes.default.bool,
+  isOpen: PropTypes.bool,
   /**
    * The number, must match the number of the `FootnoteLink` that initiated the `Footnote`.
    */
-  number: _propTypes.default.number,
+  number: PropTypes.number,
   /**
    * A callback function to handle the closing of the footnote.
    *
@@ -286,18 +279,17 @@ Footnote.propTypes = {
    * @param {Object} options Custom options
    * @param {boolean} options.returnFocus Should the `Footnote` return focus on close
    */
-  onClose: _propTypes.default.func.isRequired,
+  onClose: PropTypes.func.isRequired,
   /**
    * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
    */
-  dictionary: _propTypes.default.shape({
+  dictionary: PropTypes.shape({
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   })
 };
-var _default = Footnote;
-exports.default = _default;
-const staticStyles = _StyleSheet.default.create({
+export default Footnote;
+const staticStyles = StyleSheet.create({
   container: {
     flex: 1
   },