@telus-uds/components-base 1.10.0 → 1.12.1

package/lib-module/Carousel/Carousel.js

@@ -7,13 +7,13 @@ import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
-import { getTokensPropType, variantProp, selectSystemProps, a11yProps, viewProps } from '../utils';
+import { getTokensPropType, getA11yPropsFromHtmlTag, layoutTags, variantProp, selectSystemProps, a11yProps, viewProps, useCopy } from '../utils';
 import { useA11yInfo } from '../A11yInfoProvider';
 import { CarouselProvider } from './CarouselContext';
 import CarouselItem from './CarouselItem';
-import StepTracker from '../StepTracker';
-import StackView from '../StackView';
 import IconButton from '../IconButton';
+import CarouselStepTracker from './CarouselStepTracker/CarouselStepTracker';
+import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const staticStyles = StyleSheet.create({
@@ -26,18 +26,6 @@ const staticStyles = StyleSheet.create({
     left: 0
   }
 });
-const staticTokens = {
-  stackView: {
-    justifyContent: 'center'
-  },
-  stepTracker: {
-    showStepLabel: false,
-    showStepTrackerLabel: true,
-    knobCompletedBackgroundColor: 'none',
-    connectorCompletedColor: 'none',
-    connectorColor: 'none'
-  }
-};
 
 const selectContainerStyles = width => ({
   backgroundColor: 'transparent',
@@ -77,14 +65,6 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
   return styles;
 };
 
-const defaultPanelNavigationDictionary = {
-  en: {
-    stepTrackerLabel: 'Showing %{stepNumber} of %{stepCount}'
-  },
-  fr: {
-    stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
-  }
-};
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 /**
  * Carousel is a general-purpose content slider that can be used to render content in terms of slides.
@@ -146,6 +126,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     tokens,
     variant,
     children,
+    itemLabel = 'item',
     previousNextNavigationPosition = 'inside',
     previousNextIconSize = 'default',
     minDistanceToCapture = 5,
@@ -154,24 +135,38 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onAnimationEnd,
     onIndexChanged,
     springConfig = undefined,
-    onRenderPanelNavigation,
-    panelNavigationTextDictionary = defaultPanelNavigationDictionary,
+    panelNavigation = /*#__PURE__*/_jsx(CarouselStepTracker, {}),
+    tag = 'ul',
     accessibilityRole = 'adjustable',
     accessibilityLabel = 'carousel',
+    copy,
     ...rest
   } = _ref;
   const viewport = useViewport();
+  const themeTokens = useThemeTokens('Carousel', tokens, variant, {
+    viewport
+  });
   const {
     previousIcon,
     nextIcon,
     showPreviousNextNavigation,
     showPanelNavigation,
-    spaceBetweenSlideAndPreviousNextNavigation,
-    spaceBetweenSlideAndPanelNavigation
-  } = useThemeTokens('Carousel', tokens, variant, {
-    viewport
-  });
+    spaceBetweenSlideAndPreviousNextNavigation
+  } = themeTokens;
   const [activeIndex, setActiveIndex] = React.useState(0);
+  const [isAnimating, setIsAnimating] = React.useState(false);
+  const handleAnimationStart = React.useCallback(function () {
+    if (typeof onAnimationStart === 'function') onAnimationStart(...arguments);
+    setIsAnimating(true);
+  }, [onAnimationStart]);
+  const handleAnimationEnd = React.useCallback(function () {
+    if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
+    setIsAnimating(false);
+  }, [onAnimationEnd]);
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
   const childrenArray = React.Children.toArray(children);
   const systemProps = selectProps({ ...rest,
     accessibilityRole,
@@ -196,9 +191,6 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const animatedY = React.useRef(0);
   const isFirstSlide = !activeIndex;
   const isLastSlide = activeIndex + 1 >= children.length;
-  const panelNavigationTokens = { ...staticTokens.stepTracker,
-    containerPaddingTop: spaceBetweenSlideAndPanelNavigation
-  };
 
   const onContainerLayout = _ref2 => {
     let {
@@ -240,20 +232,28 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       y: 0
     });
   }, [activeIndex, containerLayout.width, pan, animatedX]);
-  const animate = React.useCallback(toValue => {
+  const animate = React.useCallback((toValue, toIndex) => {
+    const handleAnimationEndToIndex = function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return handleAnimationEnd(toIndex, ...args);
+    };
+
     if (reduceMotionEnabled) {
       Animated.timing(pan, {
         toValue,
         duration: 1,
         useNativeDriver: false
-      }).start();
+      }).start(handleAnimationEndToIndex);
     } else {
       Animated.spring(pan, { ...springConfig,
         toValue,
         useNativeDriver: false
-      }).start();
+      }).start(handleAnimationEndToIndex);
     }
