@telus-uds/components-base 3.28.2 → 4.0.0-alpha.0

package/lib/esm/ThemeProvider/useTheme.js

@@ -1,11 +1,10 @@
 import { useContext } from 'react';
 import { ThemeContext } from './ThemeProvider';
-const useTheme = () => {
+export const useTheme = () => {
   const theme = useContext(ThemeContext);
   // Fail fast if dev uses useTheme outside of ThemeProvider
   if (theme instanceof Error) {
     throw theme;
   }
   return theme;
-};
-export default useTheme;
+};

package/lib/esm/ThemeProvider/useThemeTokens.js

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
-import useTheme from './useTheme';
-import { getComponentTheme, getThemeTokens, resolveThemeTokens, mergeAppearances } from './utils';
+import { useTheme } from './useTheme';
+import { getComponentTheme, getThemeTokens, resolveThemeTokens, mergeAppearances } from './utils/theme-tokens';
 /**
  * @typedef {import('../utils/props/variantProp.js').AppearanceSet} AppearanceSet
  * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp

package/lib/esm/ThemeProvider/utils/styles.js

@@ -43,12 +43,15 @@ export function applyTextStyles(_ref) {
   if (fontName) {
     // Don't set undefined font families. May need some validation here that the font is available.
     // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
-    styles.fontFamily = `${fontName}${fontWeight}${fontStyle}`;
+    styles.fontFamily = `${fontName}${fontWeight}${fontStyle === 'italic' ? 'normal' : fontStyle}`;
   } else if (fontWeight) {
     // If using system default font, apply the font weight directly.
     // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
     styles.fontWeight = Platform.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight;
   }
+  if (fontStyle && fontStyle !== 'normal') {
+    styles.fontStyle = fontStyle;
+  }
   if (fontColor) {
     styles.color = fontColor;
   }

package/lib/esm/Timeline/Timeline.js

@@ -2,9 +2,14 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
 import View from "react-native-web/dist/exports/View";
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp, a11yProps, viewProps, selectSystemProps, getA11yPropsFromHtmlTag, layoutTags } from '../utils';
-import { useViewport } from '../ViewportProvider';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { getTokensPropType } from '../utils/props/tokens';
+import { variantProp } from '../utils/props/variantProp';
+import { a11yProps } from '../utils/props/a11yProps';
+import { viewProps } from '../utils/props/viewProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { getA11yPropsFromHtmlTag, layoutTags } from '../utils/a11y/semantics';
+import { useViewport } from '../ViewportProvider/useViewport';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const selectDotStyles = _ref => {
   let {
@@ -93,7 +98,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * ## A11y guidelines
  * Timeline link supports all the common a11y props.
  */
-const Timeline = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+export const Timeline = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     tokens,
     variant = {},
@@ -164,5 +169,4 @@ Timeline.propTypes = {
    */
   tag: PropTypes.oneOf(layoutTags),
   childrenTag: PropTypes.oneOf(layoutTags)
-};
-export default Timeline;
+};

package/lib/esm/ToggleSwitch/ToggleSwitch.js

@@ -3,11 +3,19 @@ import PropTypes from 'prop-types';
 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 InputLabel from '../InputLabel';
-import ButtonBase from '../Button/ButtonBase';
-import StackView from '../StackView';
-import { useThemeTokensCallback, applyShadowToken } from '../ThemeProvider';
-import { a11yProps, focusHandlerProps, getTokensPropType, selectTokens, pressProps, selectSystemProps, useUniqueId, variantProp, viewProps } from '../utils';
+import { InputLabel } from '../InputLabel/InputLabel';
+import { ButtonBase } from '../Button/ButtonBase';
+import { StackView } from '../StackView/StackView';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { applyShadowToken } from '../ThemeProvider/utils/styles';
+import { a11yProps } from '../utils/props/a11yProps';
+import { focusHandlerProps } from '../utils/props/handlerProps';
+import { getTokensPropType, selectTokens } from '../utils/props/tokens';
+import { pressProps } from '../utils/props/pressProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useUniqueId } from '../utils/useUniqueId';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
 import { useInputValue } from '../utils/input';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
@@ -129,7 +137,7 @@ const selectLabelTokens = _ref8 => {
     lineHeight: labelLineHeight
   };
 };
-const ToggleSwitch = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
+export const ToggleSwitch = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
   let {
     copy = 'en',
     value,
@@ -295,5 +303,4 @@ const staticStyles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center'
   }
-});
-export default ToggleSwitch;
+});

package/lib/esm/ToggleSwitch/ToggleSwitchGroup.js

