@telus-uds/components-base 1.94.0 → 1.96.0

package/CHANGELOG.md

@@ -1,12 +1,51 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Mon, 16 Sep 2024 12:26:18 GMT and should not be manually modified.
+This log was last generated on Sat, 12 Oct 2024 00:31:05 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.96.0
+
+Sat, 12 Oct 2024 00:31:05 GMT
+
+### Minor changes
+
+- `TermsAndConditions`: export use-responsive-theme-tokens hook (guillermo.peitzner@telus.com)
+- `Progress`: add shadow tokens to Progress and ProgressBar (jacqui.koroll@telus.com)
+- `PriceLockup`: alignItemsText token added to the component to align right (flex-end), left (flex-start) or center the content (35577399+JoshHC@users.noreply.github.com)
+- `Modal`: updated the alignment of the cancel/secondary buttons (sam.obisesan@telus.com)
+- `Card`: new token backgroundGradient added to be able to use the gradient as background (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/system-theme-tokens to v2.65.0
+
+### Patches
+
+- `Modal`: Fix focus trap to ensure focus is contained within the modal and initial focus is set on modal upon open (Mauricio.BatresMontejo@telus.com)
+- `Typography`: fix sub and sup render on mobile devices (guillermo.peitzner@telus.com)
+- `Autocomplete`: fix suggestion list displacement (guillermo.peitzner@telus.com)
+- `List`: Enable `CircleBullet` icon to visualize order of nested lists. (jaime.tuyuc@telus.com)
+- `Notification`: use maxWidth to avoid overflow in media queries (kristina.kirpichnikova@telus.com)
+
+## 1.95.0
+
+Wed, 25 Sep 2024 17:07:47 GMT
+
+### Minor changes
+
+- `DownloadApp`: add component (Mauricio.BatresMontejo@telus.com)
+- `TabBar`: new component added (35577399+JoshHC@users.noreply.github.com)
+- `Link`: add `inline` variant to `iconPosition` (evander.owusu@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.64.0
+
+### Patches
+
+- `Modal`: fix focusing on undefined ref for close button (kristina.kirpichnikova@telus.com)
+- `TextInput`: masked characters issue in password fixed (35577399+JoshHC@users.noreply.github.com)
+- `Tooltip`: fix positioning (guillermo.peitzner@telus.com)
+- `Autocomplete`: add missing loading-label functionality (guillermo.peitzner@telus.com)
+
 ## 1.94.0
 
-Mon, 16 Sep 2024 12:26:18 GMT
+Mon, 16 Sep 2024 12:35:38 GMT
 
 ### Minor changes
 

package/lib/Autocomplete/Autocomplete.js

@@ -111,6 +111,7 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     validation,
     value,
     helpText = '',
+    loadingLabel,
     ...rest
   } = _ref2;
   const {
@@ -143,6 +144,7 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 
   // When it's nested, selected value
   const [nestedSelectedValue, setNestedSelectedValue] = _react.default.useState(null);
+  const [isInputVisible, setIsInputVisible] = _react.default.useState(true);
   const {
     supportsProps,
     ...selectedProps
@@ -268,6 +270,27 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       }));
     }
   }, [nestedSelectedValue, items]);
+  _react.default.useEffect(() => {
+    if (_Platform.default.OS === 'ios' || _Platform.default.OS === 'android') {
+      return undefined;
+    }
+    const observer = new IntersectionObserver(entries => {
+      const [entry] = entries;
+      setIsInputVisible(entry.isIntersecting);
+      if (!entry.isIntersecting) {
+        setIsExpanded(false);
+      }
+    });
+    const currentInputRef = inputRef.current;
+    if (currentInputRef) {
+      observer.observe(currentInputRef);
+    }
+    return () => {
+      if (currentInputRef) {
+        observer.unobserve(currentInputRef);
+      }
+    };
+  }, [inputRef]);
   const handleClose = event => {
     var _openOverlayRef$curre, _openOverlayRef$curre2;
     if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27') || event.type === 'click' && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target)) || event.type === 'touchstart' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.touches[0].target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre2 = openOverlayRef.current) !== null && _openOverlayRef$curre2 !== void 0 && _openOverlayRef$curre2.contains(event.touches[0].target))) {
@@ -324,7 +347,19 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           readOnly: readOnly,
           ref: inputRef,
           ...(_Platform.default.OS !== 'web' ? {
-            onLayout: event => setSourceLayout(event.nativeEvent.layout)
+            onLayout: event => {
+              setSourceLayout(event.nativeEvent.layout);
+              const {
+                y,
+                height
+              } = event.nativeEvent.layout;
+              if (y >= 0 && height > 0) {
+                setIsInputVisible(true);
+              } else {
+                setIsInputVisible(false);
+                setIsExpanded(false);
+              }
+            }
           } : {}),
           tokens: inputTokens,
           validation: validation,
@@ -337,7 +372,7 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           })
         });
       }
