@telus-uds/components-web 4.19.2 → 5.0.0-alpha.1

package/lib/cjs/Card/Card.js

@@ -3,17 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Card = 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 _CardContent = _interopRequireDefault(require("./CardContent"));
-var _CardFooter = _interopRequireDefault(require("./CardFooter"));
-var _FullBleedContent = _interopRequireWildcard(require("../shared/FullBleedContent"));
-var _ConditionalWrapper = _interopRequireDefault(require("../shared/ConditionalWrapper"));
+var _CardContent = require("./CardContent");
+var _CardFooter = require("./CardFooter");
+var _FullBleedContent = require("../shared/FullBleedContent");
+var _ConditionalWrapper = require("../shared/ConditionalWrapper/ConditionalWrapper");
 var _jsxRuntime = require("react/jsx-runtime");
-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 }; }
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
@@ -82,7 +81,7 @@ const getCardContentTokens = function (baseTokens) {
  * ### With Footer
  *
  * Pass any component or simply a string in the `footer` prop in order to render
- * a card with a footer (which uses the `alternative` background).
+ * a card with a footer (which uses the `feature2` style).
  *
  * ### With Full Bleed Content
  *
@@ -104,31 +103,30 @@ const getCardContentTokens = function (baseTokens) {
  * `Card` component accepts all the standard accessibility props.
  */
 const DynamicWidthContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
-  shouldForwardProp: prop => !['marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'height', 'alignSelf'].includes(prop),
   displayName: "Card__DynamicWidthContainer",
   componentId: "components-web__sc-1elbtwd-0"
 })(_ref => {
   let {
-    width,
-    display,
-    borderRadius,
-    overflow,
-    marginTop,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    alignSelf
+    $width,
+    $display,
+    $borderRadius,
+    $overflow,
+    $marginTop,
+    $marginBottom,
+    $marginLeft,
+    $marginRight,
+    $alignSelf
   } = _ref;
   return {
-    width,
-    display,
-    borderRadius,
-    overflow,
-    marginTop,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    alignSelf
+    width: $width,
+    display: $display,
+    borderRadius: $borderRadius,
+    overflow: $overflow,
+    marginTop: $marginTop,
+    marginBottom: $marginBottom,
+    marginLeft: $marginLeft,
+    marginRight: $marginRight,
+    alignSelf: $alignSelf
   };
 });
 const InteractiveCardWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
@@ -145,8 +143,8 @@ const InteractiveOverlay = /*#__PURE__*/_styledComponents.default.div.withConfig
   componentId: "components-web__sc-1elbtwd-2"
 })(_ref2 => {
   let {
-    overlayOpacity,
-    borderRadius
+    $overlayOpacity,
+    $borderRadius
   } = _ref2;
   return {
     position: 'absolute',
@@ -154,8 +152,8 @@ const InteractiveOverlay = /*#__PURE__*/_styledComponents.default.div.withConfig
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: `rgba(0, 0, 0, ${overlayOpacity || 0})`,
-    borderRadius,
+    backgroundColor: `rgba(0, 0, 0, ${$overlayOpacity || 0})`,
+    borderRadius: $borderRadius,
     pointerEvents: 'none',
     transition: 'background-color 0.2s ease',
     zIndex: 1
@@ -166,9 +164,9 @@ const FocusBorder = /*#__PURE__*/_styledComponents.default.div.withConfig({
   componentId: "components-web__sc-1elbtwd-3"
 })(_ref3 => {
   let {
-    borderWidth,
-    borderColor,
-    borderRadius
+    $borderWidth,
+    $borderColor,
+    $borderRadius
   } = _ref3;
   return {
     position: 'absolute',
@@ -176,9 +174,9 @@ const FocusBorder = /*#__PURE__*/_styledComponents.default.div.withConfig({
     left: 0,
     right: 0,
     bottom: 0,
-    borderWidth,
-    borderColor,
-    borderRadius,
+    borderWidth: $borderWidth,
+    borderColor: $borderColor,
+    borderRadius: $borderRadius,
     borderStyle: 'solid',
     pointerEvents: 'none',
     zIndex: 2
@@ -189,16 +187,16 @@ const FullBleedPaddingWrapper = /*#__PURE__*/_styledComponents.default.div.withC
   componentId: "components-web__sc-1elbtwd-4"
 })(_ref4 => {
   let {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight
+    $paddingTop,
+    $paddingBottom,
+    $paddingLeft,
+    $paddingRight
   } = _ref4;
   return {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
+    paddingTop: $paddingTop,
+    paddingBottom: $paddingBottom,
+    paddingLeft: $paddingLeft,
+    paddingRight: $paddingRight,
     display: 'flex',
     flexDirection: 'column'
   };
@@ -224,13 +222,13 @@ const calculateFullBleedPadding = (themeTokens, fullBleedPadding, paddingSides)
     return customTokens?.[tokenKey] ?? themeTokens[tokenKey] - borderWidth ?? 0;
   };
   return {
-    paddingTop: applyPadding('Top'),
-    paddingBottom: applyPadding('Bottom'),
-    paddingLeft: applyPadding('Left'),
-    paddingRight: applyPadding('Right')
+    $paddingTop: applyPadding('Top'),
+    $paddingBottom: applyPadding('Bottom'),
+    $paddingLeft: applyPadding('Left'),
+    $paddingRight: applyPadding('Right')
   };
 };
-const Card = /*#__PURE__*/_react.default.forwardRef(function () {
+const Card = exports.Card = /*#__PURE__*/_react.default.forwardRef(function () {
   let {
     children,
     footer,
@@ -389,13 +387,13 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
   const isImageWidthAdjustable = hasValidImgCol && (fullBleedContentPosition === POSITION.LEFT || fullBleedContentPosition === POSITION.RIGHT);
   const contentWrapperStyleProps = {
     ...(hasValidImgCol && {
-      width: adaptiveContentWidth
+      $width: adaptiveContentWidth
     }),
     ...(hasValidImgCol && imgColCurrentViewport >= maxCol && {
-      display: 'none'
+      $display: 'none'
     }),
     ...(fullBleedContentChildrenAlign && {
-      alignSelf: fullBleedContentChildrenAlign
+      $alignSelf: fullBleedContentChildrenAlign
     })
   };
   const columnFlex = {
@@ -419,14 +417,14 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
   const isVerticalFullBleed = fullBleedContentPosition === POSITION.TOP || fullBleedContentPosition === POSITION.BOTTOM;
   const imageWrapperStyleProps = {
     ...(isImageWidthAdjustable && {
-      width: fullBleedImageWidth
+      $width: fullBleedImageWidth
     }),
     ...(isImageWidthAdjustable && imgColCurrentViewport >= maxCol && {
-      borderRadius,
-      overflow: 'hidden'
+      $borderRadius: borderRadius,
+      $overflow: 'hidden'
     }),
     ...(isImageWidthAdjustable && imgColCurrentViewport === 0 && {
-      display: 'none'
+      $display: 'none'
     })
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Card, {
@@ -440,7 +438,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
       id: rest.id
     }),
     ...selectProps(restProps),
-    children: [interactiveCard?.selectionType && children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+    children: [interactiveCard?.selectionType && children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.CardContent, {
       tokens: getCardContentTokens(tokens, {
         backgroundImage
       }),
@@ -460,7 +458,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
         children: cardState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
           children: typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body
         })
-      }), children && fullBleedContentPosition === POSITION.NONE && !fullBleedInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+      }), children && fullBleedContentPosition === POSITION.NONE && !fullBleedInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.CardContent, {
         tokens: getCardContentTokens(tokens, {
           backgroundImage
         }),
@@ -491,11 +489,11 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
             direction: contentStackDirection,
             tokens: getStackViewTokens(columnFlex, contentStackAlign),
             space: 0,
-            children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+            children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.ConditionalWrapper, {
               WrapperComponent: DynamicWidthContainer,
               wrapperProps: contentWrapperStyleProps,
               condition: isImageWidthAdjustable,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.CardContent, {
                 tokens: getCardContentTokens(tokensWithoutBg, {
                   backgroundImage,
                   fullBleedContentChildrenAlign,
@@ -506,15 +504,15 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
                 backgroundImage: backgroundImage,
                 children: children
               })
-            }) : null, fullBleedContentPosition !== POSITION.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+            }) : null, fullBleedContentPosition !== POSITION.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.ConditionalWrapper, {
               WrapperComponent: DynamicWidthContainer,
               wrapperProps: imageWrapperStyleProps,
               condition: isImageWidthAdjustable || isHorizontalFullBleed || isVerticalFullBleed,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.ConditionalWrapper, {
                 WrapperComponent: FullBleedPaddingWrapper,
                 wrapperProps: fullBleedPaddingValues,
                 condition: hasFullBleedPadding,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.FullBleedContent, {
                   borderRadius: fullBleedBorderRadius,
                   ...fullBleedContentPropsClean,
                   position: fullBleedContentPosition,
@@ -523,16 +521,16 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
               })
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InteractiveOverlay, {
-            overlayOpacity: overlayOpacity,
-            borderRadius: borderRadius
+            $overlayOpacity: overlayOpacity,
+            $borderRadius: borderRadius
           }), showFocusBorder && /*#__PURE__*/(0, _jsxRuntime.jsx)(FocusBorder, {
-            borderWidth: `${focusTokens.borderWidth}px`,
-            borderColor: focusTokens.borderColor,
-            borderRadius: borderRadius
+            $borderWidth: `${focusTokens.borderWidth}px`,
+            $borderColor: focusTokens.borderColor,
+            $borderRadius: borderRadius
           })]
         });
       }
-    }) : null, !fullBleedInteractive && !interactiveCard?.body && fullBleedContentPosition === POSITION.NONE && children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+    }) : null, !fullBleedInteractive && !interactiveCard?.body && fullBleedContentPosition === POSITION.NONE && children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.CardContent, {
       tokens: getCardContentTokens(tokens, {
         backgroundImage,
         fullBleedContentChildrenAlign
@@ -545,11 +543,11 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
       direction: contentStackDirection,
       tokens: getStackViewTokens(columnFlex, contentStackAlign),
       space: 0,
-      children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+      children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.ConditionalWrapper, {
         WrapperComponent: DynamicWidthContainer,
         wrapperProps: contentWrapperStyleProps,
         condition: isImageWidthAdjustable,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.CardContent, {
           tokens: getCardContentTokens(tokens, {
             backgroundImage,
             fullBleedContentChildrenAlign
@@ -559,15 +557,15 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
           backgroundImage: backgroundImage,
           children: children
         })
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.ConditionalWrapper, {
         WrapperComponent: DynamicWidthContainer,
         wrapperProps: imageWrapperStyleProps,
         condition: isImageWidthAdjustable || isHorizontalFullBleed || isVerticalFullBleed,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.ConditionalWrapper, {
           WrapperComponent: FullBleedPaddingWrapper,
           wrapperProps: fullBleedPaddingValues,
           condition: hasFullBleedPadding,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.FullBleedContent, {
             borderRadius: fullBleedBorderRadius,
             ...fullBleedContentPropsClean,
             position: fullBleedContentPosition,
@@ -575,7 +573,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
           })
         })
       })]
-    }) : null, footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardFooter.default, {
+    }) : null, footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardFooter.CardFooter, {
       padding: footerPadding,
       tokens: tokens,
       variant: variant,
@@ -610,7 +608,7 @@ const PositionedFullBleedContentPropType = _propTypes.default.shape({
    */
   hrefAttrs: _propTypes.default.shape(_componentsBase.hrefAttrsProp.types),
   // eslint-disable-next-line react/forbid-foreign-prop-types
-  ..._FullBleedContent.default.propTypes
+  ..._FullBleedContent.FullBleedContent.propTypes
 });
 Card.displayName = 'Card';
 Card.propTypes = {
@@ -686,5 +684,4 @@ Card.propTypes = {
    * Data set for the card.
    */
   dataSet: _propTypes.default.object
-};
-var _default = exports.default = Card;
+};

package/lib/cjs/Card/CardContent.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CardContent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -17,46 +17,46 @@ const CardContentContainer = /*#__PURE__*/_styledComponents.default.div.withConf
   componentId: "components-web__sc-1k2501q-0"
 })(_ref => {
   let {
-    borderRadius,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    withFooter,
-    contentAlignItems: alignItems,
-    contentFlexGrow: flexGrow,
-    contentFlexShrink: flexShrink,
-    contentJustifyContent: justifyContent,
-    borderWidth,
-    alignSelf,
-    backgroundColor
+    $borderRadius,
+    $paddingBottom,
+    $paddingLeft,
+    $paddingRight,
+    $paddingTop,
+    $withFooter,
+    $contentAlignItems: alignItems,
+    $contentFlexGrow: flexGrow,
+    $contentFlexShrink: flexShrink,
+    $contentJustifyContent: justifyContent,
+    $borderWidth,
+    $alignSelf,
+    $backgroundColor
   } = _ref;
   return {
     // We need to make sure to have sharp corners on the bottom
     // if the card has a footer
-    borderBottomLeftRadius: withFooter ? 0 : borderRadius,
-    borderBottomRightRadius: withFooter ? 0 : borderRadius,
-    borderTopLeftRadius: borderRadius,
-    borderTopRightRadius: borderRadius,
-    paddingBottom: paddingBottom - borderWidth,
-    paddingLeft: paddingLeft - borderWidth,
-    paddingRight: paddingRight - borderWidth,
-    paddingTop: paddingTop - borderWidth,
+    borderBottomLeftRadius: $withFooter ? 0 : $borderRadius,
+    borderBottomRightRadius: $withFooter ? 0 : $borderRadius,
+    borderTopLeftRadius: $borderRadius,
+    borderTopRightRadius: $borderRadius,
+    paddingBottom: $paddingBottom - $borderWidth,
+    paddingLeft: $paddingLeft - $borderWidth,
+    paddingRight: $paddingRight - $borderWidth,
+    paddingTop: $paddingTop - $borderWidth,
     display: 'flex',
     flexDirection: 'column',
     alignItems,
     flexGrow,
     flexShrink,
     justifyContent,
-    alignSelf,
-    backgroundColor
+    alignSelf: $alignSelf,
+    backgroundColor: $backgroundColor
   };
 });
 
 /**
  * Card content, applying the card tokens as per the theme used.
  */
