@telus-uds/components-base 3.29.1 → 4.0.0-alpha.1

package/lib/esm/HorizontalScroll/ScrollViewEnd.js

@@ -12,7 +12,7 @@ const DEBOUNCE_MS = 100;
  * so we need to work around it with debouncing on `onScroll`. See:
  * https://github.com/necolas/react-native-web/issues/1021
  */
-const ScrollViewEnd = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ScrollViewEnd = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     onScrollEnd,
     onScroll = null,
@@ -42,5 +42,4 @@ ScrollViewEnd.displayName = 'ScrollViewEnd';
 ScrollViewEnd.propTypes = {
   onScrollEnd: PropTypes.func.isRequired,
   onScroll: PropTypes.func
-};
-export default ScrollViewEnd;
+};

package/lib/esm/HorizontalScroll/ScrollViewEnd.native.js

@@ -7,7 +7,7 @@ import ScrollView from "react-native-web/dist/exports/ScrollView";
  * React Native has two scroll end handlers, we want to treat them both the same.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const ScrollViewEnd = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ScrollViewEnd = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     onScrollEnd,
     ...props
@@ -22,5 +22,4 @@ const ScrollViewEnd = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 ScrollViewEnd.displayName = 'ScrollViewEnd';
 ScrollViewEnd.propTypes = {
   onScrollEnd: PropTypes.func.isRequired
-};
-export default ScrollViewEnd;
+};

package/lib/esm/HorizontalScroll/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     // English text from TDS Community `Tabs`
     previousLabel: 'Move menu to the left',

package/lib/esm/Icon/Icon.js

@@ -3,10 +3,11 @@ import Platform from "react-native-web/dist/exports/Platform";
 import View from "react-native-web/dist/exports/View";
 import useWindowDimensions from "react-native-web/dist/exports/useWindowDimensions";
 import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { getTokensPropType } from '../utils/props/tokens';
+import { variantProp } from '../utils/props/variantProp';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     icon: IconComponent,
     accessibilityLabel,
@@ -97,5 +98,4 @@ Icon.propTypes = {
    * (e.g.) `import { MyIcon } from @telus-uds/palette-<brand>/build/web/icons`
    */
   icon: PropTypes.elementType.isRequired
-};
-export default Icon;
+};

package/lib/esm/Icon/IconText.js

@@ -4,9 +4,9 @@ import Platform from "react-native-web/dist/exports/Platform";
 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 Icon, { iconComponentPropTypes } from './Icon';
