@telus-uds/components-web 2.44.0 → 3.0.1

package/lib/Breadcrumbs/Item/Item.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-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]);
-const StyledItemContainer = /*#__PURE__*/_styledComponents.default.li.withConfig({
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Link, Typography, applyTextStyles, clickProps, selectSystemProps, useThemeTokens } from '@telus-uds/components-base';
+import { htmlAttrs } from '../../utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledItemContainer = /*#__PURE__*/styled.li.withConfig({
   displayName: "Item__StyledItemContainer",
   componentId: "components-web__sc-1rfdaul-0"
 })({
@@ -32,7 +25,7 @@ const StyledItemContainer = /*#__PURE__*/_styledComponents.default.li.withConfig
   },
   marginBottom: '8px'
 });
-const IconContainer = /*#__PURE__*/_styledComponents.default.span.withConfig({
+const IconContainer = /*#__PURE__*/styled.span.withConfig({
   displayName: "Item__IconContainer",
   componentId: "components-web__sc-1rfdaul-1"
 })({
@@ -54,7 +47,7 @@ const IconContainer = /*#__PURE__*/_styledComponents.default.span.withConfig({
       fontName,
       fontWeight
     } = _ref5;
-    return (0, _componentsBase.applyTextStyles)({
+    return applyTextStyles({
       fontName,
       fontWeight
     }).fontFamily;
@@ -74,7 +67,7 @@ const IconContainer = /*#__PURE__*/_styledComponents.default.span.withConfig({
   },
   verticalAlign: 'bottom'
 });
-const Item = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
+const Item = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     href,
     children,
@@ -102,17 +95,17 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     listItemPadding,
     iconContainerSize,
     iconPadding
-  } = (0, _componentsBase.useThemeTokens)('Breadcrumbs', tokens, variant);
+  } = useThemeTokens('Breadcrumbs', tokens, variant);
   const linkOptions = {
-    ..._componentsBase.clickProps.toPressProps(selectProps(rest)),
+    ...clickProps.toPressProps(selectProps(rest)),
     href
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledItemContainer, {
+  return /*#__PURE__*/_jsx(StyledItemContainer, {
     listItemPadding: listItemPadding,
     lineHeight: lineHeight,
     fontSize: fontSize,
     iconContainerSize: iconContainerSize,
-    children: current ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+    children: current ? /*#__PURE__*/_jsx(Typography, {
       tokens: {
         color: currentColor,
         fontSize,
@@ -121,8 +114,8 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
       },
       variant: variant,
       children: children
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, {
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Link, {
         ...linkOptions,
         ref: ref,
         tokens: {
@@ -135,12 +128,12 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
         variant: variant,
         onPress: onPress,
         children: children
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
+      }), /*#__PURE__*/_jsx(IconContainer, {
         iconPadding: iconPadding,
         fontName: fontName,
         fontWeight: fontWeight,
         iconContainerSize: iconContainerSize,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronRightIcon, {
+        children: /*#__PURE__*/_jsx(ChevronRightIcon, {
           size: iconSize,
           color: iconColor
         })
@@ -154,28 +147,27 @@ Item.propTypes = {
   /**
    * Breadcrumb text
    */
-  children: _propTypes.default.node.isRequired,
+  children: PropTypes.node.isRequired,
   /**
    * @ignore
    *
    * Indicates whether or not the Item should be as current/active
    */
-  current: _propTypes.default.bool,
+  current: PropTypes.bool,
   /**
    * Target URL. This will be converted to `to` if the `LinkRouter`
    * prop is provided to the `Item` or parent `Breadcrumbs` element.
    */
-  href: _propTypes.default.string.isRequired,
+  href: PropTypes.string.isRequired,
   /**
    * Variant to render.
    */
-  variant: _propTypes.default.shape({
-    inverse: _propTypes.default.bool
+  variant: PropTypes.shape({
+    inverse: PropTypes.bool
   }),
   /**
    * Function to be called when the Item is clicked.
    */
-  onPress: _propTypes.default.func
+  onPress: PropTypes.func
 };
-var _default = Item;
-exports.default = _default;
+export default Item;

package/lib/Breadcrumbs/index.js

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

package/lib/Callout/Callout.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 _styledComponents = _interopRequireDefault(require("styled-components"));
-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 styled from 'styled-components';
+import { Icon, selectSystemProps, Typography, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const getAlignment = (rounded, textAlignToFlex) => {
   if (textAlignToFlex) {
     switch (textAlignToFlex) {
@@ -37,7 +30,7 @@ const verticalAlignToFlex = verticalAlign => {
       return 'top';
   }
 };
-const CalloutContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const CalloutContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Callout__CalloutContainer",
   componentId: "components-web__sc-1a7ptx-0"
 })(_ref => {
@@ -60,7 +53,7 @@ const CalloutContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
     alignItems: verticalAlignToFlex(verticalAlign)
   };
 });
-const Callout = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Callout = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     icon,
     children,
@@ -79,12 +72,12 @@ const Callout = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     paddingTop,
     paddingBottom,
     color
-  } = (0, _componentsBase.useThemeTokens)('Callout', tokens, variant);
+  } = useThemeTokens('Callout', tokens, variant);
   const {
     rounded = false,
     size = 'medium'
   } = variant;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CalloutContainer, {
+  return /*#__PURE__*/_jsxs(CalloutContainer, {
     size: size,
     rounded: rounded,
     "data-testid": "callout-container",
@@ -96,7 +89,7 @@ const Callout = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
     ref: ref,
     ...selectProps(rest),
-    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+    children: [icon && /*#__PURE__*/_jsx(Icon, {
       tokens: {
         color
       },
@@ -105,7 +98,7 @@ const Callout = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         rank: 'primary',
         size
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+    }), /*#__PURE__*/_jsx(Typography, {
       variant: {
         size,
         compact: size === 'small'
@@ -120,23 +113,22 @@ const Callout = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 Callout.displayName = 'Callout';
 Callout.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _componentsBase.getTokensPropType)('Callout'),
+  tokens: getTokensPropType('Callout'),
   /**
    * Icon to display on the left side of the Callout
    */
-  icon: _propTypes.default.elementType,
+  icon: PropTypes.elementType,
   /**
    * Children nodes that can be added
    */
-  children: _propTypes.default.node.isRequired,
+  children: PropTypes.node.isRequired,
   /**
    * To change the horizontal alignment of the Callout's text
    */
-  textAlignToFlex: _propTypes.default.oneOf(['center', 'left']),
+  textAlignToFlex: PropTypes.oneOf(['center', 'left']),
   /**
    * To change the vertical alignment of the Callout's icon
    */
-  verticalAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom'])
+  verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom'])
 };
-var _default = Callout;
-exports.default = _default;
+export default Callout;

package/lib/Callout/index.js

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

package/lib/Card/Card.js

@@ -1,24 +1,15 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Card as CardBase, getTokensPropType, paddingProp, responsiveProps, selectSystemProps, StackView, useThemeTokens, useThemeTokensCallback, variantProp, a11yProps, viewProps, PressableCardBase, useResponsiveProp } from '@telus-uds/components-base';
+import styled from 'styled-components';
+import CardContent from './CardContent';
+import CardFooter from './CardFooter';
+import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
+import ConditionalWrapper from '../shared/ConditionalWrapper';
 
-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 _componentsWeb = require("@telus-uds/components-web");
-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 _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 }; }
 // Passes React Native-oriented system props through UDS Card
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
  * A basic card component, unstyled by default.
@@ -49,7 +40,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemP
  * ## Accessibility
  * `Card` component accepts all the standard accessibility props.
  */
-const DynamicWidthContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const DynamicWidthContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Card__DynamicWidthContainer",
   componentId: "components-web__sc-1elbtwd-0"
 })(_ref => {
@@ -66,7 +57,7 @@ const DynamicWidthContainer = /*#__PURE__*/_styledComponents.default.div.withCon
     overflow
   };
 });
-const Card = /*#__PURE__*/_react.default.forwardRef(function () {
+const Card = /*#__PURE__*/React.forwardRef(function () {
   let {
     children,
     footer,
@@ -91,7 +82,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     contentStackDirection,
     fullBleedContentPosition,
     fullBleedContentProps
-  } = (0, _FullBleedContent.useFullBleedContentProps)(fullBleedContent);
+  } = useFullBleedContentProps(fullBleedContent);
   const {
     imgCol
   } = fullBleedContentProps;
@@ -100,18 +91,18 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
   // those corners on the image as well, but partially
   const {
     borderRadius
-  } = (0, _componentsBase.useThemeTokens)('Card', tokens, variant);
-  const getThemeTokens = (0, _componentsBase.useThemeTokensCallback)('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
+  } = useThemeTokens('Card', tokens, variant);
+  const getThemeTokens = useThemeTokensCallback('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
     interactive: true,
     ...((interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.variant) || {})
   });
   const hasFooter = Boolean(footer);
-  const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(borderRadius, fullBleedContentPosition, hasFooter);
+  const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius, fullBleedContentPosition, hasFooter);
 
   // takes imgCol from fullBleedContent if present, to dynamically set width of image
   // card content will adapt to the size of image to add up to 100% width of card width
   // pass as props to ConditionalWrapper
-  const imgColCurrentViewport = (0, _componentsWeb.useResponsiveProp)(imgCol);
+  const imgColCurrentViewport = useResponsiveProp(imgCol);
   const maxCol = 12;
   const fullBleedImageWidth = `${imgColCurrentViewport / maxCol * 100}%`;
   const adaptiveContentWidth = `${(maxCol - imgColCurrentViewport) / maxCol * 100}%`;
@@ -140,7 +131,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     paddingRight,
     ...restOfTokens
   } = tokens;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Card, {
+  return /*#__PURE__*/_jsxs(CardBase, {
     ref: ref,
     variant: {
       ...variant,
@@ -149,41 +140,41 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     tokens: restOfTokens,
     backgroundImage: backgroundImage,
     ...selectProps(rest),
-    children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+    children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsx(PressableCardBase, {
       ref: ref,
       tokens: getThemeTokens,
       dataSet: dataSet,
       onPress: onPress,
       ...selectProps(rest),
       children: typeof (interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body) === 'function' ? interactiveCard.body() : interactiveCard.body
-    }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/_jsxs(StackView, {
       direction: contentStackDirection,
       tokens: {
         ...columnFlex,
         alignItems: contentStackAlign
       },
       space: 0,
-      children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+      children: [children ? /*#__PURE__*/_jsx(ConditionalWrapper, {
         WrapperComponent: DynamicWidthContainer,
         wrapperProps: contentWrapperStyleProps,
         condition: isImageWidthAdjustable,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+        children: /*#__PURE__*/_jsx(CardContent, {
           tokens: tokens,
           variant: variant,
           withFooter: hasFooter,
           children: children
         })
-      }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+      }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/_jsx(ConditionalWrapper, {
         WrapperComponent: DynamicWidthContainer,
         wrapperProps: imageWrapperStyleProps,
         condition: isImageWidthAdjustable,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+        children: /*#__PURE__*/_jsx(FullBleedContent, {
           borderRadius: fullBleedBorderRadius,
           ...fullBleedContentProps,
           position: fullBleedContentPosition
         })
       })]
-    }) : null, footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardFooter.default, {
+    }) : null, footer && /*#__PURE__*/_jsx(CardFooter, {
       padding: footerPadding,
       tokens: tokens,
       variant: variant,
@@ -193,11 +184,11 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
 });
 const positionValues = ['none', 'bottom', 'left', 'right', 'top'];
 const alignValues = ['start', 'end', 'center', 'stretch'];
-const PositionedFullBleedContentPropType = _propTypes.default.shape({
-  position: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(positionValues)).isRequired,
-  align: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(alignValues)),
+const PositionedFullBleedContentPropType = PropTypes.shape({
+  position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(positionValues)).isRequired,
+  align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(alignValues)),
   // eslint-disable-next-line react/forbid-foreign-prop-types
-  ..._FullBleedContent.default.propTypes
+  ...FullBleedContent.propTypes
 });
 Card.displayName = 'Card';
 Card.propTypes = {
@@ -205,15 +196,15 @@ Card.propTypes = {
   /**
    * Card content.
    */
-  children: _propTypes.default.node,
+  children: PropTypes.node,
   /**
    * Card footer.
    */
-  footer: _propTypes.default.node,
+  footer: PropTypes.node,
   /**
    * Custom card footer padding.
    */
-  footerPadding: _componentsBase.paddingProp.propType,
+  footerPadding: paddingProp.propType,
   /**
    * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
    *
@@ -227,33 +218,32 @@ Card.propTypes = {
   /**
    * Card tokens.
    */
-  tokens: (0, _componentsBase.getTokensPropType)('Card'),
+  tokens: getTokensPropType('Card'),
   /**
    * Card variant.
    */
-  variant: _componentsBase.variantProp.propType,
+  variant: variantProp.propType,
   /**
    * Function to call on pressing the card.
    * Note: This is only available when `interactive` variant is used.
    */
-  onPress: _propTypes.default.func,
+  onPress: PropTypes.func,
   /**
    * Object to set interactive card's properties
    */
-  interactiveCard: _propTypes.default.shape({
-    body: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-    tokens: (0, _componentsBase.getTokensPropType)('Card'),
-    variant: _componentsBase.variantProp.propType
+  interactiveCard: PropTypes.shape({
+    body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    tokens: getTokensPropType('Card'),
+    variant: variantProp.propType
   }),
   /**
    * Apply background image to the card.
    */
-  backgroundImage: _propTypes.default.shape({
+  backgroundImage: PropTypes.shape({
     // src is either a URI string or an object when used responsively to provide different image sources for different screen sizes
-    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]).isRequired,
-    alt: _propTypes.default.string,
-    resizeMode: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+    alt: PropTypes.string,
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
   })
 };
-var _default = Card;
-exports.default = _default;
+export default Card;

package/lib/Card/CardContent.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _componentsBase = require("@telus-uds/components-base");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-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]);
-const CardContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getTokensPropType, selectSystemProps, useThemeTokens, useViewport, variantProp } from '@telus-uds/components-base';
+import styled from 'styled-components';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const CardContentContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "CardContent__CardContentContainer",
   componentId: "components-web__sc-1k2501q-0"
 })(_ref => {
@@ -52,7 +45,7 @@ const CardContentContainer = /*#__PURE__*/_styledComponents.default.div.withConf
 /**
  * Card content, applying the card tokens as per the theme used.
  */
-const CardContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const CardContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     flexContent,
@@ -61,11 +54,11 @@ const CardContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     withFooter = false,
     ...rest
   } = _ref2;
-  const viewport = (0, _componentsBase.useViewport)();
-  const themeTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, variant, {
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Card', tokens, variant, {
     viewport
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardContentContainer, {
+  return /*#__PURE__*/_jsx(CardContentContainer, {
     ...themeTokens,
     flexContent: flexContent,
     withFooter: withFooter,
@@ -80,19 +73,18 @@ CardContent.propTypes = {
   /**
    * Card section content.
    */
-  children: _propTypes.default.node,
+  children: PropTypes.node,
   /**
    * Card tokens.
    */
-  tokens: (0, _componentsBase.getTokensPropType)('Card'),
+  tokens: getTokensPropType('Card'),
   /**
    * Card variant.
    */
-  variant: _componentsBase.variantProp.propType,
+  variant: variantProp.propType,
   /**
    * Whether the card has a footer.
    */
-  withFooter: _propTypes.default.bool
+  withFooter: PropTypes.bool
 };
-var _default = CardContent;
-exports.default = _default;
+export default CardContent;

package/lib/Card/CardFooter.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _componentsBase = require("@telus-uds/components-base");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-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]);
-const CardFooterContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getTokensPropType, paddingProp, selectSystemProps, useThemeTokens, useViewport, variantProp } from '@telus-uds/components-base';
+import styled from 'styled-components';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const CardFooterContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "CardFooter__CardFooterContainer",
   componentId: "components-web__sc-pm6vns-0"
 })(_ref => {
@@ -49,14 +42,14 @@ const CardFooter = _ref2 => {
     variant,
     ...rest
   } = _ref2;
-  const viewport = (0, _componentsBase.useViewport)();
-  const themeTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, {
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Card', tokens, {
     ...variant,
     background: 'alternative'
   }, {
     viewport
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardFooterContainer, {
+  return /*#__PURE__*/_jsx(CardFooterContainer, {
     ...themeTokens,
     ...padding,
     ...selectProps(rest),
@@ -68,19 +61,18 @@ CardFooter.propTypes = {
   /**
    * Card footer content.
    */
-  children: _propTypes.default.node,
+  children: PropTypes.node,
   /**
    * Card footer padding.
    */
-  padding: _componentsBase.paddingProp.propType,
+  padding: paddingProp.propType,
   /**
    * Card tokens.
    */
-  tokens: (0, _componentsBase.getTokensPropType)('Card'),
+  tokens: getTokensPropType('Card'),
   /**
    * Card variant.
    */
-  variant: _componentsBase.variantProp.propType
+  variant: variantProp.propType
 };
-var _default = CardFooter;
-exports.default = _default;
+export default CardFooter;

package/lib/Card/index.js

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