@telus-uds/components-web 4.19.1 → 4.19.3

package/CHANGELOG.md

@@ -1,9 +1,29 @@
 # 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 Thu, 16 Apr 2026 21:04:33 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.19.3
+
+Thu, 16 Apr 2026 21:04:33 GMT
+
+### Patches
+
+- `DatePicker`: Remove z-index from inline variant (david.melara1@telus.com)
+- Bump @telus-uds/components-base to v3.30.0
+- Bump @telus-uds/system-theme-tokens to v4.21.0
+
+## 4.19.2
+
+Mon, 06 Apr 2026 21:25:56 GMT
+
+### Patches
+
+- `Card`: padding affected when interactive prop change fixed (josue.higueroscalderon@telus.com)
+- `TextInput`: Include hint and feedback in the describedBy prop (david.melara1@telus.com)
+- Bump @telus-uds/components-base to v3.29.1
+
 ## 4.19.1
 
 Fri, 13 Mar 2026 20:33:41 GMT

package/lib/cjs/Breadcrumbs/Breadcrumbs.js

@@ -14,8 +14,7 @@ var _utils = require("../utils");
 var _Item = _interopRequireDefault(require("./Item/Item"));
 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",

package/lib/cjs/Card/Card.js

@@ -13,8 +13,7 @@ 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(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 }; }
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
@@ -497,17 +496,11 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
               wrapperProps: contentWrapperStyleProps,
               condition: isImageWidthAdjustable,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
-                tokens: {
-                  ...getCardContentTokens(tokensWithoutBg, {
-                    backgroundImage,
-                    fullBleedContentChildrenAlign,
-                    useTransparentBackground: true
-                  }),
-                  paddingTop: tokens.paddingTop !== undefined ? tokens.paddingTop : allThemeTokens.paddingTop,
-                  paddingBottom: tokens.paddingBottom !== undefined ? tokens.paddingBottom : allThemeTokens.paddingBottom,
-                  paddingLeft: tokens.paddingLeft !== undefined ? tokens.paddingLeft : allThemeTokens.paddingLeft,
-                  paddingRight: tokens.paddingRight !== undefined ? tokens.paddingRight : allThemeTokens.paddingRight
-                },
+                tokens: getCardContentTokens(tokensWithoutBg, {
+                  backgroundImage,
+                  fullBleedContentChildrenAlign,
+                  useTransparentBackground: true
+                }),
                 variant: variant,
                 withFooter: hasFooter,
                 backgroundImage: backgroundImage,

package/lib/cjs/DatePicker/CalendarContainer.js