-import { getStackedContent } from '../StackView';
-import { spacingProps } from '../utils';
+import { Icon, iconComponentPropTypes } from './Icon';
+import { getStackedContent } from '../StackView/getStackedContent';
+import { spacingProps } from '../utils/props/spacingProps';
 
 /**
  * Returns an icon and some text with a sized gap between them. This is a utility component
@@ -17,7 +17,7 @@ import { spacingProps } from '../utils';
  *  - within a container with `flexDirection: 'row'`
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const IconText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const IconText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space,
     iconPosition = 'left',
@@ -105,5 +105,4 @@ const staticStyles = StyleSheet.create({
   adjustedContainer: {
     position: 'absolute'
   }
-});
-export default IconText;
+});

package/lib/esm/IconButton/IconButton.js

@@ -4,9 +4,19 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 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 { applyOuterBorder, useThemeTokensCallback, applyShadowToken } from '../ThemeProvider';
-import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, resolvePressableState, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
-import Icon from '../Icon';
+import { applyOuterBorder, applyShadowToken } from '../ThemeProvider/utils/styles';
+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 { hrefAttrsProp } from '../utils/props/hrefAttrsProp';
+import { linkProps } from '../utils/props/linkProps';
+import { resolvePressableState } 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 { Icon } from '../Icon/Icon';
 
 // function to get the dimentionals of the conditionals
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -119,7 +129,7 @@ const selectInnerStyle = (_ref2, password) => {
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-const IconButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const IconButtonBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant = {},
@@ -178,8 +188,8 @@ const IconButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
   });
 });
-IconButton.displayName = 'IconButton';
-IconButton.propTypes = {
+IconButtonBase.displayName = 'IconButton';
+IconButtonBase.propTypes = {
   ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('IconButton'),
@@ -214,4 +224,7 @@ const staticStyles = StyleSheet.create({
     alignSelf: 'baseline'
   }
 });
-export default withLinkRouter(IconButton);
+
+// Export unwrapped component for react-docgen to extract info for docsite
+export { IconButtonBase };
+export const IconButton = withLinkRouter(IconButtonBase);

package/lib/esm/InputLabel/InputLabel.js

@@ -3,11 +3,17 @@ 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, useTheme, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils';
-import LabelContent from './LabelContent';
-import Tooltip from '../Tooltip';
-import tooltipPropTypes from '../Tooltip/shared';
+import { applyTextStyles } from '../ThemeProvider/utils/styles';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType, selectTokens } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { LabelContent } from './LabelContent';
+import { Tooltip } from '../Tooltip/Tooltip.native';
+import { propTypes as tooltipPropTypes } from '../Tooltip/shared';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectLabelStyles = (tokens, themeOptions) => applyTextStyles({
@@ -39,7 +45,7 @@ const selectGapStyles = _ref2 => {
     marginRight: gap
   };
 };
-const InputLabel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+export const InputLabel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     copy = 'en',
     label,
@@ -154,7 +160,6 @@ InputLabel.propTypes = {
   tokens: getTokensPropType('InputLabel'),
   variant: variantProp.propType
 };
-export default InputLabel;
 const staticStyles = StyleSheet.create({
   container: {
     flexShrink: 1,

package/lib/esm/InputLabel/LabelContent.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-const LabelContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const LabelContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     forId
@@ -24,5 +24,4 @@ const staticStyles = {
   inheritCursor: {
     cursor: 'inherit'
   }
-};
-export default LabelContent;
+};

package/lib/esm/InputLabel/LabelContent.native.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View"; // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
 import { jsx as _jsx } from "react/jsx-runtime";
-const LabelContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const LabelContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
@@ -14,5 +14,4 @@ const LabelContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 LabelContent.displayName = 'LabelContent';
 LabelContent.propTypes = {
   children: PropTypes.node
-};
-export default LabelContent;
+};

package/lib/esm/InputSupports/InputSupports.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import InputLabel from '../InputLabel';
-import Feedback from '../Feedback';
-import StackView from '../StackView';
-import { useThemeTokens } from '../ThemeProvider';
-import useInputSupports from './useInputSupports';
-import { getTokensPropType, useCopy } from '../utils';
-import dictionary from './dictionary';
-import tooltipPropTypes from '../Tooltip/shared';
+import { InputLabel } from '../InputLabel/InputLabel';
+import { Feedback } from '../Feedback/Feedback';
+import { StackView } from '../StackView/StackView';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { useInputSupports } from './useInputSupports';
+import { getTokensPropType } from '../utils/props/tokens';
+import { useCopy } from '../utils/useCopy';
+import { dictionary } from './dictionary';
+import { propTypes as tooltipPropTypes } from '../Tooltip/shared';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     copy = 'en',
@@ -133,5 +134,4 @@ InputSupports.propTypes = {
    * Max number of characters that allows an input text.
    */
   maxCharacterAllowed: PropTypes.number
-};
-export default InputSupports;
+};

package/lib/esm/InputSupports/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     maxCharacters: 'Maximum %{charCount} characters',
     charactersRemaining: '%{charCount} characters remaining',

package/lib/esm/InputSupports/useInputSupports.js

@@ -1,8 +1,8 @@
-import useUniqueId from '../utils/useUniqueId';
-import { useCopy } from '../utils';
-import dictionary from './dictionary';
+import { useUniqueId } from '../utils/useUniqueId';
+import { useCopy } from '../utils/useCopy';
+import { dictionary } from './dictionary';
 const joinDefined = array => array.filter(item => item !== undefined).join(' ');
-const useInputSupports = _ref => {
+export const useInputSupports = _ref => {
   let {
     label,
     feedback,
@@ -34,5 +34,4 @@ const useInputSupports = _ref => {
     feedbackId,
     a11yProps
   };
-};
-export default useInputSupports;
+};

package/lib/esm/Link/ChevronLink.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { selectTokens, getTokensPropType, linkProps } from '../utils';
-import LinkBase from './LinkBase';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { selectTokens, getTokensPropType } from '../utils/props/tokens';
+import { linkProps } from '../utils/props/linkProps';
+import { LinkBase } from './LinkBase';
 
 /**
  * `ChevronLink` is a convenience wrapper around the `Link` component to enable "directional" links.
@@ -11,7 +12,7 @@ import LinkBase from './LinkBase';
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const ChevronLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ChevronLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     direction = 'right',
     children,
@@ -56,8 +57,7 @@ ChevronLink.propTypes = {
   children: PropTypes.node,
   variant: PropTypes.exact({
     size: PropTypes.oneOf(['large', 'small', 'micro']),
-    alternative: PropTypes.bool,
-    inverse: PropTypes.bool
+    style: PropTypes.oneOf(['inline', 'subtle', 'feature', 'danger', 'inverse'])
   }),
   ...linkProps.types,
   tokens: getTokensPropType('ChevronLink', 'Link'),
@@ -65,5 +65,4 @@ ChevronLink.propTypes = {
    * Changes direction of chevron icon
    */
   direction: PropTypes.oneOf(['left', 'right'])
-};
-export default ChevronLink;
+};