-const CardContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const CardContent = exports.CardContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     flexContent,
@@ -145,10 +145,35 @@ const CardContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   } else {
     themeTokens = allTokens.current;
   }
+  const {
+    borderRadius,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    contentAlignItems,
+    contentFlexGrow,
+    contentFlexShrink,
+    contentJustifyContent,
+    borderWidth,
+    alignSelf,
+    backgroundColor
+  } = themeTokens;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardContentContainer, {
-    ...themeTokens,
+    $borderRadius: borderRadius,
+    $paddingBottom: paddingBottom,
+    $paddingLeft: paddingLeft,
+    $paddingRight: paddingRight,
+    $paddingTop: paddingTop,
+    $contentAlignItems: contentAlignItems,
+    $contentFlexGrow: contentFlexGrow,
+    $contentFlexShrink: contentFlexShrink,
+    $contentJustifyContent: contentJustifyContent,
+    $borderWidth: borderWidth,
+    $alignSelf: alignSelf,
+    $backgroundColor: backgroundColor,
     flexContent: flexContent,
-    withFooter: withFooter,
+    $withFooter: withFooter,
     ref: ref,
     "data-media": mediaIds,
     ...selectProps(rest),
@@ -182,5 +207,4 @@ CardContent.propTypes = {
    * When present, makes the CardContent background transparent.
    */
   backgroundImage: _propTypes.default.object
-};
-var _default = exports.default = CardContent;
+};