@@ -16,6 +16,7 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
 })(_ref => {
   let {
     daySize,
+    isInline = false,
     remainingTokens,
     calendarMonthFontTokens,
     calendarDayDefaultHeight,
@@ -26,7 +27,7 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
   return `
   ${_reactDatesCss.default}
   > div {
-    z-index: 1000;
+    z-index: ${isInline ? 'auto' : 1000};
   }
   .SingleDatePicker,
   .SingleDatePickerInput {
@@ -38,7 +39,7 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
     border: 1px solid ${remainingTokens.singleDatePickerBorderColor};
     border-radius: ${remainingTokens.singleDatePickerRadius}px;
     padding: ${remainingTokens.singleDatePickerPaddingTopBottom}px ${remainingTokens.singleDatePickerLeftRight}px;
-    z-index: 1000;
+    z-index: ${isInline ? 'auto' : 1000};
   }
   .DateInput {
     width: 100%;

package/lib/cjs/DatePicker/DatePicker.js

@@ -339,6 +339,7 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         calendarMonthFontTokens: calendarMonthFontTokens,
         calendarWeekFontTokens: calendarWeekFontTokens,
         defaultFontTokens: defaultFontTokens,
+        isInline: inline,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDates.DayPickerSingleDateController, {
           date: inputDate,
           onDateChange: onChange,

package/lib/cjs/Footnote/Footnote.js

@@ -12,8 +12,7 @@ var _OrderedListBase = _interopRequireDefault(require("../OrderedList/OrderedLis
 var _utils = require("../utils");
 var _dictionary = _interopRequireDefault(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;

package/lib/cjs/PreviewCard/PreviewCard.js

@@ -12,8 +12,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _FullBleedContent = _interopRequireWildcard(require("../shared/FullBleedContent"));
 var _AuthorDate = _interopRequireDefault(require("./AuthorDate"));
 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 }; }
 // Passes React Native-oriented system props through UDS PressableCardBase
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.focusHandlerProps, _componentsBase.viewProps]);

package/lib/cjs/PriceLockup/PriceLockup.js

@@ -104,42 +104,42 @@ const RateTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
 const StrikeThroughContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__StrikeThroughContainer",
   componentId: "components-web__sc-1x6duay-9"
-})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref10 => {
+})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref0 => {
   let {
     strikeThroughPosition
-  } = _ref10;
+  } = _ref0;
   return `${strikeThroughPosition}px`;
-}, _ref11 => {
+}, _ref1 => {
   let {
     strikeThroughHeight
-  } = _ref11;
+  } = _ref1;
   return `${strikeThroughHeight}px`;
-}, _ref12 => {
+}, _ref10 => {
   let {
     strikeThroughColor
-  } = _ref12;
+  } = _ref10;
   return strikeThroughColor;
 });
 const TypographyContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__TypographyContainer",
   componentId: "components-web__sc-1x6duay-10"
-})(["display:flex;padding-top:", ";"], _ref13 => {
+})(["display:flex;padding-top:", ";"], _ref11 => {
   let {
     paddingTop
-  } = _ref13;
+  } = _ref11;
   return `${paddingTop || 0}px`;
 });
 const InlineTextWithFootnote = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__InlineTextWithFootnote",
   componentId: "components-web__sc-1x6duay-11"
 })(["display:inline;position:relative;> *:first-child{display:inline;}> *:last-child{display:inline-block;position:relative;top:-0.5em;font-size:0.75em;margin-left:2px;line-height:0;vertical-align:bottom;}"]);
-const selectFootnoteLinkStyles = _ref14 => {
+const selectFootnoteLinkStyles = _ref12 => {
   let {
     footnoteLinkColor,
     footnoteLinkFontName,
     footnoteLinkFontWeight,
     footnoteLinkLineHeight
-  } = _ref14;
+  } = _ref12;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
@@ -147,19 +147,19 @@ const selectFootnoteLinkStyles = _ref14 => {
     lineHeight: footnoteLinkLineHeight
   };
 };
-const selectStrikeThroughTokens = _ref15 => {
+const selectStrikeThroughTokens = _ref13 => {
   let {
     strikeThroughPosition,
     strikeThroughHeight,
     strikeThroughColor
-  } = _ref15;
+  } = _ref13;
   return {
     strikeThroughHeight,
     strikeThroughPosition,
     strikeThroughColor
   };
 };
-const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref16, ref) => {
+const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref14, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -179,7 +179,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref16, ref) => {
     copy = 'en',
     dictionary = _dictionary.default,
     ...rest
-  } = _ref16;
+  } = _ref14;
   const viewport = (0, _componentsBase.useViewport)();
   const {
     footnoteMarginTop,

package/lib/cjs/Ribbon/Ribbon.js

@@ -70,48 +70,48 @@ const RibbonContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
 const RibbonCurve = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Ribbon__RibbonCurve",
   componentId: "components-web__sc-186270k-2"
-})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;overflow:hidden;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref10 => {
+})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;overflow:hidden;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref0 => {
   let {
     curveBackgroundColor
-  } = _ref10;
+  } = _ref0;
   return curveBackgroundColor;
-}, _ref11 => {
+}, _ref1 => {
   let {
     curveWidth
-  } = _ref11;
+  } = _ref1;
   return curveWidth;
-}, _ref12 => {
+}, _ref10 => {
   let {
     curveHeight
-  } = _ref12;
+  } = _ref10;
   return curveHeight;
-}, _ref13 => {
+}, _ref11 => {
   let {
     curveMarginTop
-  } = _ref13;
+  } = _ref11;
   return curveMarginTop;
-}, _ref14 => {
+}, _ref12 => {
   let {
     curveAfterRadius
-  } = _ref14;
+  } = _ref12;
   return curveAfterRadius;
-}, _ref15 => {
+}, _ref13 => {
   let {
     curveAfterHeight
-  } = _ref15;
+  } = _ref13;
   return curveAfterHeight;
-}, _ref16 => {
+}, _ref14 => {
   let {
     curveAfterBackgroundColor
-  } = _ref16;
+  } = _ref14;
   return curveAfterBackgroundColor;
-}, _ref17 => {
+}, _ref15 => {
   let {
     curveAfterWidth
-  } = _ref17;
+  } = _ref15;
   return curveAfterWidth;
 });
-const Ribbon = /*#__PURE__*/_react.default.forwardRef((_ref18, ref) => {
+const Ribbon = /*#__PURE__*/_react.default.forwardRef((_ref16, ref) => {
   let {
     children,
     tokens,
@@ -120,7 +120,7 @@ const Ribbon = /*#__PURE__*/_react.default.forwardRef((_ref18, ref) => {
     top,
     variant = {},
     ...rest
-  } = _ref18;
+  } = _ref16;
   const {
     backgroundColor,
     borderRadius,

package/lib/cjs/StoryCard/StoryCard.js

@@ -10,8 +10,7 @@ var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _FullBleedContent = _interopRequireWildcard(require("../shared/FullBleedContent"));
 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 }; }
 // Passes React Native-oriented system props through UDS PressableCardBase
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.focusHandlerProps, _componentsBase.viewProps]);

package/lib/cjs/Table/Cell.js

@@ -10,8 +10,7 @@ var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Table = require("./Table");
 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 HEADER_TYPE = {
   HEADING: 'heading',

package/lib/cjs/Toast/Toast.js

@@ -10,8 +10,7 @@ var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _utils = require("../utils");
 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 transform = property => (from, to) => (0, _styledComponents.keyframes)(["from{", ":", ";}to{", ":", ";}"], property, from, property, to);

package/lib/cjs/VideoPicker/VideoPicker.js

@@ -15,8 +15,7 @@ var _VideoPickerPlayer = _interopRequireDefault(require("./VideoPickerPlayer"));
 var _VideoSlider = _interopRequireDefault(require("./VideoSlider"));
 var _utils = require("../utils");
 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 framedContainerStyles = _ref => {

package/lib/cjs/VideoPicker/VideoPickerThumbnail.js

@@ -185,12 +185,12 @@ const VideoPickerThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref7, ref)
       }];
     },
     ref: ref,
-    children: _ref10 => {
+    children: _ref0 => {
       let {
         hovered: hover,
         focused: focus,
         pressed
-      } = _ref10;
+      } = _ref0;
       const themeTokens = getTokens({
         hover,
         focus,

package/lib/cjs/WaffleGrid/WaffleGrid.js

@@ -14,8 +14,7 @@ var _Image = _interopRequireDefault(require("../Image"));
 var _utils = require("../utils");
 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 row = (rowSize, rowBorderWidth) => ({
   flexBasis: `calc(100% / ${rowSize})`,

package/lib/cjs/index.js

@@ -345,6 +345,5 @@ Object.keys(_baseExports).forEach(function (key) {
     }
   });
 });
-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 }; }

package/lib/cjs/shared/FullBleedContent/index.js

@@ -25,7 +25,6 @@ Object.defineProperty(exports, "useFullBleedContentProps", {
 var _FullBleedContent = _interopRequireDefault(require("./FullBleedContent"));
 var _getFullBleedBorderRadius = _interopRequireDefault(require("./getFullBleedBorderRadius"));
 var _useFullBleedContentProps = _interopRequireWildcard(require("./useFullBleedContentProps"));
-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 }; }
 var _default = exports.default = _FullBleedContent.default;

package/lib/cjs/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.js

@@ -98,10 +98,10 @@ const PlayIconContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
   alignItems: 'center',
   width: 32,
   height: 32,
-  background: _ref10 => {
+  background: _ref0 => {
     let {
       playIconContainerBackground
-    } = _ref10;
+    } = _ref0;
     return playIconContainerBackground ?? 'none';
   },
   borderRadius: '100%',
@@ -114,30 +114,30 @@ const DetailsContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start',
-  paddingLeft: _ref11 => {
+  paddingLeft: _ref1 => {
     let {
       detailsContainerPadding
-    } = _ref11;
+    } = _ref1;
     return `${detailsContainerPadding}px`;
   }
 });
-const selectPlayIconContainerTokens = _ref12 => {
+const selectPlayIconContainerTokens = _ref10 => {
   let {
     playIconContainerBackground
-  } = _ref12;
+  } = _ref10;
   return {
     playIconContainerBackground
   };
 };
-const selectDetailsContainerTokens = _ref13 => {
+const selectDetailsContainerTokens = _ref11 => {
   let {
     detailsContainerPadding
-  } = _ref13;
+  } = _ref11;
   return {
     detailsContainerPadding
   };
 };
-const selectButtonContentTokens = _ref14 => {
+const selectButtonContentTokens = _ref12 => {
   let {
     buttonBackground,
     buttonBorderColor,
@@ -147,7 +147,7 @@ const selectButtonContentTokens = _ref14 => {
     buttonMinHeight,
     buttonPaddingLeft,
     buttonPaddingRight
-  } = _ref14;
+  } = _ref12;
   return {
     buttonBackground,
     buttonBorderColor,
@@ -159,24 +159,24 @@ const selectButtonContentTokens = _ref14 => {
     buttonPaddingRight
   };
 };
-const getLabelTokens = _ref15 => {
+const getLabelTokens = _ref13 => {
   let {
     labelFontName: fontName,
     labelFontWeight: fontWeight
-  } = _ref15;
+  } = _ref13;
   return {
     fontName,
     fontWeight
   };
 };
-const SplashButtonWithDetails = _ref16 => {
+const SplashButtonWithDetails = _ref14 => {
   let {
     label,
     tokens,
     variant,
     copy,
     videoLength
-  } = _ref16;
+  } = _ref14;
   const {
     buttonContentChildrenBackground
   } = (0, _componentsBase.useThemeTokens)('SplashButtonWithDetails', tokens, variant, {

package/lib/cjs/utils/renderStructuredContent.js

@@ -7,8 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _componentsBase = require("@telus-uds/components-base");
 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); }
 /**
  * Takes a string content and marks up all the links in it by wrapping them
  * in `Link` component.

package/lib/cjs/utils/theming/get-theme-from-server.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = getTheme;
-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 cachedTheme = {};
 const theme = process.env.UDS_THEME;
 async function importTheme(componentName) {

package/lib/esm/Card/Card.js

@@ -489,17 +489,11 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
               wrapperProps: contentWrapperStyleProps,
               condition: isImageWidthAdjustable,
               children: /*#__PURE__*/_jsx(CardContent, {
-                tokens: {
-                  ...getCardContentTokens(tokensWithoutBg, {
-                    backgroundImage,
-                    fullBleedContentChildrenAlign,
-                    useTransparentBackground: true
-                  }),
-                  paddingTop: tokens.paddingTop !== undefined ? tokens.paddingTop : allThemeTokens.paddingTop,
-                  paddingBottom: tokens.paddingBottom !== undefined ? tokens.paddingBottom : allThemeTokens.paddingBottom,
-                  paddingLeft: tokens.paddingLeft !== undefined ? tokens.paddingLeft : allThemeTokens.paddingLeft,
-                  paddingRight: tokens.paddingRight !== undefined ? tokens.paddingRight : allThemeTokens.paddingRight
-                },
+                tokens: getCardContentTokens(tokensWithoutBg, {
+                  backgroundImage,
+                  fullBleedContentChildrenAlign,
+                  useTransparentBackground: true
+                }),
                 variant: variant,
                 withFooter: hasFooter,
                 backgroundImage: backgroundImage,

package/lib/esm/DatePicker/CalendarContainer.js

@@ -10,6 +10,7 @@ const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
 })(_ref => {
   let {
     daySize,
+    isInline = false,
     remainingTokens,
     calendarMonthFontTokens,
     calendarDayDefaultHeight,
@@ -20,7 +21,7 @@ const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
   return `
   ${defaultReactDatesCss}
   > div {
-    z-index: 1000;
+    z-index: ${isInline ? 'auto' : 1000};
   }
   .SingleDatePicker,
   .SingleDatePickerInput {
@@ -32,7 +33,7 @@ const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
     border: 1px solid ${remainingTokens.singleDatePickerBorderColor};
     border-radius: ${remainingTokens.singleDatePickerRadius}px;
     padding: ${remainingTokens.singleDatePickerPaddingTopBottom}px ${remainingTokens.singleDatePickerLeftRight}px;
-    z-index: 1000;
+    z-index: ${isInline ? 'auto' : 1000};
   }
   .DateInput {
     width: 100%;

package/lib/esm/DatePicker/DatePicker.js

@@ -332,6 +332,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         calendarMonthFontTokens: calendarMonthFontTokens,
         calendarWeekFontTokens: calendarWeekFontTokens,
         defaultFontTokens: defaultFontTokens,
+        isInline: inline,
         children: /*#__PURE__*/_jsx(DayPickerSingleDateController, {
           date: inputDate,
           onDateChange: onChange,

package/lib/esm/PriceLockup/PriceLockup.js

@@ -97,42 +97,42 @@ const RateTextContainer = /*#__PURE__*/styled.div.withConfig({
 const StrikeThroughContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__StrikeThroughContainer",
   componentId: "components-web__sc-1x6duay-9"
-})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref10 => {
+})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref0 => {
   let {
     strikeThroughPosition
-  } = _ref10;
+  } = _ref0;
   return `${strikeThroughPosition}px`;
-}, _ref11 => {
+}, _ref1 => {
   let {
     strikeThroughHeight
-  } = _ref11;
+  } = _ref1;
   return `${strikeThroughHeight}px`;
-}, _ref12 => {
+}, _ref10 => {
   let {
     strikeThroughColor
-  } = _ref12;
+  } = _ref10;
   return strikeThroughColor;
 });
 const TypographyContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__TypographyContainer",
   componentId: "components-web__sc-1x6duay-10"
-})(["display:flex;padding-top:", ";"], _ref13 => {
+})(["display:flex;padding-top:", ";"], _ref11 => {
   let {
     paddingTop
-  } = _ref13;
+  } = _ref11;
   return `${paddingTop || 0}px`;
 });
 const InlineTextWithFootnote = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__InlineTextWithFootnote",
   componentId: "components-web__sc-1x6duay-11"
 })(["display:inline;position:relative;> *:first-child{display:inline;}> *:last-child{display:inline-block;position:relative;top:-0.5em;font-size:0.75em;margin-left:2px;line-height:0;vertical-align:bottom;}"]);
