@telus-uds/components-base 1.78.0 → 1.79.0

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 23 Feb 2024 19:32:18 GMT and should not be manually modified.
+This log was last generated on Wed, 06 Mar 2024 00:02:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.79.0
+
+Wed, 06 Mar 2024 00:02:37 GMT
+
+### Minor changes
+
+- adjusting Typography to use the new token gradient (hoss.agina@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.53.0
+
+### Patches
+
+- prevent onchange event from being fired twice on select component (guillermo.peitzner@telus.com)
+- fix step-tracker component visual states (guillermo.peitzner@telus.com)
+
+## 1.78.1
+
+Thu, 29 Feb 2024 00:05:08 GMT
+
+### Patches
+
+- fix notification component icon alignment" (guillermo.peitzner@telus.com)
+- fix box component background image on mobile devices (guillermo.peitzner@telus.com)
+- fix carousel component icon background color (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.52.1
+
 ## 1.78.0
 
-Fri, 23 Feb 2024 19:32:18 GMT
+Fri, 23 Feb 2024 19:39:17 GMT
 
 ### Minor changes
 

package/lib/Box/Box.js

@@ -92,7 +92,9 @@ const setBackgroundImage = _ref2 => {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: containedViewStyle,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
-          source: src,
+          source: {
+            uri: src
+          },
           alt: alt,
           style: staticStyles.containedImage,
           accessibilityIgnoresInvertColors: true
@@ -101,7 +103,9 @@ const setBackgroundImage = _ref2 => {
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
-    source: src,
+    source: {
+      uri: src
+    },
     alt: alt,
     style: staticStyles.backgroundImageContainer,
     resizeMode: backgroundImageResizeMode,

package/lib/Carousel/Carousel.js

@@ -70,6 +70,14 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
   }
   return styles;
 };
+const selectIconStyles = _ref => {
+  let {
+    iconBackgroundColor
+  } = _ref;
+  return {
+    backgroundColor: iconBackgroundColor
+  };
+};
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
 /**
@@ -126,7 +134,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
   - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons
   - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area
  */
-const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     tokens,
     variant,
@@ -157,7 +165,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     accessibilityLiveRegion = 'polite',
     copy,
     ...rest
-  } = _ref;
+  } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Carousel', tokens, variant, {
     viewport
@@ -214,7 +222,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const animatedY = _react.default.useRef(0);
   const isFirstSlide = !activeIndex;
   const isLastSlide = activeIndex + 1 >= children.length;
-  const onContainerLayout = _ref2 => {
+  const onContainerLayout = _ref3 => {
     let {
       nativeEvent: {
         layout: {
@@ -223,7 +231,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           width
         }
       }
-    } = _ref2;
+    } = _ref3;
     return setContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -231,14 +239,14 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       width
     }));
   };
-  const onPreviousNextNavigationButtonLayout = _ref3 => {
+  const onPreviousNextNavigationButtonLayout = _ref4 => {
     let {
       nativeEvent: {
         layout: {
           width
         }
       }
-    } = _ref3;
+    } = _ref4;
     return setPreviousNextNavigationButtonWidth(width);
   };
   const updateOffset = _react.default.useCallback(() => {
@@ -350,16 +358,16 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
   }), [containerLayout.width, updateIndex, updateOffset, animate, isSwipeAllowed, activeIndex, minDistanceForAction, handleAnimationStart, minDistanceToCapture, pan.x]);
   _react.default.useEffect(() => {
-    pan.x.addListener(_ref4 => {
+    pan.x.addListener(_ref5 => {
       let {
         value
-      } = _ref4;
+      } = _ref5;
       animatedX.current = value;
     });
-    pan.y.addListener(_ref5 => {
+    pan.y.addListener(_ref6 => {
       let {
         value
-      } = _ref5;
+      } = _ref6;
       animatedY.current = value;
     });
     return () => {
@@ -453,7 +461,8 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           icon: previousIcon,
           onPress: goToPrev,
           variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex)
+          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex),
+          tokens: selectIconStyles(themeTokens)
         })
       }) : null, Boolean(skipLinkHref) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkipLink.default, {
         ref: firstFocusRef,
@@ -499,7 +508,8 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           icon: nextIcon,
           onPress: goToNext,
           variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2)
+          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2),
+          tokens: selectIconStyles(themeTokens)
         })
       }) : null]
     }), showPanelNavigation ? activePanelNavigation : null]

package/lib/Notification/Notification.js