package/lib/cjs/Card/CardFooter.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CardFooter = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -17,24 +17,24 @@ const CardFooterContainer = /*#__PURE__*/_styledComponents.default.div.withConfi
   componentId: "components-web__sc-pm6vns-0"
 })(_ref => {
   let {
-    backgroundColor,
-    borderRadius,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop
+    $backgroundColor,
+    $borderRadius,
+    $paddingBottom,
+    $paddingLeft,
+    $paddingRight,
+    $paddingTop
   } = _ref;
   return {
-    backgroundColor,
-    borderBottomLeftRadius: borderRadius,
-    borderBottomRightRadius: borderRadius,
+    backgroundColor: $backgroundColor,
+    borderBottomLeftRadius: $borderRadius,
+    borderBottomRightRadius: $borderRadius,
     // @todo circle back to the following non-standard value to
     // see if it can be integrated into the palette
     boxShadow: 'inset 0px 1px 3px rgba(0, 0, 0, 0.05)',
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop
+    paddingBottom: $paddingBottom,
+    paddingLeft: $paddingLeft,
+    paddingRight: $paddingRight,
+    paddingTop: $paddingTop
   };
 });
 
@@ -52,17 +52,28 @@ const CardFooter = _ref2 => {
   const viewport = (0, _componentsBase.useViewport)();
   const themeTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, {
     ...variant,
-    background: 'alternative'
+    style: 'feature2'
   }, {
     viewport
   });
