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

package/lib/esm/StepTracker/StepTracker.js

@@ -4,13 +4,19 @@ import Platform from "react-native-web/dist/exports/Platform";
 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 StackView from '../StackView';
-import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import useCopy from '../utils/useCopy';
-import Step from './Step';
-import defaultDictionary from './dictionary';
+import { StackView } from '../StackView/StackView';
+import { applyTextStyles } from '../ThemeProvider/utils/styles';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+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 { useViewport } from '../ViewportProvider/useViewport';
+import { useCopy } from '../utils/useCopy';
+import { Step } from './Step';
+import { dictionary as defaultDictionary } from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const STYLE_BAR_VARIANT = 'bar';
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -94,7 +100,7 @@ const selectStepsContainerStyles = _ref4 => {
  * - `accessibilityValue.text` (`aria-valuetext`): `<Current Step Label>`,
  *
  */
-const StepTracker = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+export const StepTracker = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     current = 0,
     copy = 'en',
@@ -208,7 +214,6 @@ StepTracker.propTypes = {
   tokens: getTokensPropType('StepTracker'),
   variant: variantProp.propType
 };
-export default StepTracker;
 const staticStyles = StyleSheet.create({
   stepsContainer: {
     alignItems: 'flex-start',

package/lib/esm/StepTracker/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     1: {
       stepLabel: 'Step %{stepNumber}',

package/lib/esm/TabBar/TabBar.js

@@ -2,9 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import TabBarItem from './TabBarItem';
-import { useThemeTokens } from '../ThemeProvider';
-import { variantProp, getTokensPropType, selectSystemProps, a11yProps, viewProps } from '../utils';
+import { TabBarItem } from './TabBarItem';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { variantProp } from '../utils/props/variantProp';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { a11yProps } from '../utils/props/a11yProps';
+import { viewProps } from '../utils/props/viewProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const selectTabBarContainerStyles = _ref => {
   let {
@@ -51,17 +55,19 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  *     items={items}
  *     initiallySelectedItem="1"
  *     onChange={(itemId) => console.log(itemId)}
+ *     accessibilityLabel="Main navigation"
  *   />
  * )
  */
 
-const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+export const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     items = [],
     initiallySelectedItem = '0',
     onChange,
     variant,
     tokens,
+    accessibilityLabel,
     ...rest
   } = _ref3;
   const [isSelected, setIsSelected] = React.useState(initiallySelectedItem);
@@ -76,6 +82,8 @@ const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(View, {
       style: [styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)],
+      accessibilityRole: "tablist",
+      accessibilityLabel: accessibilityLabel,
       children: items.map((item, index) => /*#__PURE__*/_jsx(TabBarItem, {
         label: item.label,
         href: item.href,
@@ -84,7 +92,6 @@ const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         iconActive: item.iconActive,
         onPress: () => handlePress(item.id),
         id: `tab-item-${index}`,
-        accessibilityRole: "tablist",
         tokens: item.tokens
       }, item.id))
     })
@@ -109,7 +116,9 @@ TabBar.propTypes = {
   /** Variant of TabBar for styling purposes. */
   variant: variantProp.propType,
   /** Tokens for theming and styling. */
-  tokens: getTokensPropType('TabBar')
+  tokens: getTokensPropType('TabBar'),
+  /** Accessible label for the tab bar navigation region, used by screen readers to identify the tablist. */
+  accessibilityLabel: PropTypes.string
 };
 const styles = StyleSheet.create({
   tabBar: {
@@ -123,5 +132,4 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     width: '100%'
   }
-});
-export default TabBar;
+});

package/lib/esm/TabBar/TabBarItem.js

@@ -3,10 +3,12 @@ import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { getTokensPropType, resolvePressableTokens, variantProp } from '../utils';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import Typography from '../Typography';
-import Spacer from '../Spacer';
+import { getTokensPropType } from '../utils/props/tokens';
+import { resolvePressableTokens } from '../utils/pressability';
+import { variantProp } from '../utils/props/variantProp';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { Typography } from '../Typography/Typography';
+import { Spacer } from '../Spacer/Spacer';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const selectTypographyStyles = (_ref, isSelected) => {
   let {
@@ -57,7 +59,7 @@ const selectContainerStyles = _ref4 => {
     alignItems: 'center'
   };
 };
-const TabBarItem = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+export const TabBarItem = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     href,
     variant,
@@ -171,5 +173,4 @@ const styles = StyleSheet.create({
     minHeight: 40,
     aspectRatio: 1.1
   }
-});
-export default TabBarItem;
+});