package/lib/esm/Link/InlinePressable.js

@@ -16,7 +16,7 @@ import PropTypes from 'prop-types';
  * @param {PressableProps} PressableProps
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const InlinePressable = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const InlinePressable = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     inlineFlex = true,
@@ -44,5 +44,4 @@ const staticStyles = StyleSheet.create({
   inlineFlex: {
     display: 'inline-flex'
   }
-});
-export default InlinePressable;
+});

package/lib/esm/Link/InlinePressable.native.js

@@ -43,7 +43,7 @@ const pressablePropsToTouchable = _ref => {
  *
  * @param {PressableProps} PressableProps
  */
-const InlinePressable = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const InlinePressable = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     onPress,
     children,
@@ -82,5 +82,4 @@ InlinePressable.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func]),
   onPress: PropTypes.func
-};
-export default InlinePressable;
+};

package/lib/esm/Link/Link.js

@@ -1,9 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import LinkBase from './LinkBase';
+import { getTokensPropType } from '../utils/props/tokens';
+import { variantProp } from '../utils/props/variantProp';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { LinkBase } from './LinkBase';
+import { iconComponentPropTypes } from '../Icon/Icon';
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { a11yProps } from '../utils/props/a11yProps';
+import { linkProps as linkPropTypes } from '../utils/props/linkProps';
+import { viewProps } from '../utils/props/viewProps';
+import { contentfulProps } from '../utils/props/contentfulProps';
+
+// eslint-disable-next-line no-unused-vars
 import { jsx as _jsx } from "react/jsx-runtime";
-const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const [_, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkPropTypes, viewProps, contentfulProps]);
+export const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     href,
     children,
@@ -26,10 +38,40 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 Link.displayName = 'Link';
 Link.propTypes = {
-  ...LinkBase.propTypes,
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Link'),
+  /**
+   * href for the Link
+   */
+  href: PropTypes.string,
+  /**
+   * AccessibilityRole for the link base
+   */
+  accessibilityRole: PropTypes.string,
+  /**
+   * Children nodes that can be added
+   */
+  variant: variantProp.propType,
+  /**
+   * Optional variant that may be passed down to the link's icon if there is one
+   */
+  iconProps: PropTypes.exact(iconComponentPropTypes),
+  /**
+   * A function component for an SVG icon to render inside the link. Inherits size and color from
+   * the link and any Typography the link is nested inside.
+   */
+  icon: PropTypes.elementType,
+  /**
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left, right or inline with Link.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
+  /**
+   * On Web if href is passed, React Native Web maps this object's props to
+   * `rel`, `target` and `download` attrs.
+   */
+  hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */
   dataSet: PropTypes.object
-};
-export default Link;
+};

package/lib/esm/Link/LinkBase.js

@@ -3,13 +3,23 @@ import PropTypes from 'prop-types';
 import Text from "react-native-web/dist/exports/Text";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, selectSystemProps, variantProp, viewProps, contentfulProps } from '../utils/props';
+import { a11yProps } from '../utils/props/a11yProps';
+import { clickProps } from '../utils/props/clickProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp';
+import { linkProps } from '../utils/props/linkProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { contentfulProps } from '../utils/props/contentfulProps';
+import { withLinkRouter } from '../utils/withLinkRouter';
 import { resolvePressableTokens } from '../utils/pressability';
-import { withLinkRouter } from '../utils';
-import InlinePressable from './InlinePressable';
-import MobileIconTextContent from './MobileIconTextContent';
-import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider';
-import { IconText, iconComponentPropTypes } from '../Icon';
+import { MobileIconTextContent } from './MobileIconTextContent';
+import { InlinePressable } from './InlinePressable';
+import { applyTextStyles, applyOuterBorder } from '../ThemeProvider/utils/styles';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { iconComponentPropTypes } from '../Icon/Icon';
+import { IconText } from '../Icon/IconText';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps, contentfulProps]);
 const selectOuterBorderStyles = _ref => {
@@ -128,7 +138,7 @@ const selectIconTokens = _ref5 => {
  *   dropped in favour of investigating if a full-featured CSS-in-JS package could or
  *   should be used more widely (e.g. styled components)
  */
-const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+const LinkBaseInner = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     href,
     icon,
@@ -228,8 +238,8 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     }
   });
 });