+  const {
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  } = padding || themeTokens;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardFooterContainer, {
-    ...themeTokens,
-    ...padding,
+    $paddingBottom: paddingBottom,
+    $paddingLeft: paddingLeft,
+    $paddingRight: paddingRight,
+    $paddingTop: paddingTop,
+    $borderRadius: themeTokens.borderRadius,
+    $backgroundColor: themeTokens.backgroundColor,
     ...selectProps(rest),
     children: children
   });
 };
+exports.CardFooter = CardFooter;
 CardFooter.propTypes = {
   ...selectedSystemPropTypes,
   /**
@@ -81,5 +92,4 @@ CardFooter.propTypes = {
    * Card variant.
    */
   variant: _componentsBase.variantProp.propType
-};
-var _default = exports.default = CardFooter;
+};

package/lib/cjs/Countdown/Countdown.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Countdown = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _systemConstants = require("@telus-uds/system-constants");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _utils = require("../utils");
-var _Segment = _interopRequireDefault(require("./Segment"));
-var _useCountdown = _interopRequireDefault(require("./useCountdown"));
+var _Segment = require("./Segment");
+var _useCountdown = require("./useCountdown");
 var _types = require("./types");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -80,7 +80,7 @@ const getMainTextTokens = _ref2 => {
     fontName: textTimerFontName
   };
 };