package/lib/esm/Tabs/Tabs.js

@@ -1,13 +1,23 @@
 import React from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
-import ABBPropTypes from 'airbnb-prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import StackView from '../StackView';
-import { a11yProps, getTokensPropType, focusHandlerProps, pressProps, selectSystemProps, useHash, useInputValue, useResponsiveProp, variantProp, viewProps, withLinkRouter } from '../utils';
-import HorizontalScroll, { horizontalScrollUtils, HorizontalScrollButton } from '../HorizontalScroll';
-import TabsItem from './TabsItem';
-import TabsDropdown from './TabsDropdown';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { StackView } from '../StackView/StackView';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { focusHandlerProps } from '../utils/props/handlerProps';
+import { pressProps } from '../utils/props/pressProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useHash } from '../utils/useHash';
+import { useInputValue } from '../utils/input';
+import { useResponsiveProp } from '../utils/useResponsiveProp';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { withLinkRouter } from '../utils/withLinkRouter';
+import { HorizontalScroll, horizontalScrollUtils } from '../HorizontalScroll/HorizontalScroll';
+import { HorizontalScrollButton } from '../HorizontalScroll/HorizontalScrollButton';
+import { TabsItem } from './TabsItem';
+import { TabsDropdown } from './TabsDropdown';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
@@ -50,7 +60,7 @@ const getStackViewTokens = variant => {
  * `navigation`as the `accessibilityRole` to te Tabs component, this will cause
  * TabItems to default to a role of link and obtain aria-current behaviour.
  */
-const Tabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Tabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     itemTokens,
@@ -185,7 +195,9 @@ Tabs.propTypes = {
     href: PropTypes.string,
     label: PropTypes.string,
     id: PropTypes.string,
-    ref: ABBPropTypes.ref(),
+    ref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+      current: PropTypes.any
+    })]),
     render: PropTypes.func
   })),
   /**
@@ -207,5 +219,4 @@ Tabs.propTypes = {
    */
   scrollButtonTokens: getTokensPropType('HorizontalScrollButton'),
   variant: variantProp.propType
-};
-export default Tabs;
+};

package/lib/esm/Tabs/TabsDropdown.js

@@ -5,12 +5,23 @@ 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 { useThemeTokensCallback, applyTextStyles, useTheme } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, resolvePressableTokens, selectSystemProps, selectTokens, useOverlaidPosition, useCopy, variantProp, viewProps, withLinkRouter } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import Icon from '../Icon';
-import Listbox from '../Listbox';
-import dictionary from './dictionary';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { applyTextStyles } from '../ThemeProvider/utils/styles';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType, selectTokens } from '../utils/props/tokens';
+import { resolvePressableTokens } from '../utils/pressability';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useOverlaidPosition } from '../utils/useOverlaidPosition';
+import { useCopy } from '../utils/useCopy';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { withLinkRouter } from '../utils/withLinkRouter';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { Icon } from '../Icon/Icon';
+import { Listbox } from '../Listbox/Listbox';
+import { ListboxOverlay } from '../Listbox/ListboxOverlay';
+import { dictionary } from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectButtonContentStyles = _ref => {
@@ -46,7 +57,7 @@ const selectButtonContentStyles = _ref => {
  * This is rendered automatically by `Tabs` on mobile viewports and when variant
  * is dropdown and isn't intended to be used directly.
  */
-const TabsDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const TabsDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     itemTokens,
     variant,
@@ -148,7 +159,7 @@ const TabsDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           })]
         });
       }