-LinkBase.displayName = 'LinkBase';
-LinkBase.propTypes = {
+LinkBaseInner.displayName = 'LinkBase';
+LinkBaseInner.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Link'),
   /**
@@ -237,9 +247,9 @@ LinkBase.propTypes = {
    */
   href: PropTypes.string,
   /**
-   * AccesibilityRole for the link base
+   * AccessibilityRole for the link base
    */
-  accessibilityrole: PropTypes.string,
+  accessibilityRole: PropTypes.string,
   /**
    * Children nodes that can be added
    */
@@ -290,4 +300,4 @@ const staticStyles = StyleSheet.create({
     })
   }
 });
-export default withLinkRouter(LinkBase);
+export const LinkBase = withLinkRouter(LinkBaseInner);

package/lib/esm/Link/MobileIconTextContent.js

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Icon, { iconComponentPropTypes } from '../Icon/Icon';
-import { spacingProps } from '../utils';
+import { Icon, iconComponentPropTypes } from '../Icon/Icon';
+import { spacingProps } from '../utils/props/spacingProps';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const MobileIconTextContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const MobileIconTextContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 0,
     iconPosition = 'left',
@@ -143,5 +143,4 @@ const staticStyles = StyleSheet.create({
   inlineIconContainer: {
     position: 'absolute'
   }
-});
-export default MobileIconTextContent;
+});

package/lib/esm/Link/TextButton.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import LinkBase from './LinkBase';
-import { variantProp } from '../utils';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { LinkBase } from './LinkBase';
+import { variantProp } from '../utils/props/variantProp';
 
 /**
  * `TextButton` is a button that looks like a Link. It uses the same theming and variants as
@@ -10,7 +10,7 @@ import { variantProp } from '../utils';
  * take place on the current page, or for navigation within an app.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const TextButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const TextButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     onPress,
     children,
@@ -39,5 +39,4 @@ TextButton.propTypes = {
   variant: variantProp.propType,
   /** Accesibility role for TextButton */
   accessibilityRole: PropTypes.string
-};
-export default TextButton;
+};

package/lib/esm/List/List.js

@@ -3,7 +3,11 @@ 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 { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+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 { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const LIST_ITEM_TYPE = 'ListItem';
@@ -21,7 +25,7 @@ const isListItem = element => {
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
-const List = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const List = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     showDivider,
@@ -84,8 +88,7 @@ List.propTypes = {
   showDivider: PropTypes.bool,
   /**
    * The vertical alignment of the icon in ListItems.
-   * This prop is passed down to ListItem components and can be overridden in individual List.Item components.
+   * This prop is passed down to ListItem components and can be overridden in individual ListItem components.
    */
   iconVerticalAlign: PropTypes.oneOf(['top', 'center', 'bottom'])
-};
-export default List;
+};

package/lib/esm/List/ListItem.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ListItemBase from './ListItemBase';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils';
+import { ListItemBase } from './ListItemBase';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { getTokensPropType } from '../utils/props/tokens';
+import { variantProp } from '../utils/props/variantProp';
 
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const ListItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ListItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -45,5 +46,4 @@ ListItem.propTypes = {
   iconColor: PropTypes.string,
   /** Size of the icon */
   iconSize: PropTypes.number
-};
-export default ListItem;
+};

package/lib/esm/List/ListItemBase.js

@@ -3,11 +3,15 @@ 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 { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import ListItemContent from './ListItemContent';
-import ListItemMark from './ListItemMark';
-import Typography from '../Typography';
-import { useThemeTokens } from '../ThemeProvider';
+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 { ListItemContent } from './ListItemContent';
+import { ListItemMark } from './ListItemMark';
+import { Typography } from '../Typography/Typography';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const VERTICAL_CENTERING_DIVISOR = 2;
@@ -47,7 +51,7 @@ const selectAlignmentStyles = iconVerticalAlign => ({
 const calculateIconMarginTop = (itemIconSize, fontSize, lineHeightRatio) => {
   return (fontSize * lineHeightRatio - itemIconSize) / VERTICAL_CENTERING_DIVISOR;
 };
-const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+export const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     icon,
@@ -178,5 +182,4 @@ ListItemBase.propTypes = {
    * In case it is not the last item allow display divider
    */
   showDivider: PropTypes.bool
-};
-export default ListItemBase;
+};