-const Countdown = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const Countdown = exports.Countdown = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     copy = 'en',
     targetTime,
@@ -89,7 +89,7 @@ const Countdown = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     units = [DAYS, HOURS, MINUTES, SECONDS],
     ...rest
   } = _ref3;
-  const [days, hours, minutes, seconds] = (0, _useCountdown.default)(targetTime);
+  const [days, hours, minutes, seconds] = (0, _useCountdown.useCountdown)(targetTime);
   const viewport = (0, _componentsBase.useViewport)();
   const {
     feature,
@@ -230,7 +230,7 @@ const Countdown = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               return null;
           }
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Segment.default, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Segment.Segment, {
               labelKey: labelKey,
               number: number,
               ...(unit === DAYS && {
@@ -265,5 +265,4 @@ Countdown.propTypes = {
    * Possible values: `'days'`, `'hours'`, `'minutes'`, `'seconds'`
    */
   units: _propTypes.default.arrayOf(_propTypes.default.oneOf([DAYS, HOURS, MINUTES, SECONDS]))
-};
-var _default = exports.default = Countdown;
+};

package/lib/cjs/Countdown/Segment.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Segment = 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 _types = require("./types");
 var _constants = require("./constants");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,8 +25,8 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
   componentId: "components-web__sc-yrh35y-0"
 })(_ref => {
   let {
-    segmentFontSize,
-    segmentWidth = 2,
+    $segmentFontSize,
+    $segmentWidth = 2,
     variant: {
       feature
     }
@@ -36,7 +36,7 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
     display: 'inline-flex',
     ...(feature && {
       // This is required because when the numbers for Countdown change, the character widths will change and thereby effecting the container demensions.
-      width: `${segmentFontSize * _constants.SEGMENT_WIDTH_TO_FONT_SIZE_RATIO * segmentWidth}px`,
+      width: `${$segmentFontSize * _constants.SEGMENT_WIDTH_TO_FONT_SIZE_RATIO * $segmentWidth}px`,
       display: 'flex'
     })
   };
@@ -44,7 +44,7 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
 // A segment of the countdown string: we need to make sure it
 // keeps its width constant to prevent the whole component from
 // being automatically resized while using variable size fonts
-const Segment = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Segment = exports.Segment = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     copy = 'en',
     segmentFontSize,
@@ -58,7 +58,7 @@ const Segment = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     variant = {}
   } = _ref2;
   const getCopy = (0, _componentsBase.useCopy)({
-    dictionary: _dictionary.default,
+    dictionary: _dictionary.dictionary,
     copy
   });
   const {
@@ -67,8 +67,8 @@ const Segment = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     feature
   } = variant;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
-    segmentFontSize: segmentFontSize,
-    segmentWidth: segmentWidth,
+    $segmentFontSize: segmentFontSize,
+    $segmentWidth: segmentWidth,
     variant: variant,
     ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
@@ -107,5 +107,4 @@ Segment.propTypes = {
   labelMediaIds: _propTypes.default.string,
   mainTextMediaIds: _propTypes.default.string,
   variant: _types.countdownVariantPropType
-};
-var _default = exports.default = Segment;
+};