-    }), (isExpanded || hintExpansionEnabled) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    }), (isExpanded || hintExpansionEnabled) && isInputVisible && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default.Overlay, {
         overlaidPosition: overlaidPosition,
         isReady: isReady,
@@ -346,7 +381,7 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         onLayout: handleMeasure,
         ref: openOverlayRef,
         children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {
-          label: getCopy('loading')
+          label: loadingLabel ?? getCopy('loading')
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Suggestions.default, {
           hasResults: getCopy('hasResults'),
           id: "autocomplete",

package/lib/Card/CardBase.js

@@ -31,6 +31,7 @@ const selectStyles = _ref => {
     paddingTop,
     minWidth,
     shadow,
+    backgroundGradient,
     gradient
   } = _ref;
   return {
@@ -50,6 +51,9 @@ const selectStyles = _ref => {
       backgroundOrigin: `border-box`,
       boxShadow: `inset 0 1000px white`,
       border: `${borderWidth}px solid transparent`
+    } : {}),
+    ...(backgroundGradient && _Platform.default.OS === 'web' ? {
+      backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
     } : {})
   };
 };

package/lib/DownloadApp/DownloadApp.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _utils = require("../utils");
+var _ThemeProvider = require("../ThemeProvider");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps, _utils.viewProps]);
+const selectOuterStyles = _ref => {
+  let {
+    borderColor,
+    borderWidth,
+    borderGap,
+    borderRadius,
+    padding
+  } = _ref;
+  return {
+    outline: 'none',
+    borderColor,
+    borderWidth,
+    borderGap,
+    borderRadius,
+    padding
+  };
+};
+const DownloadApp = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    copy = 'en',
+    dictionary = _dictionary.default,
+    type = 'ios',
+    href,
+    onPress,
+    tokens = {},
+    variant = {},
+    ...props
+  } = _ref2;
+  const getCopy = (0, _utils.useCopy)({
+    dictionary,
+    copy
+  });
+  const {
+    hrefAttrs,
+    rest
+  } = _utils.hrefAttrsProp.bundle(props);
+  const selectedProps = selectProps({
+    accessibilityRole: href ? 'link' : 'button',
+    href,
+    onPress: _utils.linkProps.handleHref({
+      href,
+      onPress
+    }),
+    hrefAttrs,
+    ...rest
+  });
+  const getDownloadAppTokens = (0, _ThemeProvider.useThemeTokensCallback)('DownloadApp', tokens, variant);
+  const resolveDownloadAppTokens = pressableState => {
+    const themeTokens = (0, _utils.resolvePressableTokens)(getDownloadAppTokens, pressableState, {});
+    return selectOuterStyles(themeTokens);
+  };
+  const {
+    androidENIcon,
+    androidFRIcon,
+    iosENIcon,
+    iosFRIcon
+  } = getDownloadAppTokens();
+  const imageResources = {
+    en: {
+      android: androidENIcon,
+      ios: iosENIcon
+    },
+    fr: {
+      android: androidFRIcon,
+      ios: iosFRIcon
+    }
+  };
+  const IconComponent = imageResources[copy][type];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    style: pressState => [resolveDownloadAppTokens(pressState), staticStyles.row],
+    ...selectedProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+      style: staticImageSizes[type][copy],
+      alt: type === 'ios' ? getCopy('altTextIos') : getCopy('altTextAndroid')
+    })
+  });
+});
+DownloadApp.displayName = 'DownloadApp';
+const dictionaryContentShape = _propTypes.default.shape({
+  altTextAndroid: _propTypes.default.string.isRequired,
+  altTextIos: _propTypes.default.string.isRequired
+});
+DownloadApp.propTypes = {
+  ...selectedSystemPropTypes,
+  copy: _utils.copyPropTypes,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  /**
+   * Select the type of image to show.
+   */
+  type: _propTypes.default.oneOf(['android', 'ios']),
+  /**
+   * It's a simple link that opens the Download Button instead of the onPress function.
+   */
+  href: _propTypes.default.string,
+  /**
+   * Function called when the button is pressed. Required unless the button has a href.
+   */
+  onPress: _propTypes.default.func,
+  /**
+   * DownloadApp tokens.
+   */
+  tokens: (0, _utils.getTokensPropType)('DownloadApp'),
+  /**
+   * DownloadApp variant.
+   */
+  variant: _utils.variantProp.propType
+};
+const staticStyles = _StyleSheet.default.create({
+  row: {
+    ..._Platform.default.select({
+      web: {
+        display: 'inline-flex',
+        width: 'fit-content'
+      },
+      default: {
+        alignSelf: 'flex-start'
+      }
+    })
+  }
+});
+const staticImageSizes = {
+  android: {
+    en: {
+      width: 162,
+      height: 48
+    },
+    fr: {
+      width: 162,
+      height: 48
+    }
+  },
+  ios: {
+    en: {
+      width: 144,
+      height: 48
+    },
+    fr: {
+      width: 152,
+      height: 48
+    }
+  }
+};
+var _default = DownloadApp;
+exports.default = _default;