-  }, [pan, springConfig, reduceMotionEnabled]);
+  }, [pan, springConfig, reduceMotionEnabled, handleAnimationEnd]);
   const updateIndex = React.useCallback(function () {
     let delta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
     const toValue = {
@@ -271,24 +271,24 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       calcDelta = -1 * activeIndex + delta - 1;
     }
 
+    const index = activeIndex + calcDelta;
+
     if (skipChanges) {
-      animate(toValue);
+      animate(toValue, index);
       return calcDelta;
     }
 
-    const index = activeIndex + calcDelta;
     setActiveIndex(index);
     toValue.x = containerLayout.width * -1 * calcDelta;
-    animate(toValue);
+    animate(toValue, index);
     if (onIndexChanged) onIndexChanged(calcDelta);
-    if (onAnimationEnd) onAnimationEnd(index);
     return calcDelta;
-  }, [containerLayout.width, activeIndex, animate, children.length, onIndexChanged, onAnimationEnd]);
+  }, [containerLayout.width, activeIndex, animate, children.length, onIndexChanged]);
   const fixOffsetAndGo = React.useCallback(delta => {
     updateOffset();
-    if (onAnimationStart) onAnimationStart(activeIndex);
+    handleAnimationStart(activeIndex);
     updateIndex(delta);
-  }, [updateIndex, updateOffset, activeIndex, onAnimationStart]);
+  }, [updateIndex, updateOffset, activeIndex, handleAnimationStart]);
   const goToNeighboring = React.useCallback(function () {
     let toPrev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     fixOffsetAndGo(toPrev ? -1 : 1);
@@ -308,7 +308,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         return false;
       }
 
-      if (onAnimationStart) onAnimationStart(activeIndex);
+      handleAnimationStart(activeIndex);
       return Math.abs(gestureState.dx) > minDistanceToCapture;
     },
     onPanResponderGrant: () => updateOffset(),
@@ -324,13 +324,13 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         animate({
           x: 0,
           y: 0
-        });
+        }, 0);
       } else {
         const delta = correction > 0 ? -1 : 1;
         updateIndex(delta);
       }
     }
-  }), [containerLayout.width, updateIndex, updateOffset, animate, isSwipeAllowed, activeIndex, minDistanceForAction, onAnimationStart, minDistanceToCapture, pan.x]);
+  }), [containerLayout.width, updateIndex, updateOffset, animate, isSwipeAllowed, activeIndex, minDistanceForAction, handleAnimationStart, minDistanceToCapture, pan.x]);
   React.useEffect(() => {
     pan.x.addListener(_ref4 => {
       let {
@@ -370,11 +370,18 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     size: previousNextIconSize,
     raised: true
   };
+  const getCopyWithPlaceholders = React.useCallback(copyKey => {
+    const copyText = getCopy(copyKey).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, childrenArray.length); // First word might be a lowercase placeholder: capitalize the first letter
+
+    return "".concat(copyText[0].toUpperCase()).concat(copyText.slice(1));
+  }, [activeIndex, childrenArray.length, itemLabel, getCopy]);
   return /*#__PURE__*/_jsxs(CarouselProvider, {
     activeIndex: activeIndex,
     totalItems: childrenArray.length,
     width: containerLayout.width,
     goTo: goTo,
+    getCopyWithPlaceholders: getCopyWithPlaceholders,
+    themeTokens: themeTokens,
     children: [/*#__PURE__*/_jsxs(View, {
       style: staticStyles.root,
       onLayout: onContainerLayout,
@@ -388,7 +395,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           icon: previousIcon,
           onPress: goToPrev,
           variant: previousNextIconButtonVariants,
-          accessibilityLabel: "previous-button"
+          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex)
         })
       }), /*#__PURE__*/_jsx(View, {
         style: selectContainerStyles(containerLayout.width),
@@ -401,9 +408,12 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             }]
           }]),
           ...panResponder.panHandlers,
+          ...getA11yPropsFromHtmlTag(tag),
           children: childrenArray.map((element, index) => {
+            const hidden = !isAnimating && index !== activeIndex;
             const clonedElement = /*#__PURE__*/React.cloneElement(element, {
-              elementIndex: index
+              elementIndex: index,
+              hidden
             });
             return /*#__PURE__*/_jsx(React.Fragment, {
               children: clonedElement
@@ -418,22 +428,10 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           icon: nextIcon,
           onPress: goToNext,
           variant: previousNextIconButtonVariants,
-          accessibilityLabel: "next-button"
+          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2)
         })
       })]