-const selectFootnoteLinkStyles = _ref14 => {
+const selectFootnoteLinkStyles = _ref12 => {
   let {
     footnoteLinkColor,
     footnoteLinkFontName,
     footnoteLinkFontWeight,
     footnoteLinkLineHeight
-  } = _ref14;
+  } = _ref12;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
@@ -140,19 +140,19 @@ const selectFootnoteLinkStyles = _ref14 => {
     lineHeight: footnoteLinkLineHeight
   };
 };
-const selectStrikeThroughTokens = _ref15 => {
+const selectStrikeThroughTokens = _ref13 => {
   let {
     strikeThroughPosition,
     strikeThroughHeight,
     strikeThroughColor
-  } = _ref15;
+  } = _ref13;
   return {
     strikeThroughHeight,
     strikeThroughPosition,
     strikeThroughColor
   };
 };
-const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
+const PriceLockup = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -172,7 +172,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
     copy = 'en',
     dictionary = defaultDictionary,
     ...rest
-  } = _ref16;
+  } = _ref14;
   const viewport = useViewport();
   const {
     footnoteMarginTop,

package/lib/esm/Ribbon/Ribbon.js

@@ -63,48 +63,48 @@ const RibbonContainer = /*#__PURE__*/styled.div.withConfig({
 const RibbonCurve = /*#__PURE__*/styled.div.withConfig({
   displayName: "Ribbon__RibbonCurve",
   componentId: "components-web__sc-186270k-2"
-})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;overflow:hidden;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref10 => {
+})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;overflow:hidden;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref0 => {
   let {
     curveBackgroundColor
-  } = _ref10;
+  } = _ref0;
   return curveBackgroundColor;
-}, _ref11 => {
+}, _ref1 => {
   let {
     curveWidth
-  } = _ref11;
+  } = _ref1;
   return curveWidth;
-}, _ref12 => {
+}, _ref10 => {
   let {
     curveHeight
-  } = _ref12;
+  } = _ref10;
   return curveHeight;
