@telus-uds/components-web 4.19.0 → 5.0.0-alpha.0

package/lib/cjs/Footnote/Footnote.js

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Footnote = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _OrderedListBase = _interopRequireDefault(require("../OrderedList/OrderedListBase"));
+var _OrderedListBase = require("../OrderedList/OrderedListBase");
+var _OrderedListItemBase = require("../OrderedList/OrderedListItemBase");
 var _utils = require("../utils");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _dictionary = require("./dictionary");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const viewportBreakpoint = 1440;
@@ -27,20 +27,20 @@ const StyledFootnote = /*#__PURE__*/_styledComponents.default.div.withConfig({
   componentId: "components-web__sc-1563bo5-0"
 })(_ref => {
   let {
-    footnoteBackground,
-    isVisible,
-    footnoteBorderTop,
-    isScrollable,
-    isMobileFullScreen
+    $footnoteBackground,
+    $isVisible,
+    $footnoteBorderTop,
+    $isScrollable,
+    $isMobileFullScreen
   } = _ref;
   return {
     position: 'fixed',
-    overflowY: isVisible && isScrollable ? 'scroll' : 'hidden',
+    overflowY: $isVisible && $isScrollable ? 'scroll' : 'hidden',
     top: 0,
     left: window.innerWidth >= viewportBreakpoint ? '50%' : 0,
     height: '100vh',
     width: '100vw',
-    backgroundColor: footnoteBackground,
+    backgroundColor: $footnoteBackground,
     display: 'block',
     transform: 'translateY(100%)',
     translate: window.innerWidth >= viewportBreakpoint ? '-50%' : '',
@@ -49,20 +49,20 @@ const StyledFootnote = /*#__PURE__*/_styledComponents.default.div.withConfig({
       transition: 'none'
     },
     zIndex: 99999,
-    visibility: isVisible ? 'visible' : 'hidden',
-    ...(0, _utils.media)().from(isMobileFullScreen ? 'md' : 'xs').css({
+    visibility: $isVisible ? 'visible' : 'hidden',
+    ...(0, _utils.media)().from($isMobileFullScreen ? 'md' : 'xs').css({
       top: 'auto',
       bottom: 0,
       height: 'auto',
       maxHeight: '50vh',
-      borderTop: footnoteBorderTop
+      borderTop: $footnoteBorderTop
     })
   };
 }, _ref2 => {
   let {
-    isOpen
+    $isOpen
   } = _ref2;
-  if (isOpen) {
+  if ($isOpen) {
     return {
       transform: 'translateY(0)'
     };
@@ -81,20 +81,20 @@ const StyledHeader = /*#__PURE__*/_styledComponents.default.div.withConfig({
   componentId: "components-web__sc-1563bo5-2"
 })(_ref3 => {
   let {
-    footnoteHeaderPaddingLeft,
-    footnoteHeaderPaddingRight,
-    footnoteHeaderPaddingTop,
-    footnoteHeaderPaddingBottom
+    $footnoteHeaderPaddingLeft,
+    $footnoteHeaderPaddingRight,
+    $footnoteHeaderPaddingTop,
+    $footnoteHeaderPaddingBottom
   } = _ref3;
   return {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    paddingTop: footnoteHeaderPaddingTop,
-    paddingBottom: footnoteHeaderPaddingBottom,
-    paddingRight: footnoteHeaderPaddingRight,
-    paddingLeft: footnoteHeaderPaddingLeft
+    paddingTop: $footnoteHeaderPaddingTop,
+    paddingBottom: $footnoteHeaderPaddingBottom,
+    paddingRight: $footnoteHeaderPaddingRight,
+    paddingLeft: $footnoteHeaderPaddingLeft
   };
 });
 const StyledFootnoteBody = /*#__PURE__*/_styledComponents.default.div.withConfig({
@@ -102,11 +102,11 @@ const StyledFootnoteBody = /*#__PURE__*/_styledComponents.default.div.withConfig
   componentId: "components-web__sc-1563bo5-3"
 })(_ref4 => {
   let {
-    footnoteBodyBackground,
-    footnoteBodyPadding,
-    headerHeight,
-    bodyHeight,
-    isTextVisible
+    $footnoteBodyBackground,
+    $footnoteBodyPadding,
+    $headerHeight,
+    $bodyHeight,
+    $isTextVisible
   } = _ref4;
   return {
     overflow: 'auto',
@@ -115,53 +115,53 @@ const StyledFootnoteBody = /*#__PURE__*/_styledComponents.default.div.withConfig
     '@media() (prefers-reduced-motion: reduce)': {
       transition: 'height 1ms ease-out, opacity 1ms ease-out'
     },
-    backgroundColor: footnoteBodyBackground,
-    padding: footnoteBodyPadding,
-    maxHeight: `calc(100vh - ${headerHeight}px)`,
+    backgroundColor: $footnoteBodyBackground,
+    padding: $footnoteBodyPadding,
+    maxHeight: `calc(100vh - ${$headerHeight}px)`,
     ...(0, _utils.media)().from('md').css({
-      maxHeight: `calc(50vh - ${headerHeight}px)`
+      maxHeight: `calc(50vh - ${$headerHeight}px)`
     }),
-    height: bodyHeight,
-    opacity: isTextVisible ? 1 : 0
+    height: $bodyHeight,
+    opacity: $isTextVisible ? 1 : 0
   };
 });
-const List = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default).withConfig({
+const List = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.OrderedListBase).withConfig({
   displayName: "Footnote__List",
   componentId: "components-web__sc-1563bo5-4"
 })(_ref5 => {
   let {
-    listPaddingLeft
+    $listPaddingLeft
   } = _ref5;
   return {
     listStylePosition: 'outside',
-    paddingLeft: listPaddingLeft
+    paddingLeft: $listPaddingLeft
   };
 });
-const ListItem = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default.Item).withConfig({
+const ListItem = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListItemBase.OrderedListItemBase).withConfig({
   displayName: "Footnote__ListItem",
   componentId: "components-web__sc-1563bo5-5"
 })(_ref6 => {
   let {
-    listItemMarkerFontSize,
-    listItemMarkerLineHeight,
-    listItemColor,
-    listItemFontSize,
-    listItemLineHeight,
-    listItemPaddingLeft
+    $listItemMarkerFontSize,
+    $listItemMarkerLineHeight,
+    $listItemColor,
+    $listItemFontSize,
+    $listItemLineHeight,
+    $listItemPaddingLeft
   } = _ref6;
   return {
     display: 'list-item',
     '&::marker': {
       fontFamily: 'HNforTELUSSA400normal',
-      fontSize: listItemMarkerFontSize,
-      lineHeight: listItemMarkerLineHeight,
+      fontSize: $listItemMarkerFontSize,
+      lineHeight: $listItemMarkerLineHeight,
       textAlign: 'end !important'
     },
-    color: listItemColor,
+    color: $listItemColor,
     fontFamily: 'HNforTELUSSA400normal',
-    fontSize: listItemFontSize,
-    lineHeight: listItemLineHeight,
-    paddingLeft: listItemPaddingLeft
+    fontSize: $listItemFontSize,
+    lineHeight: $listItemLineHeight,
+    paddingLeft: $listItemPaddingLeft
   };
 });
 const CloseButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
@@ -169,11 +169,11 @@ const CloseButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
   componentId: "components-web__sc-1563bo5-6"
 })(_ref7 => {
   let {
-    closeButtonBorder,
-    closeButtonHeight,
-    closeButtonBackgroundColor,
-    closeButtonMargin,
-    closeButtonWidth
+    $closeButtonBorder,
+    $closeButtonHeight,
+    $closeButtonBackgroundColor,
+    $closeButtonMargin,
+    $closeButtonWidth
   } = _ref7;
   return {
     alignItems: 'center',
@@ -181,11 +181,11 @@ const CloseButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
     cursor: 'pointer',
     display: 'flex',
     justifyContent: 'center',
-    backgroundColor: closeButtonBackgroundColor,
-    border: closeButtonBorder,
-    height: closeButtonHeight,
-    margin: closeButtonMargin,
-    width: closeButtonWidth
+    backgroundColor: $closeButtonBackgroundColor,
+    border: $closeButtonBorder,
+    height: $closeButtonHeight,
+    margin: $closeButtonMargin,
+    width: $closeButtonWidth
   };
 });
 const ContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
@@ -199,10 +199,10 @@ const ContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   maxWidth: '1200px'
 }, _ref8 => {
   let {
-    maxWidth
+    $maxWidth
   } = _ref8;
   return {
-    width: maxWidth
+    width: $maxWidth
   };
 });
 const StyledCustomContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
@@ -210,16 +210,16 @@ const StyledCustomContentContainer = /*#__PURE__*/_styledComponents.default.div.
   componentId: "components-web__sc-1563bo5-8"
 })(_ref9 => {
   let {
-    listItemColor,
-    listItemFontSize,
-    listItemLineHeight,
-    listItemPaddingLeft
+    $listItemColor,
+    $listItemFontSize,
+    $listItemLineHeight,
+    $listItemPaddingLeft
   } = _ref9;
   return {
-    fontSize: listItemFontSize,
-    lineHeight: listItemLineHeight,
-    paddingLeft: listItemPaddingLeft,
-    color: listItemColor,
+    fontSize: $listItemFontSize,
+    lineHeight: $listItemLineHeight,
+    paddingLeft: $listItemPaddingLeft,
+    color: $listItemColor,
     fontFamily: 'HNforTELUSSA400normal'
   };
 });
@@ -252,7 +252,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 = exports.Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     copy = 'en',
     number,
@@ -262,7 +262,7 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     tokens,
     variant = {},
     isMobileFullScreen = true,
-    dictionary = _dictionary.default,
+    dictionary = _dictionary.dictionary,
     ...rest
   } = props;
   const viewport = (0, _componentsBase.useViewport)();