package/lib/DownloadApp/dictionary.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    altTextAndroid: 'Get it on Google Play',
+    altTextIos: 'Download on the App Store'
+  },
+  fr: {
+    altTextAndroid: 'Disponible sur Google Play',
+    altTextIos: 'Télécharger dans l’App Store'
+  }
+};
+exports.default = _default;

package/lib/DownloadApp/index.js

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

package/lib/Icon/IconText.js

@@ -8,6 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Icon = _interopRequireWildcard(require("./Icon"));
 var _StackView = require("../StackView");
 var _utils = require("../utils");
@@ -66,6 +68,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   });
   const mobile = _Platform.default.OS === 'android' ? iconAdjustedAndroid : iconAdjustedIOS;
   const adjustedContainer = _Platform.default.OS === 'web' ? iconContent : mobile;
+  const adjustedContainerWithPosition = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: staticStyles.adjustedContainer,
+    children: adjustedContainer
+  });
+  if (iconPosition === 'inline') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+      children: [children, " ", adjustedContainerWithPosition]
+    });
+  }
   return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer], {
     space,
     direction: 'row'
@@ -80,9 +91,9 @@ IconText.propTypes = {
    */
   space: _utils.spacingProps.types.spacingValue,
   /**
-   * Whether the icon should be to the left of the content or the right of the content.
+   * Whether the icon should be to the left of the content, the right of the content or inline with the content.
    */
-  iconPosition: _propTypes.default.oneOf(['left', 'right']),
+  iconPosition: _propTypes.default.oneOf(['left', 'right', 'inline']),
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
@@ -100,5 +111,11 @@ IconText.propTypes = {
   children: _propTypes.default.node
   /* eslint-enable react/no-unused-prop-types */
 };
+
+const staticStyles = _StyleSheet.default.create({
+  adjustedContainer: {
+    position: 'absolute'
+  }
+});
 var _default = IconText;
 exports.default = _default;

package/lib/Link/LinkBase.js

@@ -245,9 +245,9 @@ LinkBase.propTypes = {
    */
   icon: _propTypes.default.elementType,
   /**
-   * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left, right or inline with Link.
    */
-  iconPosition: _propTypes.default.oneOf(['left', 'right']),
+  iconPosition: _propTypes.default.oneOf(['left', 'right', 'inline']),
   /**
    * On Web if href is passed, React Native Web maps this object's props to
    * `rel`, `target` and `download` attrs.

package/lib/List/ListItemBase.js

@@ -135,7 +135,8 @@ const staticStyles = _StyleSheet.default.create({
   },
   titleAndContentContainer: {
     flexDirection: 'column',
-    flexShrink: 1
+    flexShrink: 1,
+    flexGrow: 1
   }
 });
 ListItemBase.propTypes = {

package/lib/Modal/Modal.js

@@ -104,6 +104,7 @@ const selectScrollViewStyles = () => ({
  * - Don’t use modals consecutively
  */
 const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+  var _modalContentRef$curr2;
   let {
     children,
     isOpen,
@@ -132,6 +133,8 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     maxWidth
   });
   const modalRef = (0, _useScrollBlocking.default)(isOpen);
+  const modalBodyRef = _react.default.useRef(ref);
+  const modalContentRef = _react.default.useRef(null);
   const {
     closeIcon: CloseIconComponent
   } = themeTokens;
@@ -146,6 +149,25 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   const handleKeyUp = event => {
     if (event.key === 'Escape') onClose();
   };
+  const manageFocus = _react.default.useCallback(event => {
+    if (event.key === 'Tab') {
+      var _modalBodyRef$current;
+      const focusableElements = Array.from(modalBodyRef === null || modalBodyRef === void 0 ? void 0 : (_modalBodyRef$current = modalBodyRef.current) === null || _modalBodyRef$current === void 0 ? void 0 : _modalBodyRef$current.querySelectorAll(`
+      a[href], button, textarea, input, select, 
+      [tabindex]:not([tabindex="-1"]),
+      [contenteditable="true"]
+    `));
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+  }, [modalBodyRef]);
 
   // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
   // Hide the close button if `closeButton` is `null`.
@@ -156,22 +178,20 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   const closeButtonRef = _react.default.useRef(null);
   _react.default.useEffect(() => {
     if (_Platform.default.OS === 'web') {
-      const handleFocus = () => {
-        // If the focus is on the last item of the web modal container, move it to the close button
-        if (document.activeElement === focusTrapRef.current) {
-          closeButtonRef.current.focus();
-        }
-        return undefined;
-      };
-
-      // Add an event listener to manage focus in the web modal container
-      document.addEventListener('focusin', handleFocus);
+      // Add an event listener to manage keydown and focus in the web modal container
+      document.addEventListener('keydown', manageFocus);
 
       // Clean up the event listener
-      return () => document.removeEventListener('focusin', handleFocus);
+      return () => document.removeEventListener('keydown', manageFocus);
     }
     return undefined;
-  }, []);
+  }, [manageFocus]);
+  _react.default.useEffect(() => {
+    if (isOpen) {
+      var _modalContentRef$curr;
+      modalContentRef === null || modalContentRef === void 0 ? void 0 : (_modalContentRef$curr = modalContentRef.current) === null || _modalContentRef$curr === void 0 ? void 0 : _modalContentRef$curr.focus();
+    }
+  }, [isOpen, modalContentRef === null || modalContentRef === void 0 ? void 0 : (_modalContentRef$curr2 = modalContentRef.current) === null || _modalContentRef$curr2 === void 0 ? void 0 : _modalContentRef$curr2.focus]);
   if (!isOpen) {
     return null;
   }
@@ -184,7 +204,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
         pointerEvents: "box-none" // don't capture backdrop press events
         ,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-          ref: ref,
+          ref: modalBodyRef,
           style: [staticStyles.modal, selectModalStyles(themeTokens)],
           onKeyUp: handleKeyUp,
           children: [showCloseButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -229,6 +249,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   if (_Platform.default.OS === 'web') {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_WebModal.default, {
       ...selectProps(rest),
+      ref: modalContentRef,
       children: [content, /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         accessibilityRole: "button",
         ref: focusTrapRef

package/lib/Modal/ModalContent.js

@@ -162,7 +162,7 @@ const styles = _StyleSheet.default.create({
     minHeight: _Platform.default.OS === 'web' ? '100%' : 'auto'
   },
   cancelButton: {
-    flex: 1
+    display: 'flex'
   }
 });
 ModalContent.propTypes = {

package/lib/Modal/WebModal.js

@@ -31,6 +31,7 @@ const WebModal = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: staticStyles.container,
       ...selectProps(rest),
+      focusable: true,
       ref: ref,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: staticStyles.content,

package/lib/Notification/Notification.js

@@ -105,19 +105,19 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
       justifyContent: 'space-between',
       ...(0, _utils.createMediaQueryStyles)({
         xs: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content = themeOptions.contentMaxWidth) === null || _themeOptions$content === void 0 ? void 0 : _themeOptions$content.xs) || '100%'
+          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content = themeOptions.contentMaxWidth) === null || _themeOptions$content === void 0 ? void 0 : _themeOptions$content.xs) || '100%'
         },
         md: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content2 = themeOptions.contentMaxWidth) === null || _themeOptions$content2 === void 0 ? void 0 : _themeOptions$content2.md) || '100%'
