@telus-uds/components-base 1.95.0 → 1.97.0

package/lib-module/Tooltip/Tooltip.native.js

@@ -119,9 +119,10 @@ const selectArrowStyles = (_ref4, _ref5) => {
   };
 };
 const selectTextStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
-const defaultControl = (pressableState, variant) => /*#__PURE__*/_jsx(TooltipButton, {
+const defaultControl = (pressableState, variant, tokens) => /*#__PURE__*/_jsx(TooltipButton, {
   pressableState: pressableState,
-  variant: variant
+  variant: variant,
+  tokens: tokens
 });
 
 /**
@@ -150,6 +151,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     variant,
     inline = false,
     nativeID,
+    activateOnHover = false,
+    tooltipButtonTokens,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = React.useState(false);
@@ -250,6 +253,31 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     }
     setTooltipPosition(updatedPosition);
   }, [isOpen, position, tooltipDimensions, controlLayout, windowDimensions, arrowWidth, arrowOffset, tooltipPosition]);
+  React.useEffect(() => {
+    if (Platform.OS !== 'web') {
+      return undefined;
+    }
+    const handleHover = event => {
+      if (activateOnHover) {
+        const isInsideControl = controlRef.current && controlRef.current.contains(event.target);
+        if (isInsideControl) {
+          if (!isOpen) {
+            setIsOpen(!isOpen);
+          }
+        } else {
+          close();
+        }
+      }
+    };
+    document.addEventListener('mouseover', handleHover, {
+      capture: true
+    });
+    return () => {
+      document.removeEventListener('mouseover', handleHover, {
+        capture: true
+      });
+    };
+  }, [controlLayout, activateOnHover, isOpen, onPress]);
   const control = children !== undefined ? children : defaultControl;
   const pressableStyles = control === defaultControl ? Platform.select({
     web: {
@@ -278,7 +306,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       accessibilityLabel: getCopy('a11yText'),
       accessibilityRole: "button",
       nativeID: nativeID,
-      children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
+      children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant, tooltipButtonTokens) : control
     }), isOpen && /*#__PURE__*/_jsx(Backdrop, {
       onPress: close,
       children: /*#__PURE__*/_jsxs(View, {

package/lib-module/Tooltip/shared.js

@@ -30,6 +30,11 @@ const propTypes = {
    * The `id` of the tooltip button.
    */
   nativeID: PropTypes.string,
+  /**
+   * Set to `true` to open the tooltip on hover
+   */
+  activateOnHover: PropTypes.bool,
+  tooltipButtonTokens: getTokensPropType('TooltipButton'),
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 };

package/lib-module/Typography/Typography.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
 import { useResponsiveThemeTokens, useTheme, useThemeTokens } from '../ThemeProvider';
 import { applyTextStyles } from '../ThemeProvider/utils';
 import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, textProps, viewProps, getA11yPropsFromHtmlTag, StyleSheet, createMediaQueryStyles } from '../utils';
@@ -39,9 +40,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.forwardRef((_ref2, ref) => {
+const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     variant,
@@ -54,7 +68,7 @@ const Typography = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     dataSet,
     strikeThrough = false,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const viewport = useViewport();
   const {
     themeOptions
@@ -101,8 +115,8 @@ const Typography = /*#__PURE__*/React.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,
@@ -136,22 +150,31 @@ const Typography = /*#__PURE__*/React.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.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.OS === 'ios' || Platform.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.cloneElement(isMobile && isSubSup ? /*#__PURE__*/_jsx(View, {
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [childStyles, mobileStyles],
+        children: child.props.children
+      })
+    }) : child, {
+      style: {
+        ...childStyles,
+        ...defaultStyles
+      }
+    });
+    return sanitizedChild;
   };
   const sanitizeChildren = () => {
     if (Array.isArray(children)) {

package/lib-module/index.js

@@ -71,6 +71,6 @@ export { default as BaseProvider } from './BaseProvider';
 export { useHydrationContext } from './BaseProvider/HydrationContext';
 export { default as Validator } from './Validator';
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
-export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, useThemeTokensCallback, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider';
+export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, useThemeTokensCallback, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken, useResponsiveThemeTokens } from './ThemeProvider';
 export * from './utils';
 export { default as Portal } from './Portal';

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.64.0",
+    "@telus-uds/system-theme-tokens": "^2.66.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -86,6 +86,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.95.0",
+  "version": "1.97.0",
   "types": "types/index.d.ts"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -135,6 +135,8 @@ const Autocomplete = React.forwardRef(
     // When it's nested, selected value
     const [nestedSelectedValue, setNestedSelectedValue] = React.useState(null)
 
+    const [isInputVisible, setIsInputVisible] = React.useState(true)
+
     const { supportsProps, ...selectedProps } = selectProps(rest)
     const { hint, label: inputLabel } = supportsProps
     const hintExpansionEnabled = isFocused && helpText && !currentValue
@@ -244,6 +246,32 @@ const Autocomplete = React.forwardRef(
       }
     }, [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) => {
       if (
         (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27')) ||
@@ -313,7 +341,18 @@ const Autocomplete = React.forwardRef(
                 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}
@@ -324,7 +363,7 @@ const Autocomplete = React.forwardRef(
             )
           }}
         </InputSupports>
-        {(isExpanded || hintExpansionEnabled) && (
+        {(isExpanded || hintExpansionEnabled) && isInputVisible && (
           <>
             <Listbox.Overlay
               overlaidPosition={overlaidPosition}

package/src/Card/CardBase.jsx

@@ -21,6 +21,7 @@ const selectStyles = ({
   paddingTop,
   minWidth,
   shadow,
+  backgroundGradient,
   gradient
 }) => {
   return {
@@ -42,6 +43,11 @@ const selectStyles = ({
           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/src/Carousel/Carousel.jsx

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

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -20,43 +20,37 @@ const selectContainerStyle = ({
   totalItems,
   enablePeeking,
   peekingMarginLeft,
-  peekingMarginRight,
   peekingFirstSpace,
   peekingLastSpace,
   peekingMiddleSpace,
   peekingGap,
   hidden
 }) => {
-  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) {
-    if (isActive) {
-      adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace)
-    } else if (isMiddle) {
-      adjustedWidth = width - peekingGap
-    }
+    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace)
+    const isFirst = elementIndex === 0
+    const isActive = activeIndex === elementIndex
 
-    if (isFirst) {
-      if (isActive) {
+    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
     }
   }
 

package/src/InputLabel/InputLabel.jsx

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

package/src/List/ListItemBase.jsx

@@ -107,7 +107,12 @@ const staticStyles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row'
   },
-  titleAndContentContainer: { flexDirection: 'column', flexShrink: 1 }
+  titleAndContentContainer: {
+    flexDirection: 'column',
+    flexShrink: 1,
+    flexGrow: 1,
+    textAlign: 'justify'
+  }
 })
 
 ListItemBase.propTypes = {

package/src/Listbox/GroupControl.jsx

@@ -48,6 +48,11 @@ const GroupControl = React.forwardRef(({ expanded, pressed, hover, focus, label,
     itemOutline,
     groupHeight
   } = tokens
+
+  const getTextStyles = () => ({
+    color: groupColor
+  })
+
   return (
     <View
       onPress={() => setSelectedId(id)}
@@ -71,7 +76,7 @@ const GroupControl = React.forwardRef(({ expanded, pressed, hover, focus, label,
       ]}
       ref={ref}
     >
-      <Text>{label}</Text>
+      <Text style={getTextStyles()}>{label}</Text>
       <Spacer space={1} direction="row" />
       <Icon
         icon={tokens.groupIcon}

package/src/Modal/Modal.jsx

@@ -121,6 +121,8 @@ const Modal = React.forwardRef(
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth })
     const modalRef = useScrollBlocking(isOpen)
+    const modalBodyRef = React.useRef(ref)
+    const modalContentRef = React.useRef(null)
 
     const { closeIcon: CloseIconComponent } = themeTokens
 
@@ -135,6 +137,32 @@ const Modal = React.forwardRef(
       if (event.key === 'Escape') onClose()
     }
 
+    const manageFocus = React.useCallback(
+      (event) => {
+        if (event.key === 'Tab') {
+          const focusableElements = Array.from(
+            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`.
     const showCloseButton = closeButton !== null
@@ -145,22 +173,20 @@ const Modal = React.forwardRef(
 
     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) {
+        modalContentRef?.current?.focus()
+      }
+    }, [isOpen, modalContentRef?.current?.focus])
 
     if (!isOpen) {
       return null
@@ -174,7 +200,7 @@ const Modal = React.forwardRef(
             pointerEvents="box-none" // don't capture backdrop press events
           >
             <View
-              ref={ref}
+              ref={modalBodyRef}
               style={[staticStyles.modal, selectModalStyles(themeTokens)]}
               onKeyUp={handleKeyUp}
             >
@@ -230,7 +256,7 @@ const Modal = React.forwardRef(
 
     if (Platform.OS === 'web') {
       return (
-        <WebModal {...selectProps(rest)}>
+        <WebModal {...selectProps(rest)} ref={modalContentRef}>
           {content}
           <View accessibilityRole="button" ref={focusTrapRef} />
         </WebModal>

package/src/Modal/ModalContent.jsx

@@ -60,6 +60,7 @@ const ModalContent = React.forwardRef(
       borderColor,
       gap,
       direction,
+      footerTopWidth,
       hasBorder
     }) => ({
       flexDirection: direction,
@@ -70,8 +71,8 @@ const ModalContent = React.forwardRef(
       paddingLeft,
       paddingRight,
       paddingTop,
-      borderTopColor: hasBorder ? borderColor : 'transparent',
-      borderTopWidth: hasBorder ? 1 : 0
+      borderTopWidth: footerTopWidth > 0 ? footerTopWidth : (hasBorder && 1) || 0,
+      borderTopColor: borderColor
     })
 
     const headingStyles = {
@@ -155,7 +156,7 @@ const styles = StyleSheet.create({
     minHeight: Platform.OS === 'web' ? '100%' : 'auto'
   },
   cancelButton: {
-    flex: 1
+    display: 'flex'
   }
 })
 

package/src/Modal/WebModal.jsx

@@ -17,7 +17,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const WebModal = React.forwardRef(({ children, ...rest }, ref) => {
   return (
     <Portal>
-      <View style={staticStyles.container} {...selectProps(rest)} ref={ref}>
+      <View style={staticStyles.container} {...selectProps(rest)} focusable={true} ref={ref}>
         <div style={staticStyles.content} role="dialog" aria-modal={true}>
           {children}
         </div>

package/src/Notification/Notification.jsx

@@ -102,11 +102,11 @@ const getMediaQueryStyles = (
       flexShrink: 1,
       justifyContent: 'space-between',
       ...createMediaQueryStyles({
-        xs: { width: themeOptions?.contentMaxWidth?.xs || '100%' },
-        md: { width: themeOptions?.contentMaxWidth?.md || '100%' },
-        lg: { width: themeOptions?.contentMaxWidth?.lg || '100%' },
-        sm: { width: themeOptions?.contentMaxWidth?.sm || '100%' },
-        xl: { width: themeOptions?.contentMaxWidth?.xl || '100%' }
+        xs: { maxWidth: themeOptions?.contentMaxWidth?.xs || '100%' },
+        md: { maxWidth: themeOptions?.contentMaxWidth?.md || '100%' },
+        lg: { maxWidth: themeOptions?.contentMaxWidth?.lg || '100%' },
+        sm: { maxWidth: themeOptions?.contentMaxWidth?.sm || '100%' },
+        xl: { maxWidth: themeOptions?.contentMaxWidth?.xl || '100%' }
       })
     }
   })

package/src/Pagination/Pagination.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { View, Text, StyleSheet } from 'react-native'
 
 import {
@@ -42,6 +43,7 @@ const Pagination = React.forwardRef(
       sideButtonTokens,
       LinkRouter,
       linkRouterProps,
+      numberOfPagesBeforeEllipsis = 4,
       ...rest
     },
     ref
@@ -80,7 +82,8 @@ const Pagination = React.forwardRef(
       shouldRenderEllipsis
     } = usePagination({
       items,
-      truncateAbove
+      truncateAbove,
+      numberOfPagesBeforeEllipsis
     })
 
     const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions)
@@ -220,7 +223,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({

package/src/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/src/Pagination/usePagination.js

@@ -1,11 +1,13 @@
+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({ items, truncateAbove }) {
+function usePagination({ items, truncateAbove, numberOfPagesBeforeEllipsis }) {
   const activeItemIndex = Math.max(
     items.findIndex((item) => item.props.isActive),
     0 // default to the first item if none is marked as active
@@ -16,8 +18,17 @@ function usePagination({ items, truncateAbove }) {
     return { onPress, href, hrefAttrs, variant, 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/src/PriceLockup/PriceLockup.jsx

@@ -61,6 +61,10 @@ const selectBottomTextTypographyTokens = ({ bottomTextFontSize, bottomTextLineHe
   lineHeight: bottomTextLineHeight
 })
 
+const selectContainertokens = ({ alignItemsText }) => ({
+  alignItems: alignItemsText
+})
+
 const PriceLockup = React.forwardRef(
   (
     {
@@ -106,7 +110,11 @@ const PriceLockup = React.forwardRef(
     const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens)
 
     return (
-      <View style={[staticStyles.priceLockupContainer]} ref={ref} {...selectProps(rest)}>
+      <View
+        style={[staticStyles.priceLockupContainer, selectContainertokens(themeTokens)]}
+        ref={ref}
+        {...selectProps(rest)}
+      >
         {topText ? (
           <View style={staticStyles.topText}>
             {renderTypography(topText, topTextTypographyTokens)}