@@ -467,10 +467,10 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     }
     if (/*#__PURE__*/_react.default.isValidElement(data.content)) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCustomContentContainer, {
-        listItemColor: listItemColor,
-        listItemFontSize: listItemFontSize,
-        listItemLineHeight: listItemLineHeight,
-        listItemPaddingLeft: listItemPaddingLeft,
+        $listItemColor: listItemColor,
+        $listItemFontSize: listItemFontSize,
+        $listItemLineHeight: listItemLineHeight,
+        $listItemPaddingLeft: listItemPaddingLeft,
         ref: contentRef,
         children: data.content
       });
@@ -478,14 +478,14 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
       start: data.number,
       ref: contentRef,
-      listPaddingLeft: listPaddingLeft,
+      $listPaddingLeft: listPaddingLeft,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
-        listItemMarkerFontSize: listItemMarkerFontSize,
-        listItemMarkerLineHeight: listItemMarkerLineHeight,
-        listItemColor: listItemColor,
-        listItemFontSize: listItemFontSize,
-        listItemLineHeight: listItemLineHeight,
-        listItemPaddingLeft: listItemPaddingLeft,
+        $listItemMarkerFontSize: listItemMarkerFontSize,
+        $listItemMarkerLineHeight: listItemMarkerLineHeight,
+        $listItemColor: listItemColor,
+        $listItemFontSize: listItemFontSize,
+        $listItemLineHeight: listItemLineHeight,
+        $listItemPaddingLeft: listItemPaddingLeft,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           tokens: {
             fontSize: listItemFontSize,
@@ -517,25 +517,25 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       ref: ref,
       children: [isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalBodyScrollLock, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFootnote, {
         ref: footnoteRef,
-        isOpen: isOpen,
-        isVisible: isVisible,
+        $isOpen: isOpen,
+        $isVisible: isVisible,
         onTransitionEnd: handleStyledFootnoteTransitionEnd,
         tabIndex: 0,
-        footnoteBackground: footnoteBackground,
-        footnoteBorderTop: `${footnoteBorderTopSizeMd}px solid ${footnoteBorderColorMd}`,
-        isScrollable: isScrollable,
-        isMobileFullScreen: isMobileFullScreen,
+        $footnoteBackground: footnoteBackground,
+        $footnoteBorderTop: `${footnoteBorderTopSizeMd}px solid ${footnoteBorderColorMd}`,
+        $isScrollable: isScrollable,
+        $isMobileFullScreen: isMobileFullScreen,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentContainer, {
-          maxWidth: maxWidth,
+          $maxWidth: maxWidth,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFootnoteHeader, {
             ref: headerRef,
             viewport: viewport,
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledHeader, {
-              footnoteHeaderPaddingLeft: footnoteHeaderPaddingLeft,
-              footnoteHeaderPaddingRight: footnoteHeaderPaddingRight,
-              footnoteHeaderPaddingTop: footnoteHeaderPaddingTop,
-              footnoteHeaderPaddingBottom: footnoteHeaderPaddingBottom,
-              headerMargin: headerMargin,
+              $footnoteHeaderPaddingLeft: footnoteHeaderPaddingLeft,
+              $footnoteHeaderPaddingRight: footnoteHeaderPaddingRight,
+              $footnoteHeaderPaddingTop: footnoteHeaderPaddingTop,
+              $footnoteHeaderPaddingBottom: footnoteHeaderPaddingBottom,
+              $headerMargin: headerMargin,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
                 tokens: {
                   fontSize: headerFontSize,
@@ -547,11 +547,11 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
                 children: getCopy('heading')
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
                 ref: closeButtonRef,
-                closeButtonBorder: `${closeButtonBorderSize} solid ${closeButtonBorderColor}`,
-                closeButtonWidth: `${closeButtonWidth}px`,
-                closeButtonHeight: `${closeButtonHeight}px`,
-                closeButtonBackgroundColor: closeButtonBackgroundColor,
-                closeButtonMargin: `${closeButtonMarginTop}px ${closeButtonMarginRight}px ${closeButtonMarginBottom}px ${closeButtonMarginLeft}px`,
+                $closeButtonBorder: `${closeButtonBorderSize} solid ${closeButtonBorderColor}`,
+                $closeButtonWidth: `${closeButtonWidth}px`,
+                $closeButtonHeight: `${closeButtonHeight}px`,
+                $closeButtonBackgroundColor: closeButtonBackgroundColor,
+                $closeButtonMargin: `${closeButtonMarginTop}px ${closeButtonMarginRight}px ${closeButtonMarginBottom}px ${closeButtonMarginLeft}px`,
                 onClick: event => {
                   closeFootnote(event, {
                     returnFocus: true
@@ -568,13 +568,13 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFootnoteBody, {
             ref: bodyRef,
-            bodyHeight: bodyHeight,
-            headerHeight: headerHeight,
-            isTextVisible: isTextVisible,
+            $bodyHeight: bodyHeight,
+            $headerHeight: headerHeight,
+            $isTextVisible: isTextVisible,
             onTransitionEnd: handleTransitionEnd,
             maxWidth: theme.contentMaxWidth,
-            footnoteBodyBackground: footnoteBodyBackground,
-            footnoteBodyPadding: `${footnoteBodyPaddingTop}px ${footnoteBodyPaddingRight}px ${footnoteBodyPaddingBottom}px ${footnoteBodyPaddingLeft}px`,
+            $footnoteBodyBackground: footnoteBodyBackground,
+            $footnoteBodyPadding: `${footnoteBodyPaddingTop}px ${footnoteBodyPaddingRight}px ${footnoteBodyPaddingBottom}px ${footnoteBodyPaddingLeft}px`,
             children: getFootnoteBodyContent()
           })]
         })
@@ -633,5 +633,4 @@ Footnote.propTypes = {
    * A boolean flag used to disable isMobileFullScreen of Footnote for mobile view
    */
   isMobileFullScreen: _propTypes.default.bool
-};
-var _default = exports.default = Footnote;
+};

package/lib/cjs/Footnote/FootnoteLink.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.FootnoteLink = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _dictionary = require("./dictionary");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -18,26 +18,31 @@ const StyledSup = /*#__PURE__*/_styledComponents.default.sup.withConfig({
   componentId: "components-web__sc-17nd7xo-0"
 })(_ref => {
   let {
-    fontSize,
-    lineHeight,
-    paddingLeft,
-    paddingRight,
-    ...fontNameAndWeight
+    $fontSize,
+    $lineHeight,
+    $paddingLeft,
+    $paddingRight,
+    $fontName,
+    $fontWeight,
+    $color
   } = _ref;
   return {
     border: 0,
-    color: 'inherit',
+    color: $color ?? 'inherit',
     cursor: 'pointer',
     // we want to fallback on 'smaller' but have a valid size when a custom font size is provided.
-    fontSize: fontSize ? `${fontSize}px` : 'smaller',
-    lineHeight: lineHeight ?? `${fontSize * 2}px`,
+    fontSize: $fontSize ? `${$fontSize}px` : 'smaller',
+    lineHeight: $lineHeight ?? `${$fontSize * 2}px`,
     margin: 0,
     paddingVertical: 0,
-    paddingLeft,
-    paddingRight,
+    paddingLeft: $paddingLeft,
+    paddingRight: $paddingRight,
     textDecoration: 'underline',
     // apply font family
-    ...(0, _componentsBase.applyTextStyles)(fontNameAndWeight)
+    ...(0, _componentsBase.applyTextStyles)({
+      fontName: $fontName,
+      fontWeight: $fontWeight
+    })
   };
 });
 
@@ -50,7 +55,7 @@ const StyledSup = /*#__PURE__*/_styledComponents.default.sup.withConfig({
  * - Avoid using FootnoteLink if there is only one annotation on a page. Consider including
  *   the annotation as part of the content whenever possible.
  */
-const FootnoteLink = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const FootnoteLink = exports.FootnoteLink = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     copy = 'en',
     number = [],
@@ -67,7 +72,7 @@ const FootnoteLink = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     onClick(numbers[index], refs[index]);
   };
   const getCopy = (0, _componentsBase.useCopy)({
-    dictionary: _dictionary.default,
+    dictionary: _dictionary.dictionary,
     copy
   });
   const handleOnClick = (event, index) => {
@@ -90,8 +95,13 @@ const FootnoteLink = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       onClick: event => handleOnClick(event, index),
       tabIndex: 0,
       ...selectProps(rest),
-      ...themeTokens,
-      fontSize: fontSize ?? themeTokens.fontSize,
+      $fontSize: fontSize ?? themeTokens.fontSize,
+      $lineHeight: themeTokens.lineHeight,
+      $paddingLeft: themeTokens.paddingLeft,
+      $paddingRight: themeTokens.paddingRight,
+      $fontName: themeTokens.fontName,
+      $fontWeight: themeTokens.fontWeight,
+      $color: themeTokens.color,
       children: `${num}${index !== numbers.length - 1 ? ',' : ''}`
     }, num))
   });
@@ -121,5 +131,4 @@ FootnoteLink.propTypes = {
    * Override default `fontSize` to set specific font size value
    */
   fontSize: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
-};
-var _default = exports.default = FootnoteLink;
+};

package/lib/cjs/Footnote/dictionary.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
   en: {
     a11yLabel: 'Read legal footnote',
     close: 'close',

package/lib/cjs/IconButton/IconButton.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.IconButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const IconButton = exports.IconButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     icon = null,
     action,
@@ -58,5 +58,4 @@ IconButton.propTypes = {
    * To set a custom icon
    */
   icon: _propTypes.default.func
-};
-var _default = exports.default = IconButton;
+};

package/lib/cjs/Image/Image.js

@@ -1,17 +1,19 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Image = exports.DefaultImage = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _server = require("@telus-uds/components-base/server");
 var _logger = require("../utils/logger");
+var _withClientTheme = require("../utils/theming/with-client-theme");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _server.selectSystemProps)([_server.htmlAttrs]);
-const Image = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const Image = exports.DefaultImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     src,
     width,