-    }), showPanelNavigation ? /*#__PURE__*/_jsx(StackView, {
-      direction: "row",
-      tokens: staticTokens.stackView,
-      children: onRenderPanelNavigation ? onRenderPanelNavigation({
-        activeIndex,
-        totalItems: childrenArray.length
-      }) : /*#__PURE__*/_jsx(StepTracker, {
-        current: activeIndex,
-        steps: childrenArray.map((_, index) => String(index)),
-        dictionary: panelNavigationTextDictionary,
-        tokens: panelNavigationTokens
-      })
-    }) : null]
+    }), showPanelNavigation ? panelNavigation : null]
   });
 });
 Carousel.propTypes = { ...selectedSystemPropTypes,
@@ -445,6 +443,14 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
 
+  /**
+   * Lowercase language-appropriate user-facing description of what each Carousel slide represents.
+   * This is used when generating item labels. For example, if a carousel contains offers,
+   * pass itemLabel="summer offer" (or copy="fr" and an appropriate French translation) to genereate
+   * accessible labels such as "Summer offer 1 of 3" and "Show summer offer 2 of 3".
+   */
+  itemLabel: PropTypes.string,
+
   /**
    * `inside` renders the previous and next buttons inside the slide
    * `outside` renders the previous and next buttons outside the slide
@@ -492,20 +498,20 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
   onIndexChanged: PropTypes.func,
 
   /**
-   * Use this to render a custom panel navigation element instead of dots navigation
-   * This function is also provided with an object with the following properties
-   * activeIndex: index of current slide
-   * totalItems: total number of slides
+   * Use this to render a custom panel navigation element instead of the default StepTracker's based navigation
+   * You can make use of `useCarousel` within your custom panel navigation component to hook into various Carousel states such as:
+   * - activeIndex: index of current slide
+   * - totalItems: total number of slides
    * Use it as follows:
    * ```js
    *    <Carousel
-   *      onRenderPanelNavigation={({ totalItems, activeIndex }) => <Text>Showing {activeIndex + 1}</Text>}
+   *      panelNavigation={<CustomPanelNavigation />}
    *    >
    *      <Carousel.Item>First Slide</Carousel.Item>
    *    </Carousel>
    * ```
    */
-  onRenderPanelNavigation: PropTypes.func,
+  panelNavigation: PropTypes.element,
 
   /**
    * When slide animation start
@@ -563,7 +569,16 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
   /**
    * Provide custom accessibilityLabel for Carousel container
    */
-  accessibilityLabel: PropTypes.string
+  accessibilityLabel: PropTypes.string,
+
+  /**
+   * HTML tag to use for the Carousel item's immediate parent. Defaults to `'ul'` so that
+   * assistive technology tools know to intepret the carousel as a list.
+   *
+   * Note that if the immediate Carousel children do not all render as `'li'` elements,
+   * this should be changed (e.g. pass tag="div") because only 'li' is a valid child of 'ul'.
+   */
+  tag: PropTypes.oneOf(layoutTags)
 };
 Carousel.Item = CarouselItem;
 Carousel.displayName = 'Carousel';

package/lib-module/Carousel/CarouselContext.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { getTokensPropType } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const CarouselContext = /*#__PURE__*/React.createContext();
 
