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

package/.eslintrc.cjs

@@ -6,6 +6,18 @@ base.rules['import/no-extraneous-dependencies'] = [
   { packageDir: [__dirname, path.join(__dirname, '../..')] }
 ]
 
+base.overrides = [
+  ...(base.overrides || []),
+  {
+    files: ['src/**/*.{js,jsx,ts,tsx}'],
+    excludedFiles: ['**/stories/**/*'],
+    rules: {
+      'import/no-default-export': 'error',
+      'import/prefer-default-export': 'off'
+    }
+  }
+]
+
 base.settings = {
   ...base.settings,
   'import/resolver': {

package/CHANGELOG.md

@@ -1,9 +1,24 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Fri, 13 Mar 2026 20:33:41 GMT and should not be manually modified.
+This log was last generated on Fri, 20 Mar 2026 02:26:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 5.0.0-alpha.0
+
+Fri, 20 Mar 2026 02:26:39 GMT
+
+### Major changes
+
+- Upgrade to React 19 and other major changes, please refer to the changelog for more details (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/components-base to v4.0.0-alpha.0
+- Bump @telus-uds/system-constants to v4.0.0-alpha.0
+- Bump @telus-uds/system-theme-tokens to v5.0.0-alpha.0
+
+### Patches
+
+- `Card`: padding affected when interactive prop change fixed (josue.higueroscalderon@telus.com)
+
 ## 4.19.1
 
 Fri, 13 Mar 2026 20:33:41 GMT

package/lib/cjs/Badge/Badge.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Badge = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -17,35 +17,35 @@ const BadgeContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   componentId: "components-web__sc-tsiuo2-0"
 })(["background:", ";border:", ";display:inline-flex;justify-content:center;align-items:center;height:fit-content;padding:", ";border-radius:", ";width:fit-content;", ""], _ref => {
   let {
-    background
+    $background
   } = _ref;
-  return background;
+  return $background;
 }, _ref2 => {
   let {
-    border
+    $border
   } = _ref2;
-  return border;
+  return $border;
 }, _ref3 => {
   let {
-    padding
+    $padding
   } = _ref3;
-  return padding;
+  return $padding;
 }, _ref4 => {
   let {
-    radius
+    $radius
   } = _ref4;
-  return radius;
+  return $radius;
 }, _ref5 => {
   let {
-    isOutlineOffer,
-    isAlternative,
-    gradient
+    $isOutlineOffer,
+    $isAlternative,
+    $gradient
   } = _ref5;
-  return (isOutlineOffer || isAlternative) && `
+  return ($isOutlineOffer || $isAlternative) && `
     > div {
-      background: ${gradient};
+      background: ${$gradient};
 	    -webkit-background-clip: text;
-	    ${gradient && '-webkit-text-fill-color: transparent;'}
+	    ${$gradient && '-webkit-text-fill-color: transparent;'}
     }`;
 });
 const fontSizeMapping = {
@@ -53,7 +53,7 @@ const fontSizeMapping = {
   14: 'small',
   16: 'h6'
 };
-const Badge = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+const Badge = exports.Badge = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {
     children,
     tokens,
@@ -89,15 +89,15 @@ const Badge = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     background = semanticGradient;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(BadgeContainer, {
-    isOutlineOffer: isOutlineOffer,
-    isAlternative: alternative,
-    padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
-    radius: `${borderRadius}px`,
-    background: background,
-    fontName: fontName,
-    fontWeight: fontWeight,
-    gradient: semanticGradient,
-    border: `${borderWidth}px solid ${borderColor}`,
+    $isOutlineOffer: isOutlineOffer,
+    $isAlternative: alternative,
+    $padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+    $radius: `${borderRadius}px`,
+    $background: background,
+    $fontName: fontName,
+    $fontWeight: fontWeight,
+    $gradient: semanticGradient,
+    $border: `${borderWidth}px solid ${borderColor}`,
     ref: ref,
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
@@ -124,5 +124,4 @@ Badge.propTypes = {
     alternative: _propTypes.default.bool,
     inverse: _propTypes.default.bool
   })
-};
-var _default = exports.default = Badge;
+};

package/lib/cjs/BlockQuote/BlockQuote.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.BlockQuote = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -17,43 +17,43 @@ const BlockQuoteContainer = /*#__PURE__*/_styledComponents.default.blockquote.wi
   componentId: "components-web__sc-vals3u-0"
 })(["margin:0;position:relative;padding-left:", ";padding-right:", ";padding-bottom:", ";padding-top:", ";&::before{content:'';left:0;top:0;position:absolute;height:100%;width:", ";background:", ";}"], _ref => {
   let {
-    paddingLeft
+    $paddingLeft
   } = _ref;
-  return `${paddingLeft}px`;
+  return `${$paddingLeft}px`;
 }, _ref2 => {
   let {
-    paddingRight
+    $paddingRight
   } = _ref2;
-  return `${paddingRight}px`;
+  return `${$paddingRight}px`;
 }, _ref3 => {
   let {
-    paddingBottom
+    $paddingBottom
   } = _ref3;
-  return `${paddingBottom}px`;
+  return `${$paddingBottom}px`;
 }, _ref4 => {
   let {
-    paddingTop
+    $paddingTop
   } = _ref4;
-  return `${paddingTop}px`;
+  return `${$paddingTop}px`;
 }, _ref5 => {
   let {
-    width
+    $width
   } = _ref5;
-  return `${width}px`;
+  return `${$width}px`;
 }, _ref6 => {
   let {
-    backgroundGradient
+    $backgroundGradient
   } = _ref6;
-  return backgroundGradient && (0, _utils.transformGradient)(backgroundGradient);
+  return $backgroundGradient && (0, _utils.transformGradient)($backgroundGradient);
 });
 const QuoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "BlockQuote__QuoteContainer",
   componentId: "components-web__sc-vals3u-1"
 })(["margin-bottom:", ";"], _ref7 => {
   let {
-    marginBottom
+    $marginBottom
   } = _ref7;
-  return `${marginBottom}px`;
+  return `${$marginBottom}px`;
 });
 const selectTitleHeadingTokens = themeTokens => ({
   fontSize: themeTokens.titleHeadingFontSize,
@@ -61,7 +61,7 @@ const selectTitleHeadingTokens = themeTokens => ({
   fontWeight: themeTokens.titleHeadingFontWeight,
   lineHeight: themeTokens.titleHeadingLineHeight
 });
-const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
+const BlockQuote = exports.BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
     children,
     link,
@@ -195,7 +195,7 @@ const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     });
     if (additionalInfo || link) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(QuoteContainer, {
-        marginBottom: marginBottom,
+        $marginBottom: marginBottom,
         children: quote
       });
     }
@@ -203,12 +203,12 @@ const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BlockQuoteContainer, {
     ...selectProps(rest),
-    paddingTop: paddingTop,
-    paddingBottom: paddingBottom,
-    paddingLeft: paddingLeft,
-    paddingRight: paddingRight,
-    width: width,
-    backgroundGradient: backgroundGradient,
+    $paddingTop: paddingTop,
+    $paddingBottom: paddingBottom,
+    $paddingLeft: paddingLeft,
+    $paddingRight: paddingRight,
+    $width: width,
+    $backgroundGradient: backgroundGradient,
     ref: ref,
     children: [renderQuote(), (additionalInfo || link) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       space: 0,
@@ -253,5 +253,4 @@ BlockQuote.propTypes = {
    * Whether to render BlockQuote as a heading size of `h3` or large text size
    */
   textStyle: _propTypes.default.oneOf(['large', 'heading'])
-};
-var _default = exports.default = BlockQuote;
+};

package/lib/cjs/Breadcrumbs/{Item/Item.js → BreadcrumbItem.js}

@@ -3,78 +3,78 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.BreadcrumbItem = 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 _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const StyledItemContainer = /*#__PURE__*/_styledComponents.default.li.withConfig({
-  displayName: "Item__StyledItemContainer",
-  componentId: "components-web__sc-1rfdaul-0"
+  displayName: "BreadcrumbItem__StyledItemContainer",
+  componentId: "components-web__sc-oye1s7-0"
 })({
   display: 'inline-block',
   paddingLeft: _ref => {
     let {
-      listItemPadding
+      $listItemPadding
     } = _ref;
-    return `${listItemPadding}px`;
+    return `${$listItemPadding}px`;
   },
   lineHeight: _ref2 => {
     let {
-      lineHeight,
-      fontSize
+      $lineHeight,
+      $fontSize
     } = _ref2;
-    return `${Math.ceil(lineHeight * fontSize)}px`;
+    return `${Math.ceil($lineHeight * $fontSize)}px`;
   },
   marginBottom: '8px'
 });
 const IconContainer = /*#__PURE__*/_styledComponents.default.span.withConfig({
-  displayName: "Item__IconContainer",
-  componentId: "components-web__sc-1rfdaul-1"
+  displayName: "BreadcrumbItem__IconContainer",
+  componentId: "components-web__sc-oye1s7-1"
 })({
   display: 'inline-block',
   paddingLeft: _ref3 => {
     let {
-      iconPadding
+      $iconPadding
     } = _ref3;
-    return `${iconPadding}px`;
+    return `${$iconPadding}px`;
   },
   paddingRight: _ref4 => {
     let {
-      iconPadding
+      $iconPadding
     } = _ref4;
-    return `${iconPadding}px`;
+    return `${$iconPadding}px`;
   },
   fontFamily: _ref5 => {
     let {
-      fontName,
-      fontWeight
+      $fontName,
+      $fontWeight
     } = _ref5;
     return (0, _componentsBase.applyTextStyles)({
-      fontName,
-      fontWeight
+      fontName: $fontName,
+      fontWeight: $fontWeight
     }).fontFamily;
   },
   height: _ref6 => {
     let {
-      iconContainerSize
+      $iconContainerSize
     } = _ref6;
-    return `${iconContainerSize}px`;
+    return `${$iconContainerSize}px`;
   },
   width: _ref7 => {
     let {
-      iconContainerSize,
-      iconPadding
+      $iconContainerSize,
+      $iconPadding
     } = _ref7;
-    return `${iconContainerSize + iconPadding * 2}px`;
+    return `${$iconContainerSize + $iconPadding * 2}px`;
   },
   verticalAlign: 'bottom'
 });
-const Item = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
+const BreadcrumbItem = exports.BreadcrumbItem = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
     href,
     children,
@@ -108,10 +108,10 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     href
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledItemContainer, {
-    listItemPadding: listItemPadding,
-    lineHeight: lineHeight,
-    fontSize: fontSize,
-    iconContainerSize: iconContainerSize,
+    $listItemPadding: listItemPadding,
+    $lineHeight: lineHeight,
+    $fontSize: fontSize,
+    $iconContainerSize: iconContainerSize,
     children: current ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
       tokens: {
         color: currentColor,
@@ -136,10 +136,10 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
         onPress: onPress,
         children: children
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
-        iconPadding: iconPadding,
-        fontName: fontName,
-        fontWeight: fontWeight,
-        iconContainerSize: iconContainerSize,
+        $iconPadding: iconPadding,
+        $fontName: fontName,
+        $fontWeight: fontWeight,
+        $iconContainerSize: iconContainerSize,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronRightIcon, {
           size: iconSize,
           color: iconColor
@@ -148,8 +148,8 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     })
   });
 });
-Item.displayName = 'Item';
-Item.propTypes = {
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+BreadcrumbItem.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * Breadcrumb text
@@ -176,5 +176,4 @@ Item.propTypes = {
    * Function to be called when the Item is clicked.
    */
   onPress: _propTypes.default.func
-};
-var _default = exports.default = Item;
+};

package/lib/cjs/Breadcrumbs/Breadcrumbs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Breadcrumbs = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactHelmetAsync = require("react-helmet-async");
@@ -11,11 +11,10 @@ var _lodash = require("lodash");
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _utils = require("../utils");
-var _Item = _interopRequireDefault(require("./Item/Item"));
+var _BreadcrumbItem = require("./BreadcrumbItem");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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); }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const StyledList = /*#__PURE__*/_styledComponents.default.ol.withConfig({
   displayName: "Breadcrumbs__StyledList",
@@ -24,6 +23,7 @@ const StyledList = /*#__PURE__*/_styledComponents.default.ol.withConfig({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap',
+  alignContent: 'stretch',
   listStyle: 'none',
   listStylePosition: 'inside',
   margin: 0,
@@ -104,7 +104,7 @@ const MAX_ITEMS_ON_XS_VIEWPORT = 4;
 /**
  * Display a hierarchy of links, commonly used for navigation.
  */
-const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Breadcrumbs = exports.Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     baseUrl,
     children,
@@ -196,7 +196,7 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ref: ref,
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
-      iconContainerSize: themeTokens.iconContainerSize,
+      $iconContainerSize: themeTokens.iconContainerSize,
       children: items.map(_ref4 => {
         let {
           href,
@@ -207,7 +207,7 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           onPress,
           ...itemRest
         } = _ref4;
-        return /*#__PURE__*/(0, _react.createElement)(_Item.default, {
+        return /*#__PURE__*/(0, _react.createElement)(_BreadcrumbItem.BreadcrumbItem, {
           ...itemRest,
           current: current,
           href: href,
@@ -259,6 +259,4 @@ Breadcrumbs.propTypes = {
     inverse: _propTypes.default.bool,
     light: _propTypes.default.bool
   })
-};
-Breadcrumbs.Item = _Item.default;
-var _default = exports.default = Breadcrumbs;
+};

package/lib/cjs/Callout/Callout.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Callout = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -42,25 +42,25 @@ const CalloutContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   componentId: "components-web__sc-1a7ptx-0"
 })(_ref => {
   let {
-    rounded,
-    verticalAlign,
-    textAlignToFlex,
-    background,
-    gap,
-    borderRadius,
-    padding
+    $rounded,
+    $verticalAlign,
+    $textAlignToFlex,
+    $background,
+    $gap,
+    $borderRadius,
+    $padding
   } = _ref;
   return {
-    background,
+    background: $background,
     display: 'flex',
-    gap,
-    borderRadius,
-    padding,
-    justifyContent: getAlignment(rounded, textAlignToFlex),
-    alignItems: verticalAlignToFlex(verticalAlign)
+    gap: $gap,
+    borderRadius: $borderRadius,
+    padding: $padding,
+    justifyContent: getAlignment($rounded, $textAlignToFlex),
+    alignItems: verticalAlignToFlex($verticalAlign)
   };
 });
-const Callout = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Callout = exports.Callout = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     icon,
     children,
@@ -85,15 +85,15 @@ const Callout = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     size = 'medium'
   } = variant;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CalloutContainer, {
-    size: size,
-    rounded: rounded,
+    $size: size,
+    $rounded: rounded,
     "data-testid": "callout-container",
-    verticalAlign: verticalAlign,
-    textAlignToFlex: textAlignToFlex,
-    background: background,
-    gap: gap,
-    borderRadius: borderRadius,
-    padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+    $verticalAlign: verticalAlign,
+    $textAlignToFlex: textAlignToFlex,
+    $background: background,
+    $gap: gap,
+    $borderRadius: borderRadius,
+    $padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
     ref: ref,
     ...selectProps(rest),
     children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
@@ -137,5 +137,4 @@ Callout.propTypes = {
    * To change the vertical alignment of the Callout's icon
    */
   verticalAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom'])
-};
-var _default = exports.default = Callout;
+};