-    }), isOpen && /*#__PURE__*/_jsx(Listbox.Overlay, {
+    }), isOpen && /*#__PURE__*/_jsx(ListboxOverlay, {
       overlaidPosition: overlaidPosition,
       maxWidth: 400,
       minWidth: 200,
@@ -240,5 +251,4 @@ const styles = StyleSheet.create({
     width: '100%',
     minHeight: 44
   }
-});
-export default TabsDropdown;
+});

package/lib/esm/Tabs/TabsItem.js

@@ -5,10 +5,20 @@ 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 { applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, clickProps, getTokensPropType, linkProps, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
-import Spacer from '../Spacer';
-import { horizontalScrollUtils } from '../HorizontalScroll';
+import { applyTextStyles } from '../ThemeProvider/utils/styles';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { clickProps } from '../utils/props/clickProps';
+import { getTokensPropType, selectTokens } from '../utils/props/tokens';
+import { linkProps } from '../utils/props/linkProps';
+import { resolvePressableTokens } from '../utils/pressability';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { withLinkRouter } from '../utils/withLinkRouter';
+import { Spacer } from '../Spacer/Spacer';
+import { horizontalScrollUtils } from '../HorizontalScroll/HorizontalScroll';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const {
@@ -85,7 +95,7 @@ const selectContainerStyles = _ref3 => {
  *
  * This is rendered automatically by `Tabs` and isn't intended be used directly.
  */
-const TabsItem = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+const TabsItemInner = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     href,
     variant,
@@ -206,8 +216,8 @@ const TabsItem = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     }
   });
 });
-TabsItem.displayName = 'TabsItem';
-TabsItem.propTypes = {
+TabsItemInner.displayName = 'TabsItem';
+TabsItemInner.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('TabsItem'),
   variant: variantProp.propType,
@@ -241,4 +251,4 @@ const staticStyles = StyleSheet.create({
     })
   }
 });
-export default withLinkRouter(TabsItem);
+export const TabsItem = withLinkRouter(TabsItemInner);

package/lib/esm/Tabs/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     selectTab: 'Select tab'
   },

package/lib/esm/Tags/Tags.js

@@ -1,15 +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 Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
-import ButtonBase from '../Button/ButtonBase';
-import Icon from '../Icon';
-import { StackWrap, getStackedContent } from '../StackView';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, pressProps, selectSystemProps, selectTokens, useMultipleInputValues, variantProp, viewProps } from '../utils';
+import { ButtonBase } from '../Button/ButtonBase';
+import { Icon } from '../Icon/Icon';
+import { StackWrap } from '../StackView/StackWrap';
+import { getStackedContent } from '../StackView/getStackedContent';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { containUniqueFields } from '../utils/containUniqueFields';
+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 { useMultipleInputValues } from '../utils/input';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
 import { getPressHandlersWithArgs } from '../utils/pressability';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -55,7 +63,7 @@ const separateIconTextTokens = (_ref, returnRest) => {
 };
 const selectIconTextTokens = tokens => separateIconTextTokens(tokens, false);
 const selectNonIconTextTokens = tokens => separateIconTextTokens(tokens, true);
-const Tags = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const Tags = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     variant,
     tokens,
@@ -217,7 +225,9 @@ Tags.propTypes = {
     /**
      * An optional ref for one individual Tag button in the tags
      */
-    ref: ABBPropTypes.ref()
+    ref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+      current: PropTypes.any
+    })])
   })),
   /**
    * If provided, this function is called when the current selection is changed
@@ -241,5 +251,4 @@ Tags.propTypes = {
    * AccesibilityRole for the Tags
    */
   accessibilityRole: PropTypes.string
-};
-export default Tags;
+};

package/lib/esm/TextInput/TextArea.js

@@ -1,10 +1,17 @@
 import React from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