-}, _ref13 => {
+}, _ref11 => {
   let {
     curveMarginTop
-  } = _ref13;
+  } = _ref11;
   return curveMarginTop;
-}, _ref14 => {
+}, _ref12 => {
   let {
     curveAfterRadius
-  } = _ref14;
+  } = _ref12;
   return curveAfterRadius;
-}, _ref15 => {
+}, _ref13 => {
   let {
     curveAfterHeight
-  } = _ref15;
+  } = _ref13;
   return curveAfterHeight;
-}, _ref16 => {
+}, _ref14 => {
   let {
     curveAfterBackgroundColor
-  } = _ref16;
+  } = _ref14;
   return curveAfterBackgroundColor;
-}, _ref17 => {
+}, _ref15 => {
   let {
     curveAfterWidth
-  } = _ref17;
+  } = _ref15;
   return curveAfterWidth;
 });
-const Ribbon = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
+const Ribbon = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
     children,
     tokens,
@@ -113,7 +113,7 @@ const Ribbon = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
     top,
     variant = {},
     ...rest
-  } = _ref18;
+  } = _ref16;
   const {
     backgroundColor,
     borderRadius,

package/lib/esm/VideoPicker/VideoPickerThumbnail.js

@@ -178,12 +178,12 @@ const VideoPickerThumbnail = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
       }];
     },
     ref: ref,
