@telus-uds/components-base 1.95.0 → 1.96.0

package/lib-module/Modal/ModalContent.js

@@ -156,7 +156,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/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
  *

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.65.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.96.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/List/ListItemBase.jsx

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

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

@@ -155,7 +155,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/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)}

package/src/Progress/Progress.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
-import { useThemeTokens } from '../ThemeProvider'
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -12,13 +12,15 @@ const selectProgressStyles = ({
   borderWidth,
   borderColor,
   borderRadius,
-  height
+  height,
+  shadow
 }) => ({
   backgroundColor,
   borderWidth,
   borderColor,
   borderRadius,
-  height
+  height,
+  ...applyShadowToken(shadow)
 })
 
 /**
@@ -37,6 +39,7 @@ const selectProgressStyles = ({
  *   - `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/src/Progress/ProgressBar.jsx

@@ -3,19 +3,20 @@ import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
 import ProgressBarBackground from './ProgressBarBackground'
-import { useThemeTokens } from '../ThemeProvider'
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectBarStyles = (
-  { backgroundColor, borderRadius, outlineWidth, outlineColor },
+  { backgroundColor, borderRadius, outlineWidth, outlineColor, shadow },
   percentage
 ) => ({
   backgroundColor,
   borderRadius,
   outlineWidth,
   outlineColor,
+  ...applyShadowToken(shadow),
   width: `${percentage}%`
 })
 
@@ -34,6 +35,7 @@ const selectBarStyles = (
  *   - `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
  *