+          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content2 = themeOptions.contentMaxWidth) === null || _themeOptions$content2 === void 0 ? void 0 : _themeOptions$content2.md) || '100%'
         },
         lg: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content3 = themeOptions.contentMaxWidth) === null || _themeOptions$content3 === void 0 ? void 0 : _themeOptions$content3.lg) || '100%'
+          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content3 = themeOptions.contentMaxWidth) === null || _themeOptions$content3 === void 0 ? void 0 : _themeOptions$content3.lg) || '100%'
         },
         sm: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content4 = themeOptions.contentMaxWidth) === null || _themeOptions$content4 === void 0 ? void 0 : _themeOptions$content4.sm) || '100%'
+          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content4 = themeOptions.contentMaxWidth) === null || _themeOptions$content4 === void 0 ? void 0 : _themeOptions$content4.sm) || '100%'
         },
         xl: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content5 = themeOptions.contentMaxWidth) === null || _themeOptions$content5 === void 0 ? void 0 : _themeOptions$content5.xl) || '100%'
+          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content5 = themeOptions.contentMaxWidth) === null || _themeOptions$content5 === void 0 ? void 0 : _themeOptions$content5.xl) || '100%'
         }
       })
     }

package/lib/PriceLockup/PriceLockup.js

@@ -92,7 +92,15 @@ const selectBottomTextTypographyTokens = _ref6 => {
     lineHeight: bottomTextLineHeight
   };
 };