-    children: _ref10 => {
+    children: _ref0 => {
       let {
         hovered: hover,
         focused: focus,
         pressed
-      } = _ref10;
+      } = _ref0;
       const themeTokens = getTokens({
         hover,
         focus,

package/lib/esm/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.js

@@ -91,10 +91,10 @@ const PlayIconContainer = /*#__PURE__*/styled.div.withConfig({
   alignItems: 'center',
   width: 32,
   height: 32,
-  background: _ref10 => {
+  background: _ref0 => {
     let {
       playIconContainerBackground
-    } = _ref10;
+    } = _ref0;
     return playIconContainerBackground ?? 'none';
   },
   borderRadius: '100%',
@@ -107,30 +107,30 @@ const DetailsContainer = /*#__PURE__*/styled.div.withConfig({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start',
-  paddingLeft: _ref11 => {
+  paddingLeft: _ref1 => {
     let {
       detailsContainerPadding
-    } = _ref11;
+    } = _ref1;
     return `${detailsContainerPadding}px`;
   }
 });
-const selectPlayIconContainerTokens = _ref12 => {
+const selectPlayIconContainerTokens = _ref10 => {
   let {
     playIconContainerBackground
-  } = _ref12;
+  } = _ref10;
   return {
     playIconContainerBackground
   };
 };
-const selectDetailsContainerTokens = _ref13 => {
+const selectDetailsContainerTokens = _ref11 => {
   let {
     detailsContainerPadding
-  } = _ref13;
+  } = _ref11;
   return {
     detailsContainerPadding
   };
 };
-const selectButtonContentTokens = _ref14 => {
+const selectButtonContentTokens = _ref12 => {
   let {
     buttonBackground,
     buttonBorderColor,
@@ -140,7 +140,7 @@ const selectButtonContentTokens = _ref14 => {
     buttonMinHeight,
     buttonPaddingLeft,
     buttonPaddingRight
-  } = _ref14;
+  } = _ref12;
   return {
     buttonBackground,
     buttonBorderColor,
@@ -152,24 +152,24 @@ const selectButtonContentTokens = _ref14 => {
     buttonPaddingRight
   };
 };
-const getLabelTokens = _ref15 => {
+const getLabelTokens = _ref13 => {
   let {
     labelFontName: fontName,
     labelFontWeight: fontWeight
-  } = _ref15;
+  } = _ref13;
   return {
     fontName,
     fontWeight
   };
 };
-const SplashButtonWithDetails = _ref16 => {
+const SplashButtonWithDetails = _ref14 => {
   let {
     label,
     tokens,
     variant,
     copy,
     videoLength
-  } = _ref16;
+  } = _ref14;
   const {
     buttonContentChildrenBackground
   } = useThemeTokens('SplashButtonWithDetails', tokens, variant, {

package/package.json

@@ -5,9 +5,9 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^3.29.0",
+    "@telus-uds/components-base": "^3.30.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.20.0",
+    "@telus-uds/system-theme-tokens": "^4.21.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "lodash.throttle": "^4.1.1",
@@ -82,5 +82,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "4.19.1"
+  "version": "4.19.3"
 }

package/src/Card/Card.jsx

@@ -526,29 +526,11 @@ const Card = React.forwardRef(
                         condition={isImageWidthAdjustable}
                       >
                         <CardContent
-                          tokens={{
-                            ...getCardContentTokens(tokensWithoutBg, {
-                              backgroundImage,
-                              fullBleedContentChildrenAlign,
-                              useTransparentBackground: true
-                            }),
-                            paddingTop:
-                              tokens.paddingTop !== undefined
-                                ? tokens.paddingTop
-                                : allThemeTokens.paddingTop,
-                            paddingBottom:
-                              tokens.paddingBottom !== undefined
-                                ? tokens.paddingBottom
-                                : allThemeTokens.paddingBottom,
-                            paddingLeft:
-                              tokens.paddingLeft !== undefined
-                                ? tokens.paddingLeft
-                                : allThemeTokens.paddingLeft,
-                            paddingRight:
-                              tokens.paddingRight !== undefined
-                                ? tokens.paddingRight
-                                : allThemeTokens.paddingRight
-                          }}
+                          tokens={getCardContentTokens(tokensWithoutBg, {
+                            backgroundImage,
+                            fullBleedContentChildrenAlign,
+                            useTransparentBackground: true
+                          })}
                           variant={variant}
                           withFooter={hasFooter}
                           backgroundImage={backgroundImage}

package/src/DatePicker/CalendarContainer.jsx

@@ -7,6 +7,7 @@ import defaultReactDatesCss from './reactDatesCss'
 const CalendarContainer = styled.div(
   ({
     daySize,
+    isInline = false,
     remainingTokens,
     calendarMonthFontTokens,
     calendarDayDefaultHeight,
@@ -16,7 +17,7 @@ const CalendarContainer = styled.div(
   }) => `
   ${defaultReactDatesCss}
   > div {
-    z-index: 1000;
+    z-index: ${isInline ? 'auto' : 1000};
   }
   .SingleDatePicker,
   .SingleDatePickerInput {
@@ -30,7 +31,7 @@ const CalendarContainer = styled.div(
     padding: ${remainingTokens.singleDatePickerPaddingTopBottom}px ${
     remainingTokens.singleDatePickerLeftRight
   }px;
-    z-index: 1000;
+    z-index: ${isInline ? 'auto' : 1000};
   }
   .DateInput {
     width: 100%;

package/src/DatePicker/DatePicker.jsx

@@ -329,6 +329,7 @@ const DatePicker = React.forwardRef(
               calendarMonthFontTokens={calendarMonthFontTokens}
               calendarWeekFontTokens={calendarWeekFontTokens}
               defaultFontTokens={defaultFontTokens}
+              isInline={inline}
             >
               <DayPickerSingleDateController
                 date={inputDate}