@telus-uds/components-base 1.12.0 → 1.12.1

package/lib-module/Carousel/Carousel.js

@@ -11,9 +11,8 @@ import { getTokensPropType, getA11yPropsFromHtmlTag, layoutTags, variantProp, se
 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";
@@ -27,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',
@@ -148,7 +135,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onAnimationEnd,
     onIndexChanged,
     springConfig = undefined,
-    onRenderPanelNavigation,
+    panelNavigation = /*#__PURE__*/_jsx(CarouselStepTracker, {}),
     tag = 'ul',
     accessibilityRole = 'adjustable',
     accessibilityLabel = 'carousel',
@@ -156,16 +143,16 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ...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 () {
@@ -204,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 {
@@ -386,18 +370,18 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     size: previousNextIconSize,
     raised: true
   };
-
-  const getCopyWithPlaceholders = copyKey => {
+  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,
@@ -447,23 +431,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           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)),
-        copy: {
-          // Give StepTracker copy from Carousel's language and dictionary
-          stepLabel: getCopyWithPlaceholders('stepLabel'),
-          stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
-        },
-        tokens: panelNavigationTokens
-      })
-    }) : null]
+    }), showPanelNavigation ? panelNavigation : null]
   });
 });
 Carousel.propTypes = { ...selectedSystemPropTypes,
@@ -530,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

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/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/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;

package/lib-module/InputLabel/InputLabel.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 LabelContent from './LabelContent';
 import Tooltip from '../Tooltip';
@@ -12,9 +12,11 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
-const selectLabelStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
+const selectLabelStyles = (tokens, themeOptions) => applyTextStyles({ ...selectTokens('Typography', tokens),
+  themeOptions
+});
 
-const selectHintStyles = _ref => {
+const selectHintStyles = (_ref, themeOptions) => {
   let {
     hintColor,
     hintFontName,
@@ -27,7 +29,8 @@ const selectHintStyles = _ref => {
     fontName: hintFontName,
     fontSize: hintFontSize,
     fontWeight: hintFontWeight,
-    lineHeight: hintLineHeight
+    lineHeight: hintLineHeight,
+    themeOptions
   });
 };
 
@@ -56,19 +59,22 @@ const InputLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
   const themeTokens = useThemeTokens('InputLabel', tokens, variant);
   const hasTooltip = tooltip !== undefined;
   const isHintInline = hintPosition === 'inline';
+  const {
+    themeOptions
+  } = useTheme();
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       ref: ref,
       style: staticStyles.container,
       ...selectProps(rest),
       children: [/*#__PURE__*/_jsx(Text, {
-        style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label],
+        style: [selectLabelStyles(themeTokens, themeOptions), selectGapStyles(themeTokens), staticStyles.label],
         children: /*#__PURE__*/_jsx(LabelContent, {
           forId: forId,
           children: label
         })
       }), hint && isHintInline && /*#__PURE__*/_jsx(Text, {
-        style: [selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens), staticStyles.label],
+        style: [selectHintStyles(themeTokens, themeOptions), hasTooltip && selectGapStyles(themeTokens), staticStyles.label],
         nativeID: hintId,
         children: hint
       }), hasTooltip && /*#__PURE__*/_jsx(View, {

package/lib-module/Link/LinkBase.js

@@ -7,7 +7,7 @@ import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, sel
 import { resolvePressableTokens } from '../utils/pressability';
 import { withLinkRouter } from '../utils';
 import InlinePressable from './InlinePressable';
-import { applyTextStyles, applyOuterBorder } from '../ThemeProvider';
+import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider';
 import { IconText, iconComponentPropTypes } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
@@ -53,7 +53,7 @@ const selectTextStyles = _ref2 => {
   };
 };
 
-const selectBlockStyles = _ref3 => {
+const selectBlockStyles = (_ref3, themeOptions) => {
   let {
     blockFontWeight,
     blockFontSize,
@@ -64,7 +64,8 @@ const selectBlockStyles = _ref3 => {
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
     lineHeight: blockLineHeight,
-    fontName: blockFontName
+    fontName: blockFontName,
+    themeOptions
   });
 };
 
@@ -164,6 +165,9 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
   const hasIcon = Boolean(icon || defaultThemeTokens.icon); // On web, this makes focus rings wrap only the link, not the entire block
 
   const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft;
+  const {
+    themeOptions
+  } = useTheme();
   return /*#__PURE__*/_jsx(InlinePressable, { ...selectedProps,
     inline: hasIcon // assuming links without icons should be inline (even if they are long)
     ,
@@ -180,7 +184,7 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
       const iconTokens = selectIconTokens(themeTokens); // TODO: may need to apply some smarter text inheritance here if inline to avoid native
       // issues like double-application of line heights breaking align-items: baseline
 
-      const blockTextStyles = selectBlockStyles(themeTokens);
+      const blockTextStyles = selectBlockStyles(themeTokens, themeOptions);
       const IconComponent = icon || themeTokens.icon;
       const {
         iconSpace

package/lib-module/List/ListItem.js

@@ -3,7 +3,7 @@ import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
-import { useThemeTokens, applyTextStyles } from '../ThemeProvider';
+import { useTheme, useThemeTokens, applyTextStyles } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps, wrapStringsInText } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -68,7 +68,7 @@ const selectBulletPositioningStyles = _ref5 => {
   };
 };
 
-const selectItemStyles = _ref6 => {
+const selectItemStyles = (_ref6, themeOptions) => {
   let {
     itemFontWeight,
     itemFontSize,
@@ -79,7 +79,8 @@ const selectItemStyles = _ref6 => {
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     lineHeight: itemLineHeight,
-    fontName: itemFontName
+    fontName: itemFontName,
+    themeOptions
   });
 };
 
@@ -127,7 +128,10 @@ const ListItem = /*#__PURE__*/forwardRef((_ref9, ref) => {
     ...rest
   } = _ref9;
   const themeTokens = useThemeTokens('List', tokens, variant);
-  const itemStyles = selectItemStyles(themeTokens);
+  const {
+    themeOptions
+  } = useTheme();
+  const itemStyles = selectItemStyles(themeTokens, themeOptions);
   const itemBlockStyles = selectItemBlockStyles(themeTokens);
   const dividerStyles = selectDividerStyles(themeTokens);
   const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);

package/lib-module/Notification/Notification.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useState } from 'react';
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 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, wrapStringsInText } from '../utils';
 import ButtonBase from '../Button/ButtonBase';
 import useCopy from '../utils/useCopy';
@@ -14,7 +14,9 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const selectContainerStyles = tokens => ({ ...tokens
 });
 
-const selectTextStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
+const selectTextStyles = (tokens, themeOptions) => applyTextStyles({ ...selectTokens('Typography', tokens),
+  themeOptions
+});
 
 const selectIconProps = _ref => {
   let {
@@ -126,12 +128,15 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
     dictionary,
     copy
   });
+  const {
+    themeOptions
+  } = useTheme();
 
   if (isDismissed) {
     return null;
   }
 
-  const textStyles = selectTextStyles(themeTokens);
+  const textStyles = selectTextStyles(themeTokens, themeOptions);
   const content = wrapStringsInText(typeof children === 'function' ? children({
     textStyles
   }) : children, {

package/lib-module/Pagination/Pagination.js

@@ -3,7 +3,7 @@ import View from "react-native-web/dist/exports/View";
 import Text from "react-native-web/dist/exports/Text";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { a11yProps, componentPropType, copyPropTypes, getTokensPropType, selectSystemProps, variantProp, viewProps, withLinkRouter } from '../utils';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 import Box from '../Box';
 import usePagination from './usePagination';
@@ -12,7 +12,7 @@ import SideButton from './SideButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
-const selectTextStyles = _ref => {
+const selectTextStyles = (_ref, themeOptions) => {
   let {
     color,
     fontName,
@@ -25,7 +25,8 @@ const selectTextStyles = _ref => {
     fontName,
     fontSize,
     fontWeight,
-    lineHeight
+    lineHeight,
+    themeOptions
   });
 };
 
@@ -49,6 +50,9 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
   } = useThemeTokens('Pagination', tokens, variant, {
     viewport
   });
+  const {
+    themeOptions
+  } = useTheme();
   const items = React.Children.toArray(children);
   const {
     isItemActive,
@@ -63,7 +67,7 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
     items,
     truncateAbove
   });
-  const ellipsisTextStyles = selectTextStyles(themeTokens);
+  const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions);
 
   if (items.length === 0) {
     return null;

package/lib-module/RadioCard/RadioCard.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 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 { useThemeTokensCallback, applyTextStyles } from '../ThemeProvider';
+import { applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, focusHandlerProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useUniqueId, variantProp, viewProps } from '../utils';
 import { PressableCardBase, selectPressableCardTokens } from '../Card';
 import StackView from '../StackView';
@@ -84,6 +84,9 @@ const RadioCard = /*#__PURE__*/forwardRef((_ref, ref) => {
 
   const getCardTokens = cardState => selectPressableCardTokens(getTokens(cardState));
 
+  const {
+    themeOptions
+  } = useTheme();
   return /*#__PURE__*/_jsx(PressableCardBase, {
     ref: ref,
     inactive: inactive,
@@ -104,7 +107,9 @@ const RadioCard = /*#__PURE__*/forwardRef((_ref, ref) => {
       } = getTokens(cardState);
       const radioTokens = selectRadioButtonTokens(themeTokens, 'radio');
       const titleTokens = selectTokens('Typography', themeTokens);
-      const textStyle = applyTextStyles(titleTokens);
+      const textStyle = applyTextStyles({ ...titleTokens,
+        themeOptions
+      });
       return /*#__PURE__*/_jsxs(StackView, {
         direction: "row",
         space: radioSpace,

package/lib-module/Select/Select.js

@@ -3,7 +3,7 @@ import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
+import { applyTextStyles, useThemeTokens, applyOuterBorder, useTheme } from '../ThemeProvider';
 import { a11yProps, componentPropType, getTokensPropType, inputSupportsProps, selectSystemProps, useInputValue, variantProp, viewProps } from '../utils';
 import Picker from './Picker';
 import InputSupports from '../InputSupports';
@@ -11,7 +11,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, inputSupportsProps, viewProps]);
 
-const selectInputStyles = (_ref, inactive) => {
+const selectInputStyles = (_ref, themeOptions, inactive) => {
   let {
     backgroundColor,
     color,
@@ -41,7 +41,8 @@ const selectInputStyles = (_ref, inactive) => {
     fontName,
     fontSize,
     lineHeight,
-    fontWeight
+    fontWeight,
+    themeOptions
   });
   const webStyles = Platform.select({
     web: {
@@ -228,6 +229,9 @@ const Select = /*#__PURE__*/forwardRef((_ref7, ref) => {
     icon: IconComponent,
     validationIcon: ValidationIconComponent
   } = themeTokens;
+  const {
+    themeOptions
+  } = useTheme();
   return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
     ...selectedProps,
     children: _ref8 => {
@@ -239,7 +243,7 @@ const Select = /*#__PURE__*/forwardRef((_ref7, ref) => {
         style: selectOuterBorderStyles(themeTokens),
         children: [/*#__PURE__*/_jsx(Picker, {
           ref: ref,
-          style: selectInputStyles(themeTokens, inactive),
+          style: selectInputStyles(themeTokens, themeOptions, inactive),
           onFocus: handleFocus,
           onBlur: handleBlur,
           onMouseOver: handleMouseOver,