@telus-uds/components-base 1.95.0 → 1.97.0

package/lib/Typography/Typography.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../ThemeProvider/utils");
 var _utils2 = require("../utils");
@@ -45,9 +46,22 @@ const selectTextStyles = (_ref, themeOptions) => {
     gradient
   });
 };
+const HALF_FONT_SIZE = 2;
+const QUARTER_FONT_SIZE = 4;
+const selectMobileSubSupStyles = (_ref2, type) => {
+  let {
+    fontSize
+  } = _ref2;
+  return {
+    fontSize: fontSize / HALF_FONT_SIZE,
+    lineHeight: fontSize,
+    position: 'relative',
+    top: type === 'sub' ? fontSize / QUARTER_FONT_SIZE : -fontSize / QUARTER_FONT_SIZE
+  };
+};
 
 // General-purpose flexible theme-neutral base component for text
-const Typography = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     children,
     variant,
@@ -60,7 +74,7 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     dataSet,
     strikeThrough = false,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     themeOptions
@@ -107,8 +121,8 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let textStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref3) => {
-      let [vp, viewportTokens] = _ref3;
+    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp, viewportTokens] = _ref4;
       acc[vp] = selectTextStyles({
         textAlign: align,
         textDecorationLine,
@@ -142,22 +156,31 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...selectContainerProps(rest)
   };
   const resetTagStyling = child => {
-    if (typeof child === 'object' && ((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
-      var _child$props;
-      const childStyles = (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
-      const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize;
-      const sanitizedChild = /*#__PURE__*/_react.default.cloneElement(child, {
-        style: {
-          ...childStyles,
-          ...(supFontSize ? {
-            fontSize: supFontSize
-          } : {}),
-          lineHeight: 0
-        }
-      });
-      return sanitizedChild;
+    var _child$props;
+    if (typeof child !== 'object' || !((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
+      return child;
     }
-    return child;
+    const childStyles = (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
+    const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize;
+    const isMobile = _Platform.default.OS === 'ios' || _Platform.default.OS === 'android';
+    const isSubSup = (child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup';
+    const mobileStyles = isMobile && isSubSup ? selectMobileSubSupStyles(themeTokens, child === null || child === void 0 ? void 0 : child.type) : {};
+    const defaultStyles = !isMobile && isSubSup ? {
+      fontSize: supFontSize,
+      lineHeight: 0
+    } : {};
+    const sanitizedChild = /*#__PURE__*/_react.default.cloneElement(isMobile && isSubSup ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: [childStyles, mobileStyles],
+        children: child.props.children
+      })
+    }) : child, {
+      style: {
+        ...childStyles,
+        ...defaultStyles
+      }
+    });
+    return sanitizedChild;
   };
   const sanitizeChildren = () => {
     if (Array.isArray(children)) {

package/lib/index.js

@@ -82,6 +82,7 @@ var _exportNames = {
   applyOuterBorder: true,
   applyTextStyles: true,
   applyShadowToken: true,
+  useResponsiveThemeTokens: true,
   Portal: true
 };
 Object.defineProperty(exports, "A11yInfoProvider", {
@@ -528,6 +529,12 @@ Object.defineProperty(exports, "useHydrationContext", {
     return _HydrationContext.useHydrationContext;
   }
 });
+Object.defineProperty(exports, "useResponsiveThemeTokens", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.useResponsiveThemeTokens;
+  }
+});
 Object.defineProperty(exports, "useSetTheme", {
   enumerable: true,
   get: function () {

package/lib-module/Autocomplete/Autocomplete.js

@@ -139,6 +139,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 
   // When it's nested, selected value
   const [nestedSelectedValue, setNestedSelectedValue] = React.useState(null);
+  const [isInputVisible, setIsInputVisible] = React.useState(true);
   const {
     supportsProps,
     ...selectedProps
@@ -264,6 +265,27 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       }));
     }
   }, [nestedSelectedValue, items]);
+  React.useEffect(() => {
+    if (Platform.OS === 'ios' || Platform.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))) {
@@ -320,7 +342,19 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           readOnly: readOnly,
           ref: inputRef,
           ...(Platform.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,
@@ -333,7 +367,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           })
         });
       }
-    }), (isExpanded || hintExpansionEnabled) && /*#__PURE__*/_jsxs(_Fragment, {
+    }), (isExpanded || hintExpansionEnabled) && isInputVisible && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Listbox.Overlay, {
         overlaidPosition: overlaidPosition,
         isReady: isReady,

package/lib-module/Card/CardBase.js

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

package/lib-module/Carousel/Carousel.js

@@ -100,7 +100,7 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
   };
 };
 const getPeekingProps = viewport => {
-  if (viewport === 'xs' || viewport === 'sm') {
+  if (viewport === 'xs' || viewport === 'sm' || viewport === 'md') {
     return {
       peekingFirstSpace: 48,
       peekingGap: 16,

package/lib-module/Carousel/CarouselItem/CarouselItem.js

@@ -14,39 +14,35 @@ const selectContainerStyle = _ref => {
     totalItems,
     enablePeeking,
     peekingMarginLeft,
-    peekingMarginRight,
     peekingFirstSpace,
     peekingLastSpace,
     peekingMiddleSpace,
     peekingGap,
     hidden
   } = _ref;
-  const isFirst = elementIndex === 0;
-  const isLast = elementIndex === totalItems - 1;
-  const isMiddle = !isFirst && !isLast;
-  const isActive = activeIndex === elementIndex;
   let adjustedWidth = width;
   let marginLeft = 0;
-  let marginRight = 0;
+  const marginRight = 0;
   if (enablePeeking) {
+    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace);
+    const isFirst = elementIndex === 0;
+    const isActive = activeIndex === elementIndex;
     if (isActive) {
-      adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace);
-    } else if (isMiddle) {
-      adjustedWidth = width - peekingGap;
-    }
-    if (isFirst) {
-      if (isActive) {
+      if (isFirst) {
         marginLeft = peekingMarginLeft;
-      } else if (activeIndex === totalItems - 1) {
-        marginLeft = peekingLastSpace;
       } else {
-        marginLeft = peekingMiddleSpace;
+        marginLeft = peekingGap;
+      }
+    } else if (isFirst) {
+      marginLeft = peekingMarginLeft + peekingGap + peekingFirstSpace + peekingMiddleSpace;
+      if (activeIndex > 1) {
+        marginLeft += (peekingGap + peekingMiddleSpace * 2) * (activeIndex - 1);
+      }
+      if (activeIndex === totalItems - 1) {
+        marginLeft += peekingLastSpace - peekingMiddleSpace;
       }
-    }
-    if (isLast && isActive) {
-      marginRight = peekingMarginRight;
     } else {
-      marginRight = peekingGap;
+      marginLeft = peekingGap;
     }
   }
   const style = {

package/lib-module/InputLabel/InputLabel.js

@@ -129,8 +129,7 @@ export default InputLabel;
 const staticStyles = StyleSheet.create({
   container: {
     flexShrink: 1,
-    flexDirection: 'row',
-    alignItems: 'baseline'
+    flexDirection: 'row'
   },
   label: {
     flexShrink: 1
@@ -140,7 +139,7 @@ const staticStyles = StyleSheet.create({
     flexShrink: 0
   },
   tooltipAlign: {
-    alignSelf: 'flex-start',
+    alignSelf: 'center',
     justifyContent: 'center'
   }
 });

package/lib-module/List/ListItemBase.js

@@ -129,7 +129,9 @@ const staticStyles = StyleSheet.create({
   },
   titleAndContentContainer: {
     flexDirection: 'column',
-    flexShrink: 1
+    flexShrink: 1,
+    flexGrow: 1,
+    textAlign: 'justify'
   }
 });
 ListItemBase.propTypes = {

package/lib-module/Listbox/GroupControl.js

@@ -56,6 +56,9 @@ const GroupControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     itemOutline,
     groupHeight
   } = tokens;
+  const getTextStyles = () => ({
+    color: groupColor
+  });
   return /*#__PURE__*/_jsxs(View, {
     onPress: () => setSelectedId(id),
     style: [styles.controlWrapper, {
@@ -75,6 +78,7 @@ const GroupControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }],
     ref: ref,
     children: [/*#__PURE__*/_jsx(Text, {
+      style: getTextStyles(),
       children: label
     }), /*#__PURE__*/_jsx(Spacer, {
       space: 1,

package/lib-module/Modal/Modal.js

@@ -99,6 +99,7 @@ const selectScrollViewStyles = () => ({
  * - Don’t use modals consecutively
  */
 const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+  var _modalContentRef$curr2;
   let {
     children,
     isOpen,
@@ -127,6 +128,8 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     maxWidth
   });
   const modalRef = useScrollBlocking(isOpen);
+  const modalBodyRef = React.useRef(ref);
+  const modalContentRef = React.useRef(null);
   const {
     closeIcon: CloseIconComponent
   } = themeTokens;
@@ -141,6 +144,25 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const handleKeyUp = event => {
     if (event.key === 'Escape') onClose();
   };
+  const manageFocus = React.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`.
@@ -151,22 +173,20 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const closeButtonRef = React.useRef(null);
   React.useEffect(() => {
     if (Platform.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) {
-          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.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;
   }
@@ -179,7 +199,7 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
         pointerEvents: "box-none" // don't capture backdrop press events
         ,
         children: /*#__PURE__*/_jsxs(View, {
-          ref: ref,
+          ref: modalBodyRef,
           style: [staticStyles.modal, selectModalStyles(themeTokens)],
           onKeyUp: handleKeyUp,
           children: [showCloseButton && /*#__PURE__*/_jsx(View, {
@@ -224,6 +244,7 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   if (Platform.OS === 'web') {
     return /*#__PURE__*/_jsxs(WebModal, {
       ...selectProps(rest),
+      ref: modalContentRef,
       children: [content, /*#__PURE__*/_jsx(View, {
         accessibilityRole: "button",
         ref: focusTrapRef

package/lib-module/Modal/ModalContent.js

@@ -66,6 +66,7 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       borderColor,
       gap,
       direction,
+      footerTopWidth,
       hasBorder
     } = _ref3;
     return {
@@ -77,8 +78,8 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       paddingLeft,
       paddingRight,
       paddingTop,
-      borderTopColor: hasBorder ? borderColor : 'transparent',
-      borderTopWidth: hasBorder ? 1 : 0
+      borderTopWidth: footerTopWidth > 0 ? footerTopWidth : hasBorder && 1 || 0,
+      borderTopColor: borderColor
     };
   };
   const headingStyles = {
@@ -156,7 +157,7 @@ const styles = StyleSheet.create({
     minHeight: Platform.OS === 'web' ? '100%' : 'auto'
   },
   cancelButton: {
-    flex: 1
+    display: 'flex'
   }
 });
 ModalContent.propTypes = {

package/lib-module/Modal/WebModal.js

@@ -24,6 +24,7 @@ const WebModal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children: /*#__PURE__*/_jsx(View, {
       style: staticStyles.container,
       ...selectProps(rest),
+      focusable: true,
       ref: ref,
       children: /*#__PURE__*/_jsx("div", {
         style: staticStyles.content,

package/lib-module/Notification/Notification.js

@@ -99,19 +99,19 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
       justifyContent: 'space-between',
       ...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-module/Pagination/Pagination.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import Text from "react-native-web/dist/exports/Text";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -39,6 +40,7 @@ const Pagination = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     sideButtonTokens,
     LinkRouter,
     linkRouterProps,
+    numberOfPagesBeforeEllipsis = 4,
     ...rest
   } = _ref2;
   const viewport = useViewport();
@@ -78,7 +80,8 @@ const Pagination = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     shouldRenderEllipsis
   } = usePagination({
     items,
-    truncateAbove
+    truncateAbove,
+    numberOfPagesBeforeEllipsis
   });
   const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions);
   const ellipisContainerStyles = StyleSheet.create({
@@ -199,7 +202,11 @@ Pagination.propTypes = {
   /**
    * Custom tokens for `PaginationSideButton`
    */
-  sideButtonTokens: getTokensPropType('PaginationSideButton')
+  sideButtonTokens: getTokensPropType('PaginationSideButton'),
+  /**
+   * The number of pages before the ellipsis is shown
+   */
+  numberOfPagesBeforeEllipsis: PropTypes.number
 };
 const staticStyles = StyleSheet.create({
   container: {

package/lib-module/Pagination/constants.js

@@ -0,0 +1,3 @@
+export const TRUNCATE_ABOVE_VALUE = 4;
+export const MIN_PAGES_TO_SHOW = 3;
+export const DEFAULT_PAGE_TO_SHOW_VALUE = 1;

package/lib-module/Pagination/usePagination.js

@@ -1,14 +1,17 @@
+import { DEFAULT_PAGE_TO_SHOW_VALUE, MIN_PAGES_TO_SHOW, TRUNCATE_ABOVE_VALUE } from './constants';
 /**
  * Handles configurable truncating of pagination items.
  *
  * @param {object} props
  * @param {React.Element[]} items
  * @param {number} truncateAbove
+ * @param {number} numberOfPagesBeforeEllipsis
  */
 function usePagination(_ref) {
   let {
     items,
-    truncateAbove
+    truncateAbove,
+    numberOfPagesBeforeEllipsis
   } = _ref;
   const activeItemIndex = Math.max(items.findIndex(item => item.props.isActive), 0 // default to the first item if none is marked as active
   );
@@ -30,8 +33,15 @@ function usePagination(_ref) {
       tokens
     };
   };
-  const windowSize = truncateAbove > 4 ? 3 : 1;
-  const truncateEnabled = items.length > truncateAbove;
+  let windowSize;
+  if (numberOfPagesBeforeEllipsis >= 1 && numberOfPagesBeforeEllipsis < items.length) {
+    windowSize = numberOfPagesBeforeEllipsis;
+  } else if (truncateAbove > TRUNCATE_ABOVE_VALUE) {
+    windowSize = MIN_PAGES_TO_SHOW;
+  } else {
+    windowSize = DEFAULT_PAGE_TO_SHOW_VALUE;
+  }
+  const truncateEnabled = items.length > windowSize;
   const truncateWindowStart = windowSize;
   const truncateWindowEnd = items.length - 1 - windowSize;
 

package/lib-module/PriceLockup/PriceLockup.js

@@ -87,7 +87,15 @@ const selectBottomTextTypographyTokens = _ref6 => {
     lineHeight: bottomTextLineHeight
   };
 };
-const PriceLockup = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+const selectContainertokens = _ref7 => {
+  let {
+    alignItemsText
+  } = _ref7;
+  return {
+    alignItems: alignItemsText
+  };
+};
+const PriceLockup = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -104,7 +112,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     tokens: priceLockupTokens,
     variant = {},
     ...rest
-  } = _ref7;
+  } = _ref8;
   const viewport = useViewport();
   const {
     footnoteMarginTop,
@@ -129,7 +137,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens);
   const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens);
   return /*#__PURE__*/_jsxs(View, {
-    style: [staticStyles.priceLockupContainer],
+    style: [staticStyles.priceLockupContainer, selectContainertokens(themeTokens)],
     ref: ref,
     ...selectProps(rest),
     children: [topText ? /*#__PURE__*/_jsx(View, {

package/lib-module/Progress/Progress.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
-import { useThemeTokens } from '../ThemeProvider';
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -11,14 +11,16 @@ const selectProgressStyles = _ref => {
     borderWidth,
     borderColor,
     borderRadius,
-    height
+    height,
+    shadow
   } = _ref;
   return {
     backgroundColor,
     borderWidth,
     borderColor,
     borderRadius,
-    height
+    height,
+    ...applyShadowToken(shadow)
   };
 };
 
@@ -38,6 +40,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-module/Progress/ProgressBar.js

@@ -4,7 +4,7 @@ import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
 import ProgressBarBackground from './ProgressBarBackground';
-import { useThemeTokens } from '../ThemeProvider';
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -13,13 +13,15 @@ const selectBarStyles = (_ref, percentage) => {
     backgroundColor,
     borderRadius,
     outlineWidth,
-    outlineColor
+    outlineColor,
+    shadow
   } = _ref;
   return {
     backgroundColor,
     borderRadius,
     outlineWidth,
     outlineColor,
+    ...applyShadowToken(shadow),
     width: `${percentage}%`
   };
 };
@@ -39,6 +41,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
  *