@@ -49,7 +49,7 @@ const selectIconContainerStyles = _ref2 => {
   } = _ref2;
   return {
     paddingRight: iconGap,
-    placeContent: 'center'
+    placeContent: 'start'
   };
 };
 const selectDismissIconProps = _ref3 => {

package/lib/Select/Select.js

@@ -255,7 +255,7 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
           onBlur: handleBlur,
           onMouseOver: handleMouseOver,
           onMouseOut: handleMouseOut,
-          onChange: setValue,
+          onChange: e => setValue(e, null),
           value: currentValue,
           inactive: inactive,
           placeholder: placeholder !== undefined ? {

package/lib/StepTracker/Step.js

@@ -209,11 +209,11 @@ const Step = _ref8 => {
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
         style: [staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)],
         testID: getStepTestID(isCompleted, isCurrent),
-        children: [(isCompleted && completedIcon || isCurrent && !completedIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: selectCurrentInnerStyles(themeTokens)
-        }), isCurrent && completedIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        children: [isCompleted && completedIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           icon: completedIcon,
           tokens: selectCompletedIconTokens(themeTokens)
+        }), (isCurrent && completedIcon || isCurrent && !completedIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectCurrentInnerStyles(themeTokens)
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [staticStyles.connector, !isLast && selectConnectorStyles(themeTokens, isCompleted)]

package/lib/Typography/Typography.js

@@ -30,7 +30,8 @@ const selectTextStyles = (_ref, themeOptions) => {
     textAlign,
     textTransform,
     letterSpacing,
-    textDecorationLine
+    textDecorationLine,
+    gradient
   } = _ref;
   return (0, _utils.applyTextStyles)({
     fontWeight,
@@ -42,7 +43,8 @@ const selectTextStyles = (_ref, themeOptions) => {
     textAlign,
     textTransform,
     letterSpacing,
-    textDecorationLine
+    textDecorationLine,
+    gradient
   });
 };
 
@@ -74,6 +76,36 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   });
   const maxFontSizeMultiplier = enableMediaQueryStyleSheet ? (0, _utils2.getMaxFontMultiplier)(themeTokens[viewport]) : (0, _utils2.getMaxFontMultiplier)(themeTokens);
   const textDecorationLine = strikeThrough ? 'line-through' : 'none';
+  const generateGradientString = gradientObj => {
+    let gradientStr = '';
+    const {
+      type,
+      angle,
+      stops: [stopOne, stopTwo],
+      specification
+    } = gradientObj;
+    if (type === 'radial') {
+      gradientStr = `radial-gradient(${specification}`;
+      gradientStr += `, ${stopOne.color} ${stopOne.stop * 100}%, ${stopTwo.color} ${stopTwo.stop * 100}%`;
+    } else if (type === 'linear') {
+      gradientStr = `linear-gradient(${angle}deg`;
+      if (angle === 135) {
+        gradientStr += `, ${stopOne.color}, 75%, ${stopTwo.color}`;
+      } else {
+        gradientStr += `, ${stopOne.color}, ${stopTwo.color}`;
+      }
+    }
+    gradientStr += ')';
+    return gradientStr;
+  };
+  const getStyleWithGradient = styles => {
+    return styles.gradient ? {
+      ...styles,
+      color: 'transparent',
+      backgroundImage: generateGradientString(styles.gradient),
+      backgroundClip: 'text'
+    } : styles;
+  };
   let textStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
@@ -144,7 +176,7 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ...containerProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       ...resolvedTextProps,
-      style: textStyles,
+      style: getStyleWithGradient(textStyles),
       dataSet: dataSetValue,
       children: sanitizeChildren(children)
     })
@@ -152,7 +184,7 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ref: ref,
     ...containerProps,
     ...resolvedTextProps,
-    style: textStyles,
+    style: getStyleWithGradient(textStyles),
     dataSet: dataSetValue,
     children: sanitizeChildren(children)
   });

package/lib-module/Box/Box.js