-import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
-import InputSupports from '../InputSupports';
-import TextInputBase from './TextInputBase';
-import { useThemeTokens } from '../ThemeProvider';
-import textInputPropTypes from './propTypes';
+import { a11yProps } from '../utils/props/a11yProps';
+import { focusHandlerProps, textInputHandlerProps } from '../utils/props/handlerProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { inputSupportsProps } from '../utils/props/inputSupportsProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { textInputProps } from '../utils/props/textInputProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { InputSupports } from '../InputSupports/InputSupports';
+import { TextInputBase } from './TextInputBase';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { textInputPropTypes } from './propTypes';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
 
@@ -32,7 +39,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, foc
  * or an indicator that the field is optional.
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
-const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant = {},
@@ -103,5 +110,4 @@ TextArea.propTypes = {
   tokens: getTokensPropType('TextArea', 'TextInput'),
   // TODO: support both TextArea and TextInput tokens
   variant: variantProp.propType
-};
-export default TextArea;
+};

package/lib/esm/TextInput/TextInput.js

@@ -1,9 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
-import InputSupports from '../InputSupports';
-import TextInputBase from './TextInputBase';
-import textInputPropTypes from './propTypes';
+import { a11yProps } from '../utils/props/a11yProps';
+import { focusHandlerProps, textInputHandlerProps } from '../utils/props/handlerProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { inputSupportsProps } from '../utils/props/inputSupportsProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { textInputProps } from '../utils/props/textInputProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { InputSupports } from '../InputSupports/InputSupports';
+import { TextInputBase } from './TextInputBase';
+import { textInputPropTypes } from './propTypes';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
 
@@ -25,7 +32,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, foc
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     nativeID,
@@ -75,5 +82,4 @@ TextInput.propTypes = {
   onKeyPress: PropTypes.func,
   tokens: getTokensPropType('TextInput'),
   variant: variantProp.propType
-};
-export default TextInput;
+};

package/lib/esm/TextInput/TextInputBase.js

@@ -4,12 +4,23 @@ import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import NativeTextInput from "react-native-web/dist/exports/TextInput";
 import View from "react-native-web/dist/exports/View";
-import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
-import StackView from '../StackView';
-import IconButton from '../IconButton';
-import Icon from '../Icon';
-import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useCopy, useInputValue, useSpacingScale, variantProp, viewProps } from '../utils';
-import dictionary from './dictionary';
+import { applyTextStyles, applyOuterBorder } from '../ThemeProvider/utils/styles';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { StackView } from '../StackView/StackView';
+import { IconButton } from '../IconButton/IconButton';
+import { Icon } from '../Icon/Icon';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { textInputHandlerProps } from '../utils/props/handlerProps';
+import { textInputProps } from '../utils/props/textInputProps';
+import { useCopy } from '../utils/useCopy';
+import { useInputValue } from '../utils/input';
+import { useSpacingScale } from '../utils/useSpacingScale';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { dictionary } from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, viewProps]);
 const selectInputStyles = function (_ref, themeOptions, inactive, type) {
@@ -198,7 +209,7 @@ const getIcon = function () {
     testID: selectedIcon.testID
   });
 };
-const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+export const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     buttons = [],
     copy = 'en',
@@ -436,7 +447,6 @@ TextInputBase.propTypes = {
   value: PropTypes.string,
   variant: variantProp.propType
 };