@@ -9,14 +10,18 @@ const CarouselProvider = _ref => {
     activeIndex,
     totalItems,
     width,
-    goTo
+    goTo,
+    getCopyWithPlaceholders,
+    themeTokens
   } = _ref;
   const value = React.useMemo(() => ({
     activeIndex,
     totalItems,
     width,
-    goTo
-  }), [activeIndex, totalItems, width, goTo]);
+    goTo,
+    getCopyWithPlaceholders,
+    themeTokens
+  }), [activeIndex, totalItems, width, goTo, getCopyWithPlaceholders, themeTokens]);
   return /*#__PURE__*/_jsx(CarouselContext.Provider, {
     value: value,
     children: children
@@ -38,6 +43,8 @@ CarouselProvider.propTypes = {
   activeIndex: PropTypes.number.isRequired,
   totalItems: PropTypes.number.isRequired,
   width: PropTypes.number.isRequired,
-  goTo: PropTypes.func.isRequired
+  goTo: PropTypes.func.isRequired,
+  getCopyWithPlaceholders: PropTypes.func.isRequired,
+  themeTokens: getTokensPropType('Carousel')
 };
 export { CarouselProvider, useCarousel };

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
-import { selectSystemProps, a11yProps, viewProps } from '../../utils';
+import { layoutTags, getA11yPropsFromHtmlTag, selectSystemProps, a11yProps, viewProps } from '../../utils';
 import { useCarousel } from '../CarouselContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -15,23 +15,29 @@ const CarouselItem = _ref => {
   let {
     children,
     elementIndex,
+    tag = 'li',
+    hidden,
     ...rest
   } = _ref;
   const {
     width,
-    activeIndex,
-    totalItems
+    activeIndex
   } = useCarousel();
   const selectedProps = selectProps({ ...rest,
-    // `group` role crashes the app on Android so setting it to `none` for Android
-    accessibilityRole: Platform.OS === 'android' ? 'none' : 'group',
-    accessibilityLabel: "Showing ".concat(elementIndex + 1, " of ").concat(totalItems)
+    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
   });
   const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps;
+  const style = {
+    width
+  };
+
+  if (hidden && Platform.OS === 'web') {
+    // On web, visibility: hidden makes all children non-focusable. It doesn't exist on native.
+    style.visibility = 'hidden';
+  }
+
   return /*#__PURE__*/_jsx(View, {
-    style: {
-      width
-    },
+    style: style,
     ...selectedProps,
     ...focusabilityProps,
     children: children
@@ -54,7 +60,16 @@ CarouselItem.propTypes = { ...selectedSystemPropTypes,
   /**
    * Content of the slide
    */
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+
+  /**
+   * Sets the HTML tag of the outer container. By default `'li'` so that assistive technology sees
+   * the Carousel as a list of items.
+   *
+   * Carousel's innermost container defaults to `'ul'` which can be overridden. If the tag of either
+   * `Carousel` or `Carousel.Item` is overriden, the other should be too, to avoid producing invalid HTML.
+   */
+  tag: PropTypes.oneOf(layoutTags)
 };
 CarouselItem.displayName = 'Carousel.Item';
 export default CarouselItem;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useCarousel } from '../CarouselContext';
+import StepTracker from '../../StepTracker';
+import StackView from '../../StackView';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const CarouselStepTracker = () => {
+  const {
+    activeIndex,
+    totalItems,
+    getCopyWithPlaceholders,
+    themeTokens
+  } = useCarousel();
+  const stackViewTokens = {
+    justifyContent: 'center'
+  };
+  const stepTrackerTokens = {
+    showStepLabel: false,
+    showStepTrackerLabel: true,
+    knobCompletedBackgroundColor: 'none',
+    connectorCompletedColor: 'none',
+    connectorColor: 'none',
+    containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
+  };
+  const steps = Array.from(Array(totalItems)).map((_, index) => String(index));
+  return /*#__PURE__*/_jsx(StackView, {
+    direction: "row",
+    tokens: stackViewTokens,
+    children: /*#__PURE__*/_jsx(StepTracker, {
+      current: activeIndex,
+      steps: steps,
+      copy: {
+        // Give StepTracker copy from Carousel's language and dictionary
+        stepLabel: getCopyWithPlaceholders('stepLabel'),
+        stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
+      },
+      tokens: stepTrackerTokens
+    })
+  });
+};
+
+export default CarouselStepTracker;

package/lib-module/Carousel/CarouselStepTracker/index.js

@@ -0,0 +1,2 @@
+import CarouselStepTracker from './CarouselStepTracker';
+export default CarouselStepTracker;

package/lib-module/Carousel/dictionary.js

@@ -0,0 +1,16 @@
+// 'stepLabel' and 'stepTrackerLabel' are passed down to StepTracker
+export default {
+  en: {
+    carouselLabel: '%{stepCount} items',
+    iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
+    stepLabel: '%{itemLabel} %{stepNumber}',
+    stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}'
+  },
+  fr: {
+    // TODO: French translations here
+    carouselLabel: '(fr) %{stepCount} items',
+    iconButtonLabel: '(fr) Show %{itemLabel} %{targetStep} of %{stepCount}',
+    stepLabel: '(fr) %{itemLabel} %{stepNumber}',
+    stepTrackerLabel: '(fr) %{itemLabel} %{stepNumber} of %{stepCount}'
+  }
+};

package/lib-module/Checkbox/Checkbox.js

@@ -9,7 +9,7 @@ import CheckboxInput from './CheckboxInput';
 import CheckboxLabel from '../InputLabel/LabelContent';
 import Feedback from '../Feedback';
 import StackView from '../StackView';
-import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
+import { applyShadowToken, applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, focusHandlerProps, getTokensPropType, selectSystemProps, useInputValue, variantProp, viewProps } from '../utils';
 import useUniqueId from '../utils/useUniqueId';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -47,7 +47,7 @@ const selectInputStyles = (_ref, isChecked) => {
   };
 };
 
-const selectLabelStyles = _ref2 => {
+const selectLabelStyles = (_ref2, themeOptions) => {
   let {
     labelColor,
     labelFontName,
@@ -63,7 +63,8 @@ const selectLabelStyles = _ref2 => {
       fontName: labelFontName,
       fontWeight: labelFontWeight,
       fontSize: labelFontSize,
-      lineHeight: labelLineHeight
+      lineHeight: labelLineHeight,
+      themeOptions
     })
   };
 };
@@ -187,6 +188,9 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref5, ref) => {
 
   const uniqueId = useUniqueId('checkbox');
   const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const {
+    themeOptions
+  } = useTheme();
   return /*#__PURE__*/_jsx(View, {
     style: staticStyles.wrapper,
     ref: ref,
@@ -218,7 +222,7 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref5, ref) => {
             pressed
           });
           const iconTokens = selectIconTokens(stateTokens);
-          const labelStyles = selectLabelStyles(stateTokens);
+          const labelStyles = selectLabelStyles(stateTokens, themeOptions);
           const alignWithLabel = label ? [staticStyles.alignWithLabel, {
             height: labelStyles.lineHeight
           }] : null;

package/lib-module/Checkbox/CheckboxGroup.js

@@ -46,7 +46,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, f
  * @example
  * ```jsx
  * <CheckboxGroup
- *   initialCheckedId="check1"
+ *   initialCheckedIds="check1"
  *   items={[
  *     { label: 'Checkbox 1', id: 'check1' },
  *     { label: 'Checkbox 2', id: 'check2' },

package/lib-module/Feedback/Feedback.js

@@ -3,7 +3,7 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils';
 import StackView from '../StackView';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -12,24 +12,29 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const selectStyles = tokens => selectTokens('Feedback', tokens);
 
-const selectTitleTextStyles = _ref => {
+const selectTitleTextStyles = (_ref, themeOptions) => {
   let {
     titleFontSize,
     ...tokens
   } = _ref;
-  return applyTextStyles(selectTokens('Typography', { ...tokens,
-    fontSize: titleFontSize
-  }));
+  return applyTextStyles({ ...selectTokens('Typography', { ...tokens,
+      fontSize: titleFontSize,
+      themeOptions
+    }),
+    themeOptions
+  });
 };
 
-const selectContentTextStyles = _ref2 => {
+const selectContentTextStyles = (_ref2, themeOptions) => {
   let {
     contentFontSize,
     ...tokens
   } = _ref2;
-  return applyTextStyles(selectTokens('Typography', { ...tokens,
-    fontSize: contentFontSize
-  }));
+  return applyTextStyles({ ...selectTokens('Typography', { ...tokens,
+      fontSize: contentFontSize
+    }),
+    themeOptions
+  });
 };
 
 const selectIconTokens = _ref3 => {
@@ -90,8 +95,11 @@ const Feedback = /*#__PURE__*/forwardRef((_ref5, ref) => {
   const {
     icon: IconComponent
   } = themeTokens;
-  const titleTextStyles = selectTitleTextStyles(themeTokens);
-  const contentTextStyles = selectContentTextStyles(themeTokens);
+  const {
+    themeOptions
+  } = useTheme();
+  const titleTextStyles = selectTitleTextStyles(themeTokens, themeOptions);
+  const contentTextStyles = selectContentTextStyles(themeTokens, themeOptions);
   const content = typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
     style: contentTextStyles,
     children: children

package/lib-module/Icon/IconText.js

@@ -51,6 +51,9 @@ const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 IconText.displayName = 'IconText';
 IconText.propTypes = {
+  /* eslint-disable react/no-unused-prop-types */
+  // eslint is having hard time seeing these props through forwardRef
+
   /**
    * Amount of space to separate the text content and icon. Uses the themes's spacing scale
    * (see useSpacingScale for more info).
@@ -79,5 +82,7 @@ IconText.propTypes = {
    * `<Typography>` component, or a component that renders `<Text>`.
    */
   children: PropTypes.node
+  /* eslint-enable react/no-unused-prop-types */
+
 };
 export default IconText;