@@ -87,4 +89,8 @@ Image.propTypes = {
   tokens: (0, _server.getTokensPropType)('Image')
 };
 Image.displayName = 'Image';
-var _default = exports.default = Image;
+
+// Export unwrapped component for react-docgen to extract info for docsite
+
+// Export wrapped component as main Image export
+const ClientThemedImage = exports.Image = (0, _withClientTheme.withClientTheme)(Image);

package/lib/cjs/Image/server.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _withServerTheme = _interopRequireDefault(require("../utils/theming/with-server-theme"));
-var _Image = _interopRequireDefault(require("./Image"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ServerThemedImage = (0, _withServerTheme.default)(_Image.default, 'Image');
-var _default = exports.default = ServerThemedImage;
+exports.ServerThemedImage = void 0;
+var _withServerTheme = require("../utils/theming/with-server-theme");
+var _Image = require("./Image");
+const ServerThemedImage = exports.ServerThemedImage = (0, _withServerTheme.withServerTheme)(_Image.DefaultImage, 'Image');

package/lib/cjs/List/List.js

@@ -3,6 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _componentsBase = require("@telus-uds/components-base");
-var _default = exports.default = _componentsBase.ListBase;
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.List;
+  }
+});
+var _componentsBase = require("@telus-uds/components-base");

package/lib/cjs/List/ListItem.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ListItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ListItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ListItem = exports.ListItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     title,
@@ -30,5 +30,4 @@ ListItem.displayName = 'ListItem';
 ListItem.propTypes = {
   children: _propTypes.default.node.isRequired,
   title: _propTypes.default.string
-};
-var _default = exports.default = ListItem;
+};