-const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
+const selectContainertokens = _ref7 => {
+  let {
+    alignItemsText
+  } = _ref7;
+  return {
+    alignItems: alignItemsText
+  };
+};
+const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -109,7 +117,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     tokens: priceLockupTokens,
     variant = {},
     ...rest
-  } = _ref7;
+  } = _ref8;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     footnoteMarginTop,
@@ -134,7 +142,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens);
   const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-    style: [staticStyles.priceLockupContainer],
+    style: [staticStyles.priceLockupContainer, selectContainertokens(themeTokens)],
     ref: ref,
     ...selectProps(rest),
     children: [topText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/Progress/Progress.js

@@ -18,14 +18,16 @@ const selectProgressStyles = _ref => {
     borderWidth,
     borderColor,
     borderRadius,
-    height
+    height,
+    shadow
   } = _ref;
   return {
     backgroundColor,
     borderWidth,
     borderColor,
     borderRadius,
-    height
+    height,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow)
   };
 };
 
@@ -45,6 +47,7 @@ const selectProgressStyles = _ref => {
  *   - `borderRadius` for the rounded corners,
  *   - `borderWidth` to change the border width.
  *   - `height` to control the height of the progress bars displayed within the progress bar container.
+ *   - `shadow` to apply a box shadow to the progress bar container.
  *
  * ## Variants
  *

package/lib/Progress/ProgressBar.js

@@ -20,13 +20,15 @@ const selectBarStyles = (_ref, percentage) => {
     backgroundColor,
     borderRadius,
     outlineWidth,
-    outlineColor
+    outlineColor,
+    shadow
   } = _ref;
   return {
     backgroundColor,
     borderRadius,
     outlineWidth,
     outlineColor,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow),
     width: `${percentage}%`
   };
 };
@@ -46,6 +48,7 @@ const selectBarStyles = (_ref, percentage) => {
  *   - `borderRadius` for the rounded corners,
  *   - `outlineColor` to control the color of the border (outline),
  *   - `outlineWidth` to change the outline width.
+ *   - `shadow` to apply a box shadow to the progress bar.
  *
  * ## Variants
  *