@telus-uds/components-web 2.44.0 → 3.0.0

package/lib/Disclaimer/index.js

@@ -1,13 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Disclaimer.default;
-  }
-});
-var _Disclaimer = _interopRequireDefault(require("./Disclaimer"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+export { default } from './Disclaimer';

package/lib/ExpandCollapseMini/ExpandCollapseMini.js

@@ -1,16 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _componentsBase = require("@telus-uds/components-base");
-var _ExpandCollapseMiniControl = _interopRequireDefault(require("./ExpandCollapseMiniControl"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ExpandCollapse, getTokensPropType } from '@telus-uds/components-base';
+import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     onToggle = () => {},
@@ -26,11 +19,11 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
       onToggle(event, isOpen);
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse, {
+  return /*#__PURE__*/_jsx(ExpandCollapse, {
     onChange: handleChange,
     tokens: tokens,
     initialOpen: initialOpen ? [expandCollapeMiniPanelId] : [],
-    children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse.Panel, {
+    children: expandProps => /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
       ...expandProps,
       panelId: expandCollapeMiniPanelId,
       variant: {
@@ -46,7 +39,7 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
       // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,
-      control: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapseMiniControl.default, {
+      control: pressableState => /*#__PURE__*/_jsx(ExpandCollapseMiniControl, {
         pressableState: pressableState,
         ...rest
       }),
@@ -58,24 +51,23 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
 });
 ExpandCollapseMini.displayName = 'ExpandCollapseMini';
 ExpandCollapseMini.propTypes = {
-  ..._ExpandCollapseMiniControl.default.propTypes,
+  ...ExpandCollapseMiniControl.propTypes,
   /**
    * Function to call on pressing the panel's control, which should open or close the panel.
    */
-  onToggle: _propTypes.default.func,
+  onToggle: PropTypes.func,
   /**
    * ID for DOM element on web
    */
-  nativeID: _propTypes.default.string,
+  nativeID: PropTypes.string,
   /**
    * Children nodes that can be added
    */
-  children: _propTypes.default.node.isRequired,
+  children: PropTypes.node.isRequired,
   /**
    * Controls if the panel and the content is opened by default on the first load
    */
-  initialOpen: _propTypes.default.bool,
-  tokens: (0, _componentsBase.getTokensPropType)('ExpandCollapseMini')
+  initialOpen: PropTypes.bool,
+  tokens: getTokensPropType('ExpandCollapseMini')
 };
-var _default = ExpandCollapseMini;
-exports.default = _default;
+export default ExpandCollapseMini;

package/lib/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -1,16 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _componentsBase = require("@telus-uds/components-base");
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import { selectSystemProps, Link, useThemeTokens } from '@telus-uds/components-base';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 
 // The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
 // and a more appropriate press area, defer interaction handling to it.
@@ -21,7 +14,6 @@ const presentationOnly = {
   // Stop RNW from stopping clicks from bubbling to Control
   focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
 };
-
 const selectLinkTokens = _ref => {
   let {
     color,
@@ -36,7 +28,7 @@ const selectLinkTokens = _ref => {
     blockFontSize: fontSize
   };
 };
-const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     pressableState,
     collapseTitle,
@@ -54,14 +46,14 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref2,
   // we only want focus outline when focusing, if user is pressing we don't want the border.
   const {
     outerBorderColor
-  } = (0, _componentsBase.useThemeTokens)('Link', {}, {}, {
+  } = useThemeTokens('Link', {}, {}, {
     focus
   });
   const {
     size,
     icon,
     ...themeTokens
-  } = (0, _componentsBase.useThemeTokens)('ExpandCollapseMiniControl', tokens, variant, {
+  } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, {
     expanded,
     focus
   });
@@ -84,7 +76,7 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref2,
     }
     return {};
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, {
+  return /*#__PURE__*/_jsx(Link, {
     variant: appearance,
     icon: icon,
     iconPosition: iconPosition,
@@ -102,24 +94,23 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref2,
 ExpandCollapseMiniControl.displayName = 'ExpandCollapseMiniControl';
 ExpandCollapseMiniControl.propTypes = {
   ...selectedSystemPropTypes,
-  ..._componentsBase.Link.propTypes,
+  ...Link.propTypes,
   /**
    * Optional function to call on pressing the panel's control, in addition to opening or closing the panel
    */
-  onPress: _propTypes.default.func,
+  onPress: PropTypes.func,
   /**
    * ExpandCollapseMiniControl title when expanded
    */
-  expandTitle: _propTypes.default.string.isRequired,
+  expandTitle: PropTypes.string.isRequired,
   /**
    * ExpandCollapseMiniControl title when collapsed
    */
-  collapseTitle: _propTypes.default.string.isRequired,
+  collapseTitle: PropTypes.string.isRequired,
   /**
    * React Native's `Pressable`'s state object
    */
-  pressableState: _propTypes.default.object,
-  variant: _propTypes.default.object
+  pressableState: PropTypes.object,
+  variant: PropTypes.object
 };
-var _default = ExpandCollapseMiniControl;
-exports.default = _default;
+export default ExpandCollapseMiniControl;

package/lib/ExpandCollapseMini/index.js

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

package/lib/Footnote/Footnote.js

@@ -1,28 +1,19 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _componentsBase = require("@telus-uds/components-base");
-var _OrderedListBase = _interopRequireDefault(require("../OrderedList/OrderedListBase"));
-var _utils = require("../utils");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _jsxRuntime = require("react/jsx-runtime");
-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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { createGlobalStyle } from 'styled-components';
+import { Icon, Portal, selectSystemProps, Typography, useCopy, useTheme, useResponsiveProp, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
+import OrderedListBase from '../OrderedList/OrderedListBase';
+import { htmlAttrs, media, renderStructuredContent, isElementFocusable } from '../utils';
+import defaultDictionary from './dictionary';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const viewportBreakpoint = 1440;
-const GlobalBodyScrollLock = /*#__PURE__*/(0, _styledComponents.createGlobalStyle)({
-  'html, body': (0, _utils.media)().until('md').css({
+const GlobalBodyScrollLock = /*#__PURE__*/createGlobalStyle({
+  'html, body': media().until('md').css({
     overflow: 'hidden'
   })
 });
-const StyledFootnote = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const StyledFootnote = /*#__PURE__*/styled.div.withConfig({
   displayName: "Footnote__StyledFootnote",
   componentId: "components-web__sc-1563bo5-0"
 })(_ref => {
@@ -50,7 +41,7 @@ const StyledFootnote = /*#__PURE__*/_styledComponents.default.div.withConfig({
     },
     zIndex: 99999,
     visibility: isVisible ? 'visible' : 'hidden',
-    ...(0, _utils.media)().from(isMobileFullScreen ? 'md' : 'xs').css({
+    ...media().from(isMobileFullScreen ? 'md' : 'xs').css({
       top: 'auto',
       bottom: 0,
       height: 'auto',
@@ -69,14 +60,14 @@ const StyledFootnote = /*#__PURE__*/_styledComponents.default.div.withConfig({
   }
   return {};
 });
-const StyledFootnoteHeader = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const StyledFootnoteHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "Footnote__StyledFootnoteHeader",
   componentId: "components-web__sc-1563bo5-1"
 })(() => ({
   position: 'relative',
   width: '100%'
 }));
-const StyledHeader = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const StyledHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "Footnote__StyledHeader",
   componentId: "components-web__sc-1563bo5-2"
 })(_ref3 => {
@@ -97,7 +88,7 @@ const StyledHeader = /*#__PURE__*/_styledComponents.default.div.withConfig({
     paddingLeft: footnoteHeaderPaddingLeft
   };
 });
-const StyledFootnoteBody = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const StyledFootnoteBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "Footnote__StyledFootnoteBody",
   componentId: "components-web__sc-1563bo5-3"
 })(_ref4 => {
@@ -118,14 +109,14 @@ const StyledFootnoteBody = /*#__PURE__*/_styledComponents.default.div.withConfig
     backgroundColor: footnoteBodyBackground,
     padding: footnoteBodyPadding,
     maxHeight: `calc(100vh - ${headerHeight}px)`,
-    ...(0, _utils.media)().from('md').css({
+    ...media().from('md').css({
       maxHeight: `calc(50vh - ${headerHeight}px)`
     }),
     height: bodyHeight,
     opacity: isTextVisible ? 1 : 0
   };
 });
-const List = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default).withConfig({
+const List = /*#__PURE__*/styled(OrderedListBase).withConfig({
   displayName: "Footnote__List",
   componentId: "components-web__sc-1563bo5-4"
 })(_ref5 => {
@@ -137,7 +128,7 @@ const List = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.defaul
     paddingLeft: listPaddingLeft
   };
 });
-const ListItem = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default.Item).withConfig({
+const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
   displayName: "Footnote__ListItem",
   componentId: "components-web__sc-1563bo5-5"
 })(_ref6 => {
@@ -164,7 +155,7 @@ const ListItem = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.de
     paddingLeft: listItemPaddingLeft
   };
 });
-const CloseButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
+const CloseButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "Footnote__CloseButton",
   componentId: "components-web__sc-1563bo5-6"
 })(_ref7 => {
@@ -188,7 +179,7 @@ const CloseButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
     width: closeButtonWidth
   };
 });
-const ContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const ContentContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Footnote__ContentContainer",
   componentId: "components-web__sc-1563bo5-7"
 })({
@@ -205,7 +196,7 @@ const ContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
     width: maxWidth
   };
 });
-const StyledCustomContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const StyledCustomContentContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Footnote__StyledCustomContentContainer",
   componentId: "components-web__sc-1563bo5-8"
 })(_ref9 => {
@@ -224,8 +215,8 @@ const StyledCustomContentContainer = /*#__PURE__*/_styledComponents.default.div.
   };
 });
 const usePrevious = value => {
-  const ref = _react.default.useRef();
-  _react.default.useEffect(() => {
+  const ref = React.useRef();
+  React.useEffect(() => {
     ref.current = value;
   });
   if (ref.current) {
@@ -252,7 +243,7 @@ const usePrevious = value => {
  * - 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((props, ref) => {
+const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _theme$themeOptions;
   const {
     copy = 'en',
@@ -263,10 +254,10 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     tokens,
     variant = {},
     isMobileFullScreen = true,
-    dictionary = _dictionary.default,
+    dictionary = defaultDictionary,
     ...rest
   } = props;
-  const viewport = (0, _componentsBase.useViewport)();
+  const viewport = useViewport();
   const {
     footnoteBackground,
     footnoteBorderTopSizeMd,
@@ -301,31 +292,31 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     closeButtonWidth,
     closeButtonIconSize,
     closeIcon
-  } = (0, _componentsBase.useThemeTokens)('Footnote', tokens, variant, {
+  } = useThemeTokens('Footnote', tokens, variant, {
     viewport
   });
-  const footnoteRef = _react.default.useRef(null);
-  const headerRef = _react.default.useRef(null);
-  const bodyRef = _react.default.useRef(null);
-  const contentRef = _react.default.useRef(null);
-  const closeButtonRef = _react.default.useRef(null);
-  const [data, setData] = _react.default.useState({
+  const footnoteRef = React.useRef(null);
+  const headerRef = React.useRef(null);
+  const bodyRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const closeButtonRef = React.useRef(null);
+  const [data, setData] = React.useState({
     content: null,
     number: null
   });
-  const [headerHeight, setHeaderHeight] = _react.default.useState('auto');
-  const [bodyHeight, setBodyHeight] = _react.default.useState('auto');
-  const [isVisible, setIsVisible] = _react.default.useState(false);
-  const [isTextVisible, setIsTextVisible] = _react.default.useState(true);
-  const getCopy = (0, _componentsBase.useCopy)({
+  const [headerHeight, setHeaderHeight] = React.useState('auto');
+  const [bodyHeight, setBodyHeight] = React.useState('auto');
+  const [isVisible, setIsVisible] = React.useState(false);
+  const [isTextVisible, setIsTextVisible] = React.useState(true);
+  const getCopy = useCopy({
     dictionary,
     copy
   });
   const prevProps = usePrevious(props);
-  const theme = (0, _componentsBase.useTheme)();
-  const maxWidth = (0, _componentsBase.useResponsiveProp)((_theme$themeOptions = theme.themeOptions) === null || _theme$themeOptions === void 0 ? void 0 : _theme$themeOptions.contentMaxWidth);
-  const [isScrollable, setIsScrollable] = _react.default.useState(false);
-  const closeFootnote = _react.default.useCallback((event, options) => {
+  const theme = useTheme();
+  const maxWidth = useResponsiveProp((_theme$themeOptions = theme.themeOptions) === null || _theme$themeOptions === void 0 ? void 0 : _theme$themeOptions.contentMaxWidth);
+  const [isScrollable, setIsScrollable] = React.useState(false);
+  const closeFootnote = React.useCallback((event, options) => {
     onClose(event, options);
   }, [onClose]);
 
@@ -336,7 +327,7 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
    * if the footnote is active the focus will be inside the footnote until it is closed,
    * if there are no interactive elements the focus will remain inside the close button.
    */
-  const manageFootnoteFocusAndClose = _react.default.useCallback(event => {
+  const manageFootnoteFocusAndClose = React.useCallback(event => {
     var _footnoteRef$current, _footnoteRef$current2;
     if (!isVisible) {
       return;
@@ -347,7 +338,7 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
           returnFocus: true
         });
       } else if (event.key === 'Tab') {
-        const focusableElements = Array.from(footnoteRef.current.querySelectorAll('*')).filter(_utils.isElementFocusable);
+        const focusableElements = Array.from(footnoteRef.current.querySelectorAll('*')).filter(isElementFocusable);
         const firstElement = focusableElements[0];
         const lastElement = focusableElements[focusableElements.length - 1];
         if (event.shiftKey && document.activeElement === firstElement) {
@@ -413,7 +404,7 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   };
 
   // Set height of header on mount
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     var _headerRef$current;
     setHeaderHeight((_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.offsetHeight);
   }, []);
@@ -424,7 +415,7 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   };
 
   // Add listeners for mouse clicks outside of Footnote and for ESCAPE key presses
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     if (isOpen) {
       setIsVisible(true);
       document.addEventListener('mousedown', manageFootnoteFocusAndClose);
@@ -447,7 +438,7 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   }, [manageFootnoteFocusAndClose, isOpen]);
 
   // Set data if opening a new footnote
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     if (isOpen && !prevProps.isOpen) {
       setData({
         content,
@@ -455,7 +446,7 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       });
     }
   }, [isOpen, prevProps.isOpen, content, number]);
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     if (isOpen && prevProps.isOpen && number !== prevProps.number) {
       saveCurrentHeight();
       setIsTextVisible(false);
@@ -463,13 +454,13 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   }, [number, isOpen, prevProps.isOpen, prevProps.number]);
 
   // Reset footnote on close
-  _react.default.useEffect(resetFootnote, [isOpen]);
-  const getFootnoteBodyContent = _react.default.useCallback(() => {
+  React.useEffect(resetFootnote, [isOpen]);
+  const getFootnoteBodyContent = React.useCallback(() => {
     if (!data.number || !data.content) {
       return null;
     }
-    if ( /*#__PURE__*/_react.default.isValidElement(data.content)) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCustomContentContainer, {
+    if (/*#__PURE__*/React.isValidElement(data.content)) {
+      return /*#__PURE__*/_jsx(StyledCustomContentContainer, {
         listItemColor: listItemColor,
         listItemFontSize: listItemFontSize,
         listItemLineHeight: listItemLineHeight,
@@ -478,28 +469,28 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         children: data.content
       });
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
+    return /*#__PURE__*/_jsx(List, {
       start: data.number,
       ref: contentRef,
       listPaddingLeft: listPaddingLeft,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
+      children: /*#__PURE__*/_jsx(ListItem, {
         listItemMarkerFontSize: listItemMarkerFontSize,
         listItemMarkerLineHeight: listItemMarkerLineHeight,
         listItemColor: listItemColor,
         listItemFontSize: listItemFontSize,
         listItemLineHeight: listItemLineHeight,
         listItemPaddingLeft: listItemPaddingLeft,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        children: /*#__PURE__*/_jsx(Typography, {
           tokens: {
             fontSize: listItemFontSize,
             lineHeight: listItemLineHeight
           },
-          children: (0, _utils.renderStructuredContent)(data.content)
+          children: renderStructuredContent(data.content)
         })
       })
     });
   }, [data.content, data.number, listItemColor, listItemFontSize, listItemLineHeight, listItemMarkerFontSize, listItemMarkerLineHeight, listItemPaddingLeft, listPaddingLeft]);
-  const checkIfScrollable = _react.default.useCallback(() => {
+  const checkIfScrollable = React.useCallback(() => {
     const footnoteElement = footnoteRef.current;
     if (footnoteElement) {
       const footnoteViewportHeight = footnoteElement.clientHeight ? footnoteElement.clientHeight : 0;
@@ -507,18 +498,18 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       setIsScrollable(contentHeight > footnoteViewportHeight * 0.5);
     }
   }, [contentRef, setIsScrollable]);
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     if (isOpen) {
       setTimeout(() => {
         checkIfScrollable();
       }, 100);
     }
   }, [isOpen, checkIfScrollable]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Portal, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsxs("div", {
       ...selectProps(rest),
       ref: ref,
-      children: [isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalBodyScrollLock, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFootnote, {
+      children: [isOpen && /*#__PURE__*/_jsx(GlobalBodyScrollLock, {}), /*#__PURE__*/_jsx(StyledFootnote, {
         ref: footnoteRef,
         isOpen: isOpen,
         isVisible: isVisible,
@@ -528,18 +519,18 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         footnoteBorderTop: `${footnoteBorderTopSizeMd}px solid ${footnoteBorderColorMd}`,
         isScrollable: isScrollable,
         isMobileFullScreen: isMobileFullScreen,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentContainer, {
+        children: /*#__PURE__*/_jsxs(ContentContainer, {
           maxWidth: maxWidth,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFootnoteHeader, {
+          children: [/*#__PURE__*/_jsx(StyledFootnoteHeader, {
             ref: headerRef,
             viewport: viewport,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledHeader, {
+            children: /*#__PURE__*/_jsxs(StyledHeader, {
               footnoteHeaderPaddingLeft: footnoteHeaderPaddingLeft,
               footnoteHeaderPaddingRight: footnoteHeaderPaddingRight,
               footnoteHeaderPaddingTop: footnoteHeaderPaddingTop,
               footnoteHeaderPaddingBottom: footnoteHeaderPaddingBottom,
               headerMargin: headerMargin,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+              children: [/*#__PURE__*/_jsx(Typography, {
                 tokens: {
                   fontSize: headerFontSize,
                   lineHeight: headerLineHeight
@@ -548,7 +539,7 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
                   size: 'h4'
                 },
                 children: getCopy('heading')
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
+              }), /*#__PURE__*/_jsx(CloseButton, {
                 ref: closeButtonRef,
                 closeButtonBorder: `${closeButtonBorderSize} solid ${closeButtonBorderColor}`,
                 closeButtonWidth: `${closeButtonWidth}px`,
@@ -561,7 +552,7 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
                   });
                 },
                 "aria-label": getCopy('close'),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+                children: /*#__PURE__*/_jsx(Icon, {
                   icon: closeIcon,
                   tokens: {
                     size: `${closeButtonIconSize}px`
@@ -569,7 +560,7 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
                 })
               })]
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFootnoteBody, {
+          }), /*#__PURE__*/_jsx(StyledFootnoteBody, {
             ref: bodyRef,
             bodyHeight: bodyHeight,
             headerHeight: headerHeight,
@@ -586,37 +577,37 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, 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, _componentsBase.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.
    *
@@ -624,18 +615,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
   }),
   /**
    * A boolean flag used to disable isMobileFullScreen of Footnote for mobile view
    */
-  isMobileFullScreen: _propTypes.default.bool
+  isMobileFullScreen: PropTypes.bool
 };
-var _default = Footnote;
-exports.default = _default;
+export default Footnote;