@@ -1,17 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ABBPropTypes from 'airbnb-prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import ToggleSwitch from './ToggleSwitch';
-import Fieldset from '../Fieldset';
-import { getStackedContent } from '../StackView';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
+import { ToggleSwitch } from './ToggleSwitch';
+import { Fieldset } from '../Fieldset/Fieldset';
+import { getStackedContent } from '../StackView/getStackedContent';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { containUniqueFields } from '../utils/containUniqueFields';
+import { focusHandlerProps } from '../utils/props/handlerProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useMultipleInputValues } from '../utils/input';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const ToggleSwitchGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ToggleSwitchGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     variant,
@@ -158,7 +164,9 @@ ToggleSwitchGroup.propTypes = {
     /**
      * An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup
      */
-    ref: ABBPropTypes.ref(),
+    ref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+      current: PropTypes.any
+    })]),
     /**
      * Controls the position of the switch in relation to the label.
      * - 'start': switch on the start, before the `label` and `tooltip`.
@@ -212,5 +220,4 @@ ToggleSwitchGroup.propTypes = {
    * Current validation status of the group, passed to the feedback element if there is one.
    */
   validation: PropTypes.oneOf(['error', 'success'])
-};
-export default ToggleSwitchGroup;
+};

package/lib/esm/Tooltip/Backdrop.js

@@ -29,7 +29,7 @@ function removePortalNode(nodeId) {
  * The Web version of Backdrop utilizes React Portal for overlaying page content, so it is
  * dependent on ReactDOM. Tooltip's closing is handled by the onBlur callback of the control.
  */
-function Backdrop(_ref) {
+export function Backdrop(_ref) {
   let {
     children
   } = _ref;
@@ -46,5 +46,4 @@ function Backdrop(_ref) {
 }
 Backdrop.propTypes = {
   children: PropTypes.node
-};
-export default Backdrop;
+};

package/lib/esm/Tooltip/Backdrop.native.js

@@ -12,7 +12,7 @@ import PropTypes from 'prop-types';
  * i.e. anything rendered beneath the Backdrop can't be pressed until the Backdrop is closed.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-function Backdrop(_ref) {
+export function Backdrop(_ref) {
   let {
     onPress,
     children
@@ -28,7 +28,6 @@ function Backdrop(_ref) {
     })
   });
 }