@@ -84,7 +84,9 @@ const setBackgroundImage = _ref2 => {
       children: [/*#__PURE__*/_jsx(View, {
         style: containedViewStyle,
         children: /*#__PURE__*/_jsx(Image, {
-          source: src,
+          source: {
+            uri: src
+          },
           alt: alt,
           style: staticStyles.containedImage,
           accessibilityIgnoresInvertColors: true
@@ -93,7 +95,9 @@ const setBackgroundImage = _ref2 => {
     });
   }
   return /*#__PURE__*/_jsx(ImageBackground, {
-    source: src,
+    source: {
+      uri: src
+    },
     alt: alt,
     style: staticStyles.backgroundImageContainer,
     resizeMode: backgroundImageResizeMode,

package/lib-module/Carousel/Carousel.js

@@ -64,6 +64,14 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
   }
   return styles;
 };
+const selectIconStyles = _ref => {
+  let {
+    iconBackgroundColor
+  } = _ref;
+  return {
+    backgroundColor: iconBackgroundColor
+  };
+};
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
@@ -120,7 +128,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
   - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons
   - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area
  */
-const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const Carousel = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     tokens,
     variant,
@@ -151,7 +159,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     accessibilityLiveRegion = 'polite',
     copy,
     ...rest
-  } = _ref;
+  } = _ref2;
   const viewport = useViewport();
   const themeTokens = useThemeTokens('Carousel', tokens, variant, {
     viewport
@@ -208,7 +216,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const animatedY = React.useRef(0);
   const isFirstSlide = !activeIndex;
   const isLastSlide = activeIndex + 1 >= children.length;
-  const onContainerLayout = _ref2 => {
+  const onContainerLayout = _ref3 => {
     let {
       nativeEvent: {
         layout: {
@@ -217,7 +225,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           width
         }
       }
-    } = _ref2;
+    } = _ref3;
     return setContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -225,14 +233,14 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       width
     }));
   };
-  const onPreviousNextNavigationButtonLayout = _ref3 => {
+  const onPreviousNextNavigationButtonLayout = _ref4 => {
     let {
       nativeEvent: {
         layout: {
           width
         }
       }
-    } = _ref3;
+    } = _ref4;
     return setPreviousNextNavigationButtonWidth(width);
   };
   const updateOffset = React.useCallback(() => {
@@ -344,16 +352,16 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   }), [containerLayout.width, updateIndex, updateOffset, animate, isSwipeAllowed, activeIndex, minDistanceForAction, handleAnimationStart, minDistanceToCapture, pan.x]);
   React.useEffect(() => {
-    pan.x.addListener(_ref4 => {
+    pan.x.addListener(_ref5 => {
       let {
         value
-      } = _ref4;
+      } = _ref5;
       animatedX.current = value;
     });
-    pan.y.addListener(_ref5 => {
+    pan.y.addListener(_ref6 => {
       let {
         value
-      } = _ref5;
+      } = _ref6;
       animatedY.current = value;
     });
     return () => {
@@ -447,7 +455,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           icon: previousIcon,
           onPress: goToPrev,
           variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex)
+          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex),
+          tokens: selectIconStyles(themeTokens)
         })
       }) : null, Boolean(skipLinkHref) && /*#__PURE__*/_jsx(SkipLink, {
         ref: firstFocusRef,
@@ -493,7 +502,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           icon: nextIcon,
           onPress: goToNext,
           variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2)
+          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2),
+          tokens: selectIconStyles(themeTokens)
         })
       }) : null]
     }), showPanelNavigation ? activePanelNavigation : null]

package/lib-module/Notification/Notification.js