-export default TextInputBase;
 const staticStyles = StyleSheet.create({
   buttonsContainer: {
     position: 'absolute',

package/lib/esm/TextInput/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     clearButtonAccessibilityLabel: 'Clear',
     showPasswordAccessibilityLabel: 'Show Password',

package/lib/esm/TextInput/propTypes.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 // These are prop types specific to UDS TextInput; see also ../utils/props/textInputProps
 // for generic React Native props and HTML input attrs that are passed through.
-const textInputPropTypes = {
+export const textInputPropTypes = {
   /**
    * If the input's state is to be controlled by a parent component, use this prop
    * together with the `onChange` to pass down and update the lifted state.
@@ -30,5 +30,4 @@ const textInputPropTypes = {
    * Will receive the input's value as an argument.
    */
   onChange: PropTypes.func
-};
-export default textInputPropTypes;
+};

package/lib/esm/ThemeProvider/ThemeProvider.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { validateThemeTokensVersion } from './utils';
-import responsiveProps from '../utils/props/responsiveProps';
+import { validateThemeTokensVersion } from './utils/theme-tokens';
+import { responsiveProps } from '../utils/props/responsiveProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const uninitialisedError = new Error('Theme context used outside of ThemeProvider');
 export const ThemeContext = /*#__PURE__*/React.createContext(uninitialisedError);
@@ -18,7 +18,9 @@ const defaultThemeOptions = {
   enableHelmetSSR: true,
   enableMediaQueryStyleSheet: false
 };
-const ThemeProvider = _ref => {
+export const ThemeProvider = /*#__PURE__*/React.forwardRef(
+// eslint-disable-next-line no-unused-vars
+(_ref, _) => {
   let {
     children,
     defaultTheme,
@@ -49,7 +51,8 @@ const ThemeProvider = _ref => {
       children: children
     })
   });
-};
+});
+ThemeProvider.displayName = 'ThemeProvider';
 ThemeProvider.propTypes = {
   children: PropTypes.node.isRequired,
   defaultTheme: PropTypes.shape({
@@ -80,5 +83,4 @@ ThemeProvider.propTypes = {
     contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number),
     enableMediaQueryStyleSheet: PropTypes.bool
   })
-};
-export default ThemeProvider;
+};

package/lib/esm/ThemeProvider/useResponsiveThemeTokens.js

@@ -1,6 +1,6 @@
 import { viewports } from '@telus-uds/system-constants';
-import useTheme from './useTheme';
-import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils';
+import { useTheme } from './useTheme';
+import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils/theme-tokens';
 const getResponsiveThemeTokens = function (_ref, tokensProp) {
   let {
     rules = [],
@@ -69,7 +69,7 @@ const doesConditionApply = (_ref2, appearances) => {
  * @returns { ResponsiveObject }
  */
 
-const useResponsiveThemeTokens = function (componentName) {
+export const useResponsiveThemeTokens = function (componentName) {
   let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let states = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
@@ -77,5 +77,4 @@ const useResponsiveThemeTokens = function (componentName) {
   const componentTheme = getComponentTheme(theme, componentName);
   const themeTokens = getResponsiveThemeTokens(componentTheme, tokens, variants, states);
   return themeTokens;
-};
-export default useResponsiveThemeTokens;
+};

package/lib/esm/ThemeProvider/useResponsiveThemeTokensCallback.js

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { viewports } from '@telus-uds/system-constants';
-import useTheme from './useTheme';
-import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils';
+import { useTheme } from './useTheme';
+import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils/theme-tokens';
 const getResponsiveThemeTokens = function (_ref, tokensProp) {
   let {
     rules = [],
@@ -103,7 +103,7 @@ const doesConditionApply = (_ref2, appearances) => {
  *    - callback function that returns an overridable responsive tokens object for current state. Only pass
  *      tokenOverrides in rare cases where tokens overrides are also generated outside hook scope.
  */
-const useResponsiveThemeTokensCallback = function (componentName) {
+export const useResponsiveThemeTokensCallback = function (componentName) {
   let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const theme = useTheme();
@@ -113,5 +113,4 @@ const useResponsiveThemeTokensCallback = function (componentName) {
     return getResponsiveThemeTokens(componentTheme, resolvedTokens, variants, states);
   }, [componentTheme, tokens, variants]);
   return getResponsiveThemeTokensCallback;
-};
-export default useResponsiveThemeTokensCallback;
+};

package/lib/esm/ThemeProvider/useSetTheme.js

@@ -1,6 +1,6 @@
 import { useCallback, useContext } from 'react';
 import { ThemeSetterContext } from './ThemeProvider';
-const useSetTheme = () => {
+export const useSetTheme = () => {
   // Replace current theme with provided object
   const setTheme = useContext(ThemeSetterContext);
   // Fail fast if dev uses useSetTheme outside of ThemeProvider
@@ -20,5 +20,4 @@ const useSetTheme = () => {
     setTheme,
     editTheme
   };
-};
-export default useSetTheme;
+};