-export default Backdrop;
 Backdrop.propTypes = {
   onPress: PropTypes.func,
   children: PropTypes.node

package/lib/esm/Tooltip/Tooltip.js

@@ -4,13 +4,17 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 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 './shared';
+import { propTypes } from './shared';
 import { useFloating, arrow, offset, shift, flip, autoPlacement } from '../utils/floating-ui';
-import { applyShadowToken, applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, selectSystemProps, selectTokens, viewProps } from '../utils';
-import TooltipButton from '../TooltipButton';
-import useCopy from '../utils/useCopy';
-import dictionary from './dictionary';
+import { applyShadowToken, applyTextStyles } from '../ThemeProvider/utils/styles';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { selectTokens } from '../utils/props/tokens';
+import { viewProps } from '../utils/props/viewProps';
+import { TooltipButton } from '../TooltipButton/TooltipButton';
+import { useCopy } from '../utils/useCopy';
+import { dictionary } from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectTooltipStyles = _ref => {
@@ -119,7 +123,7 @@ const defaultControl = (pressableState, variant) => /*#__PURE__*/_jsx(TooltipBut
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+export const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     children,
     content,
@@ -271,7 +275,6 @@ Tooltip.propTypes = {
   ...selectedSystemPropTypes,
   ...propTypes
 };
-export default Tooltip;
 const staticStyles = StyleSheet.create({
   container: {
     alignItems: 'flex-start',

package/lib/esm/Tooltip/Tooltip.native.js

@@ -5,14 +5,18 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 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 './shared';
-import { applyShadowToken, applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, selectSystemProps, selectTokens, viewProps } from '../utils';
-import Backdrop from './Backdrop';
-import getTooltipPosition from './getTooltipPosition';
-import TooltipButton from '../TooltipButton';
-import useCopy from '../utils/useCopy';
-import dictionary from './dictionary';
+import { propTypes } from './shared';
+import { applyShadowToken, applyTextStyles } from '../ThemeProvider/utils/styles';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { selectTokens } from '../utils/props/tokens';
+import { viewProps } from '../utils/props/viewProps';
+import { Backdrop } from './Backdrop';
+import { getTooltipPosition } from './getTooltipPosition';
+import { TooltipButton } from '../TooltipButton/TooltipButton';
+import { useCopy } from '../utils/useCopy';
+import { dictionary } from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectTooltipStyles = _ref => {
@@ -149,7 +153,7 @@ const defaultControl = (pressableState, variant, tokens) => /*#__PURE__*/_jsx(To
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+export const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     children,
     content,
@@ -206,7 +210,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
       focus: focused
     };
   };
-  const onTooltipLayout = _ref10 => {
+  const onTooltipLayout = _ref0 => {
     let {
       nativeEvent: {
         layout: {
@@ -214,7 +218,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
           height
         }
       }
-    } = _ref10;
+    } = _ref0;
     if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
       setTooltipDimensions({
         width: Platform.select({
@@ -346,7 +350,6 @@ Tooltip.propTypes = {
   ...selectedSystemPropTypes,
   ...propTypes
 };
-export default Tooltip;
 const staticStyles = StyleSheet.create({
   container: {
     alignItems: 'flex-start'

package/lib/esm/Tooltip/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     a11yText: 'Reveal additional information.'
   },

package/lib/esm/Tooltip/getTooltipPosition.js

@@ -57,7 +57,7 @@ function findRectByPosition(position, rectsArray) {
  * before it is shown, which makes it account for the width being limiting in styles, custom font
  * rendering, etc.
  */
-function getTooltipPosition(position, _ref2) {
+export function getTooltipPosition(position, _ref2) {
   let {
     controlLayout,
     tooltipDimensions,
@@ -165,5 +165,4 @@ function getTooltipPosition(position, _ref2) {
   // prefer 'below' over 'above', since we can always expand the document downwards,
   // and 'above' might cause issues on small viewports with large tooltips
   return getAbsolutePosition(leastOverflowing.position === 'above' ? findRectByPosition('below', boundingRects) : leastOverflowing);
-}
-export default getTooltipPosition;
+}

package/lib/esm/Tooltip/shared.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { getTokensPropType } from '../utils/props/tokens';
-import variantProp from '../utils/props/variantProp';
-const propTypes = {
+import { variantProp } from '../utils/props/variantProp';
+export const propTypes = {
   /**
    * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the
    * pressable state and tooltip variant as an argument.
@@ -38,5 +38,4 @@ const propTypes = {
   tooltipButtonTokens: getTokensPropType('TooltipButton'),
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
-};
-export default propTypes;
+};

package/lib/esm/TooltipButton/TooltipButton.js

@@ -3,9 +3,14 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
-import { useThemeTokens, applyOuterBorder } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import Icon from '../Icon';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { applyOuterBorder } from '../ThemeProvider/utils/styles';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { Icon } from '../Icon/Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectInnerContainerStyles = _ref => {
@@ -38,7 +43,7 @@ const selectIconTokens = _ref2 => {
  * In fact though, it isn't actually a pressable - it's meant to be used as pressable's content.
  * Due to this any interaction states (e.g. pressed, hover, etc.) has to be passed down to it as a prop.
  */
-const TooltipButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+export const TooltipButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     pressableState,
     tokens,
@@ -86,5 +91,4 @@ TooltipButton.propTypes = {
   }),
   tokens: getTokensPropType('TooltipButton'),
   variant: variantProp.propType
-};
-export default TooltipButton;
+};

package/lib/esm/Typography/Typography.js

@@ -3,10 +3,20 @@ 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';
-import { useViewport } from '../ViewportProvider';
+import { useResponsiveThemeTokens } from '../ThemeProvider/useResponsiveThemeTokens';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { applyTextStyles } from '../ThemeProvider/utils/styles';
+import { a11yProps } from '../utils/props/a11yProps';
+import { variantProp } from '../utils/props/variantProp';
+import { getTokensPropType } from '../utils/props/tokens';
+import { getMaxFontMultiplier } from '../utils/a11y/textSize';
+import { headingTags, textTags, getA11yPropsFromHtmlTag } from '../utils/a11y/semantics';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { textProps } from '../utils/props/textProps';
+import { viewProps } from '../utils/props/viewProps';
+import { StyleSheet, createMediaQueryStyles } from '../utils/ssr-media-query/ssr-media-query';
+import { useViewport } from '../ViewportProvider/useViewport';
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
@@ -24,6 +34,7 @@ const selectTextStyles = (_ref, themeOptions) => {
     textTransform,
     letterSpacing,
     textDecorationLine,
+    fontStyle,
     gradient
   } = _ref;
   return applyTextStyles({
@@ -32,6 +43,7 @@ const selectTextStyles = (_ref, themeOptions) => {
     color,
     lineHeight,
     fontName,
+    fontStyle,
     themeOptions,
     textAlign,
     textTransform,
@@ -55,7 +67,7 @@ const selectMobileSubSupStyles = (_ref2, type) => {
 };
 
 // General-purpose flexible theme-neutral base component for text
-const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+export const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     variant,
@@ -82,6 +94,7 @@ const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   });
   const maxFontSizeMultiplier = enableMediaQueryStyleSheet ? getMaxFontMultiplier(themeTokens[viewport]) : getMaxFontMultiplier(themeTokens);
   const textDecorationLine = strikeThrough ? 'line-through' : 'none';
+  const fontStyle = tag === 'em' ? 'italic' : undefined;
   const generateGradientString = gradientObj => {
     let gradientStr = '';
     const {
@@ -126,7 +139,10 @@ const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       acc[vp] = selectTextStyles({
         textAlign: resolvedAlign,
         textDecorationLine,
-        ...viewportTokens
+        ...viewportTokens,
+        ...(fontStyle && {
+          fontStyle
+        })
       }, themeOptions);
       if (themeTokens[vp].gradient) {
         const tokensWithGradient = {
@@ -155,7 +171,10 @@ const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     textStyles = selectTextStyles({
       textAlign: resolvedAlign,
       textDecorationLine,
-      ...themeTokens
+      ...themeTokens,
+      ...(fontStyle && {
+        fontStyle
+      })
     }, themeOptions);
   }
   const resolvedTextProps = {
@@ -267,5 +286,4 @@ Typography.propTypes = {
    * Data attributes to be added to the element
    */
   dataSet: PropTypes.object
-};
-export default Typography;
+};

package/lib/esm/Validator/Validator.js

@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
-import { inputSupportsProps, selectSystemProps } from '../utils';
-import { TextInput } from '../TextInput';
-import StackView from '../StackView';
-import InputSupports from '../InputSupports';
-import { useThemeTokens } from '../ThemeProvider';
+import { inputSupportsProps } from '../utils/props/inputSupportsProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { TextInput } from '../TextInput/TextInput';
+import { StackView } from '../StackView/StackView';
+import { InputSupports } from '../InputSupports/InputSupports';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([inputSupportsProps]);
 const selectCodeTextInputTokens = _ref => {
@@ -21,7 +22,7 @@ const selectCodeTextInputTokens = _ref => {
     icon: null
   };
 };
-const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     value = '',
     inactive,
@@ -320,7 +321,6 @@ Validator.propTypes = {
    */
   onChange: PropTypes.func
 };
-export default Validator;
 const staticStyles = StyleSheet.create({
   codeInputWidth: {
     width: 43

package/lib/esm/ViewportProvider/ViewportProvider.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
 import { ViewportContext } from './useViewport';
-import useViewportListener from './useViewportListener';
+import { useViewportListener } from './useViewportListener';
 
 /**
  * Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook
@@ -11,8 +11,9 @@ import useViewportListener from './useViewportListener';
  * @param {string} [defaultViewport] - Default viewport to use during server-side rendering.
  *   Must be one of the viewport keys from system-constants. If not provided, defaults to the smallest viewport.
  */
+// eslint-disable-next-line no-unused-vars
 import { jsx as _jsx } from "react/jsx-runtime";
-const ViewportProvider = _ref => {
+export const ViewportProvider = /*#__PURE__*/React.forwardRef((_ref, _) => {
   let {
     children,
     defaultViewport
@@ -25,9 +26,9 @@ const ViewportProvider = _ref => {
     value: viewport,
     children: children
   });
-};
+});
+ViewportProvider.displayName = 'ViewportProvider';
 ViewportProvider.propTypes = {
   children: PropTypes.node.isRequired,
   defaultViewport: PropTypes.oneOf(viewports.keys)
-};
-export default ViewportProvider;
+};

package/lib/esm/ViewportProvider/useViewportListener.js

@@ -1,6 +1,6 @@
 import Dimensions from "react-native-web/dist/exports/Dimensions";
 import { viewports } from '@telus-uds/system-constants';
-import useSafeLayoutEffect from '../utils/useSafeLayoutEffect';
+import { useSafeLayoutEffect } from '../utils/useSafeLayoutEffect';
 
 // Use Dimensions instead of useWindowDimensions because useWindowDimensions forces context
 // to update on every pixel change during window resize; but we only want rerenders to occur
@@ -12,7 +12,7 @@ const lookupViewport = () => viewports.select(Dimensions.get('window').width);
  * if the viewport isn't the smallest, any SSR-rendered components rerender correctly before anything
  * is shown to the user. Then bind events to update the viewport if it changes.
  */
-const useViewportListener = setViewport => {
+export const useViewportListener = setViewport => {
   useSafeLayoutEffect(() => {
     setViewport(lookupViewport());
     const onChange = _ref => {
@@ -33,5 +33,4 @@ const useViewportListener = setViewport => {
       }
     };
   }, [setViewport]);
-};
-export default useViewportListener;
+};