@@ -41,7 +41,7 @@ const selectIconContainerStyles = _ref2 => {
   } = _ref2;
   return {
     paddingRight: iconGap,
-    placeContent: 'center'
+    placeContent: 'start'
   };
 };
 const selectDismissIconProps = _ref3 => {

package/lib-module/Select/Select.js

@@ -247,7 +247,7 @@ const Select = /*#__PURE__*/forwardRef((_ref8, ref) => {
           onBlur: handleBlur,
           onMouseOver: handleMouseOver,
           onMouseOut: handleMouseOut,
-          onChange: setValue,
+          onChange: e => setValue(e, null),
           value: currentValue,
           inactive: inactive,
           placeholder: placeholder !== undefined ? {

package/lib-module/StepTracker/Step.js

@@ -203,11 +203,11 @@ const Step = _ref8 => {
       }), /*#__PURE__*/_jsxs(View, {
         style: [staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)],
         testID: getStepTestID(isCompleted, isCurrent),
-        children: [(isCompleted && completedIcon || isCurrent && !completedIcon) && /*#__PURE__*/_jsx(View, {
-          style: selectCurrentInnerStyles(themeTokens)
-        }), isCurrent && completedIcon && /*#__PURE__*/_jsx(Icon, {
+        children: [isCompleted && completedIcon && /*#__PURE__*/_jsx(Icon, {
           icon: completedIcon,
           tokens: selectCompletedIconTokens(themeTokens)
+        }), (isCurrent && completedIcon || isCurrent && !completedIcon) && /*#__PURE__*/_jsx(View, {
+          style: selectCurrentInnerStyles(themeTokens)
         })]
       }), /*#__PURE__*/_jsx(View, {
         style: [staticStyles.connector, !isLast && selectConnectorStyles(themeTokens, isCompleted)]

package/lib-module/Typography/Typography.js

@@ -22,7 +22,8 @@ const selectTextStyles = (_ref, themeOptions) => {
     textAlign,
     textTransform,
     letterSpacing,
-    textDecorationLine
+    textDecorationLine,
+    gradient
   } = _ref;
   return applyTextStyles({
     fontWeight,
@@ -34,7 +35,8 @@ const selectTextStyles = (_ref, themeOptions) => {
     textAlign,
     textTransform,
     letterSpacing,
-    textDecorationLine
+    textDecorationLine,
+    gradient
   });
 };
 
@@ -66,6 +68,36 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
   const maxFontSizeMultiplier = enableMediaQueryStyleSheet ? getMaxFontMultiplier(themeTokens[viewport]) : getMaxFontMultiplier(themeTokens);
   const textDecorationLine = strikeThrough ? 'line-through' : 'none';
+  const generateGradientString = gradientObj => {
+    let gradientStr = '';
+    const {
+      type,
+      angle,
+      stops: [stopOne, stopTwo],
+      specification
+    } = gradientObj;
+    if (type === 'radial') {
+      gradientStr = `radial-gradient(${specification}`;
+      gradientStr += `, ${stopOne.color} ${stopOne.stop * 100}%, ${stopTwo.color} ${stopTwo.stop * 100}%`;
+    } else if (type === 'linear') {
+      gradientStr = `linear-gradient(${angle}deg`;
+      if (angle === 135) {
+        gradientStr += `, ${stopOne.color}, 75%, ${stopTwo.color}`;
+      } else {
+        gradientStr += `, ${stopOne.color}, ${stopTwo.color}`;
+      }
+    }
+    gradientStr += ')';
+    return gradientStr;
+  };
+  const getStyleWithGradient = styles => {
+    return styles.gradient ? {
+      ...styles,
+      color: 'transparent',
+      backgroundImage: generateGradientString(styles.gradient),
+      backgroundClip: 'text'
+    } : styles;
+  };
   let textStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
@@ -136,7 +168,7 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...containerProps,
     children: /*#__PURE__*/_jsx(Text, {
       ...resolvedTextProps,
-      style: textStyles,
+      style: getStyleWithGradient(textStyles),
       dataSet: dataSetValue,
       children: sanitizeChildren(children)
     })
@@ -144,7 +176,7 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ref: ref,
     ...containerProps,
     ...resolvedTextProps,
-    style: textStyles,
+    style: getStyleWithGradient(textStyles),
     dataSet: dataSetValue,
     children: sanitizeChildren(children)
   });

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.52.0",
+    "@telus-uds/system-theme-tokens": "^2.53.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.78.0",
+  "version": "1.79.0",
   "types": "types/index.d.ts"
 }

package/src/Box/Box.jsx

@@ -94,7 +94,7 @@ const setBackgroundImage = ({
       <View style={staticStyles.containedContainer}>
         <View style={containedViewStyle}>
           <Image
-            source={src}
+            source={{ uri: src }}
             alt={alt}
             style={staticStyles.containedImage}
             accessibilityIgnoresInvertColors
@@ -106,7 +106,7 @@ const setBackgroundImage = ({
   }
   return (
     <ImageBackground
-      source={src}
+      source={{ uri: src }}
       alt={alt}
       style={staticStyles.backgroundImageContainer}
       resizeMode={backgroundImageResizeMode}

package/src/Carousel/Carousel.jsx

@@ -81,6 +81,8 @@ const selectPreviousNextNavigationButtonStyles = (
   return styles
 }
 
+const selectIconStyles = ({ iconBackgroundColor }) => ({ backgroundColor: iconBackgroundColor })
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 /**
@@ -509,6 +511,7 @@ const Carousel = React.forwardRef(
                   '%{targetStep}',
                   activeIndex
                 )}
+                tokens={selectIconStyles(themeTokens)}
               />
             </View>
           ) : null}
@@ -570,6 +573,7 @@ const Carousel = React.forwardRef(
                   '%{targetStep}',
                   activeIndex + 2
                 )}
+                tokens={selectIconStyles(themeTokens)}
               />
             </View>
           ) : null}

package/src/Notification/Notification.jsx

@@ -51,7 +51,7 @@ const selectIconProps = ({ iconSize, iconColor }) => ({
 
 const selectIconContainerStyles = ({ iconGap }) => ({
   paddingRight: iconGap,
-  placeContent: 'center'
+  placeContent: 'start'
 })
 
 const selectDismissIconProps = ({ dismissIconSize, dismissIconColor }) => ({

package/src/Select/Select.jsx

@@ -241,7 +241,7 @@ const Select = forwardRef(
               onBlur={handleBlur}
               onMouseOver={handleMouseOver}
               onMouseOut={handleMouseOut}
-              onChange={setValue}
+              onChange={(e) => setValue(e, null)}
               value={currentValue}
               inactive={inactive}
               placeholder={

package/src/StepTracker/Step.jsx

@@ -172,12 +172,12 @@ const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, .
           style={[staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)]}
           testID={getStepTestID(isCompleted, isCurrent)}
         >
-          {((isCompleted && completedIcon) || (isCurrent && !completedIcon)) && (
-            <View style={selectCurrentInnerStyles(themeTokens)} />
-          )}
-          {isCurrent && completedIcon && (
+          {isCompleted && completedIcon && (
             <Icon icon={completedIcon} tokens={selectCompletedIconTokens(themeTokens)} />
           )}
+          {((isCurrent && completedIcon) || (isCurrent && !completedIcon)) && (
+            <View style={selectCurrentInnerStyles(themeTokens)} />
+          )}
         </View>
         <View
           style={[

package/src/Typography/Typography.jsx

@@ -35,7 +35,8 @@ const selectTextStyles = (
     textAlign,
     textTransform,
     letterSpacing,
-    textDecorationLine
+    textDecorationLine,
+    gradient
   },
   themeOptions
 ) =>
@@ -49,7 +50,8 @@ const selectTextStyles = (
     textAlign,
     textTransform,
     letterSpacing,
-    textDecorationLine
+    textDecorationLine,
+    gradient
   })
 
 // General-purpose flexible theme-neutral base component for text
@@ -87,6 +89,45 @@ const Typography = forwardRef(
       : getMaxFontMultiplier(themeTokens)
     const textDecorationLine = strikeThrough ? 'line-through' : 'none'
 
+    const generateGradientString = (gradientObj) => {
+      let gradientStr = ''
+
+      const {
+        type,
+        angle,
+        stops: [stopOne, stopTwo],
+        specification
+      } = gradientObj
+
+      if (type === 'radial') {
+        gradientStr = `radial-gradient(${specification}`
+        gradientStr += `, ${stopOne.color} ${stopOne.stop * 100}%, ${stopTwo.color} ${
+          stopTwo.stop * 100
+        }%`
+      } else if (type === 'linear') {
+        gradientStr = `linear-gradient(${angle}deg`
+        if (angle === 135) {
+          gradientStr += `, ${stopOne.color}, 75%, ${stopTwo.color}`
+        } else {
+          gradientStr += `, ${stopOne.color}, ${stopTwo.color}`
+        }
+      }
+
+      gradientStr += ')'
+      return gradientStr
+    }
+
+    const getStyleWithGradient = (styles) => {
+      return styles.gradient
+        ? {
+            ...styles,
+            color: 'transparent',
+            backgroundImage: generateGradientString(styles.gradient),
+            backgroundClip: 'text'
+          }
+        : styles
+    }
+
     let textStyles
     let mediaIds
 
@@ -161,7 +202,11 @@ const Typography = forwardRef(
 
     return block ? (
       <View ref={ref} {...containerProps}>
-        <Text {...resolvedTextProps} style={textStyles} dataSet={dataSetValue}>
+        <Text
+          {...resolvedTextProps}
+          style={getStyleWithGradient(textStyles)}
+          dataSet={dataSetValue}
+        >
           {sanitizeChildren(children)}
         </Text>
       </View>
@@ -170,7 +215,7 @@ const Typography = forwardRef(
         ref={ref}
         {...containerProps}
         {...resolvedTextProps}
-        style={textStyles}
+        style={getStyleWithGradient(textStyles)}
         dataSet={dataSetValue}
       >
         {sanitizeChildren(children)}