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

package/lib/esm/PriceLockup/PriceLockup.js

@@ -2,13 +2,16 @@ import React 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 Divider from '../Divider';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import { selectSystemProps, getTokensPropType, htmlAttrs, viewProps } from '../utils';
-import renderFootnoteContent from './utils/renderFootnoteContent';
-import renderPrice from './utils/renderPrice';
-import renderTypography from './utils/renderTypography';
+import { Divider } from '../Divider/Divider';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { htmlAttrs } from '../utils/htmlAttrs';
+import { viewProps } from '../utils/props/viewProps';
+import { renderFootnoteContent } from './utils/renderFootnoteContent';
+import { renderPrice } from './utils/renderPrice';
+import { renderTypography } from './utils/renderTypography';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const PRICE_BASELINE_VARIANT = 'baseline';
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
@@ -94,7 +97,7 @@ const selectContainertokens = _ref7 => {
     alignItems: alignItemsText
   };
 };
-const PriceLockup = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+export const PriceLockup = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -214,7 +217,6 @@ PriceLockup.propTypes = {
    */
   tokens: getTokensPropType('PriceLockup')
 };
-export default PriceLockup;
 const staticStyles = StyleSheet.create({
   priceLockupContainer: {
     alignSelf: 'flex-start'

package/lib/esm/PriceLockup/utils/renderFootnoteContent.js

@@ -3,8 +3,8 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
 import Text from "react-native-web/dist/exports/Text";
 import Platform from "react-native-web/dist/exports/Platform";
-import renderTypography from './renderTypography';
-import renderFootnoteLinks from './renderFootnoteLinks';
+import { renderTypography } from './renderTypography';
+import { renderFootnoteLinks } from './renderFootnoteLinks';
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const selectFootnoteContainer = _ref => {
   let {
@@ -30,7 +30,7 @@ const selectFootnoteLinksStyles = _ref3 => {
     marginLeft: bottomLinksMarginLeft
   };
 };
-const renderFootnoteContent = (footnoteMarginTop, bottomTextMarginTop, bottomText, bottomTextTypographyTokens, fontColor, footnoteLinks, bottomLinksMarginLeft, onClickFootnote, themeTokens) => {
+export const renderFootnoteContent = (footnoteMarginTop, bottomTextMarginTop, bottomText, bottomTextTypographyTokens, fontColor, footnoteLinks, bottomLinksMarginLeft, onClickFootnote, themeTokens) => {
   const MAX_FOOTNOTE_LINKS_ALLOWED = 3;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
@@ -54,7 +54,6 @@ const renderFootnoteContent = (footnoteMarginTop, bottomTextMarginTop, bottomTex
     }) : null]
   });
 };
-export default renderFootnoteContent;
 const staticStyles = StyleSheet.create({
   footnoteContainer: {
     flexDirection: 'row'

package/lib/esm/PriceLockup/utils/renderFootnoteLinks.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import FootnoteLink from '../../Footnote/FootnoteLink';
+import { FootnoteLink } from '../../Footnote/FootnoteLink';
 import { jsx as _jsx } from "react/jsx-runtime";
 const selectFootnoteLinkStyles = (_ref, footnoteLinks) => {
   let {
@@ -20,9 +20,8 @@ const selectFootnoteLinkStyles = (_ref, footnoteLinks) => {
     fontSize: footnoteLinkFontSize
   };
 };
-const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) => footnoteLinks?.length > 0 ? /*#__PURE__*/_jsx(FootnoteLink, {
+export const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) => footnoteLinks?.length > 0 ? /*#__PURE__*/_jsx(FootnoteLink, {
   tokens: selectFootnoteLinkStyles(themeTokens, footnoteLinks),
   content: footnoteLinks,
   onClick: onClickFootnote
-}) : null;
-export default renderFootnoteLinks;
+}) : null;

package/lib/esm/PriceLockup/utils/renderPrice.js

@@ -3,9 +3,9 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
 import Text from "react-native-web/dist/exports/Text";
 import Platform from "react-native-web/dist/exports/Platform";
-import A11yText from '../../A11yText';
-import renderTypography from './renderTypography';
-import renderFootnoteLinks from './renderFootnoteLinks';
+import { A11yText } from '../../A11yText/A11yText';
+import { renderTypography } from './renderTypography';
+import { renderFootnoteLinks } from './renderFootnoteLinks';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const selectStrikeThroughStyles = _ref => {
   let {
@@ -38,7 +38,7 @@ const renderAmount = (amount, amountTypographyTokens, strikeThrough, a11yText, f
   }
   return amountText;
 };
-const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens, isPriceBaseline) => {
+export const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens, isPriceBaseline) => {
   const priceString = price;
   const lastDotPosition = priceString.lastIndexOf('.');
   const lastCommaPosition = priceString.lastIndexOf(',');
@@ -80,7 +80,6 @@ const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbo
     }) : null]
   });
 };
-export default renderPrice;
 const staticStyles = StyleSheet.create({
   priceContainerRow: {
     flexDirection: 'row'

package/lib/esm/PriceLockup/utils/renderTypography.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import Typography from '../../Typography';
+import { Typography } from '../../Typography/Typography';
 import { jsx as _jsx } from "react/jsx-runtime";
-const renderTypography = (value, themeTokens, ratePosition, fontColor) => {
+export const renderTypography = (value, themeTokens, ratePosition, fontColor) => {
   const customProps = ratePosition === 'bottom' && value !== '$' ? {
     variant: {
       size: 'micro'
@@ -19,5 +19,4 @@ const renderTypography = (value, themeTokens, ratePosition, fontColor) => {
     ...customProps,
     children: value
   });
-};
-export default renderTypography;
+};

package/lib/esm/ProductCard/ProductCard.js

@@ -3,17 +3,23 @@ import PropTypes from 'prop-types';
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
 import Image from "react-native-web/dist/exports/Image";
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import defaultDictionary from './dictionary';
-import { selectSystemProps, getTokensPropType, htmlAttrs, viewProps, useInputValue, useCopy, a11yProps } from '../utils';
-import Badge from '../Badge';
-import PriceLockup from '../PriceLockup';
-import Typography from '../Typography';
-import { Button } from '../Button';
-import StackView from '../StackView';
-import Box from '../Box';
-import Icon from '../Icon';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { dictionary as defaultDictionary } from './dictionary';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { htmlAttrs } from '../utils/htmlAttrs';
+import { viewProps } from '../utils/props/viewProps';
+import { useInputValue } from '../utils/input';
+import { useCopy } from '../utils/useCopy';
+import { a11yProps } from '../utils/props/a11yProps';
+import { Badge } from '../Badge/Badge';
+import { PriceLockup } from '../PriceLockup/PriceLockup';
+import { Typography } from '../Typography/Typography';
+import { Button } from '../Button/Button';
+import { StackView } from '../StackView/StackView';
+import { Box } from '../Box/Box';
+import { Icon } from '../Icon/Icon';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps, a11yProps]);
 const selectProductCardTokens = _ref => {
@@ -34,7 +40,7 @@ const selectProductCardTokens = _ref => {
     paddingVertical
   };
 };
-const ProductCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const ProductCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     copy = 'en',
     dictionary = defaultDictionary,
@@ -206,7 +212,6 @@ ProductCard.propTypes = {
   }),
   tokens: getTokensPropType('ProductCard')
 };
-export default ProductCard;
 const staticStyles = StyleSheet.create({
   container: {
     flexDirection: 'row',

package/lib/esm/ProductCard/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     badgeText: '',
     brandName: 'Brand name',

package/lib/esm/ProductCardGroup/ProductCardGroup.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
-import { selectSystemProps, htmlAttrs, viewProps, a11yProps } from '../utils';
-import ProductCard from '../ProductCard';
-import { StackWrap } from '../StackView';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { htmlAttrs } from '../utils/htmlAttrs';
+import { viewProps } from '../utils/props/viewProps';
+import { a11yProps } from '../utils/props/a11yProps';
+import { ProductCard } from '../ProductCard/ProductCard';
+import { StackWrap } from '../StackView/StackWrap';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps, a11yProps]);
-const ProductCardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ProductCardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     productCards,
     maxSelection = 1,
@@ -66,5 +69,4 @@ ProductCardGroup.propTypes = {
     image: PropTypes.object,
     dictionary: PropTypes.object
   })).isRequired
-};
-export default ProductCardGroup;
+};

package/lib/esm/Progress/Progress.js

@@ -2,9 +2,14 @@ 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 { applyShadowToken, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import ProgressContext from './ProgressContext';
+import { applyShadowToken } from '../ThemeProvider/utils/styles';
+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 { ProgressContext } from './ProgressContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectProgressStyles = _ref => {
@@ -62,7 +67,7 @@ const selectProgressStyles = _ref => {
  * role.
  *
  */
-const Progress = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const Progress = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
@@ -100,7 +105,6 @@ Progress.propTypes = {
    */
   variant: variantProp.propType
 };
-export default Progress;
 const staticStyles = StyleSheet.create({
   progressContainer: {
     position: 'relative'

package/lib/esm/Progress/ProgressBar.js

@@ -3,11 +3,16 @@ 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 ProgressBarBackground from './ProgressBarBackground';
-import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { ProgressBarBackground } from './ProgressBarBackground';
+import { applyShadowToken } from '../ThemeProvider/utils/styles';
+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 { MAX_PERCENT_VALUE, MIN_PERCENT_VALUE } from './constants';
-import ProgressContext from './ProgressContext';
+import { ProgressContext } from './ProgressContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectBarStyles = _ref => {
@@ -73,7 +78,7 @@ const selectBarStyles = _ref => {
  * - `accessibilityValue.text` (`aria-valuetext`): `%{percentage}%`,
  *
  */
-const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children = null,
     percentage = 0,
@@ -164,7 +169,6 @@ ProgressBar.propTypes = {
     current: PropTypes.number
   })
 };
-export default ProgressBar;
 const staticStyles = StyleSheet.create({
   bar: {
     height: '100%',

package/lib/esm/Progress/ProgressBarBackground.js

@@ -2,11 +2,11 @@ import React from 'react';
 import ImageBackground from "react-native-web/dist/exports/ImageBackground";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { INACTIVE_VARIANT, NEGATIVE_VARIANT } from './constants';
-import { variantProp } from '../utils';
+import { variantProp } from '../utils/props/variantProp';
 import { jsx as _jsx } from "react/jsx-runtime";
 const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='inactive' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23inactive");'%3E%3C/path%3E%3C/svg%3E`;
 const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='negative' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='1' shape-rendering='auto' stroke='rgba(255, 255, 255, 0.4)' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23negative");'%3E%3C/path%3E%3C/svg%3E`;
-const ProgressBarBackground = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ProgressBarBackground = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant
   } = _ref;
@@ -34,7 +34,6 @@ ProgressBarBackground.propTypes = {
    */
   variant: variantProp.propType
 };
-export default ProgressBarBackground;
 const staticStyles = StyleSheet.create({
   imageBackground: {
     height: '100%'

package/lib/esm/Progress/ProgressContext.js

@@ -1,5 +1,4 @@
 import { createContext } from 'react';
-const ProgressContext = /*#__PURE__*/createContext({
+export const ProgressContext = /*#__PURE__*/createContext({
   layers: false
-});
-export default ProgressContext;
+});

package/lib/esm/QuickLinks/QuickLinks.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import { getTokensPropType, variantProp } from '../utils';
-import List from '../List';
-import StackWrap from '../StackView/StackWrap';
-import QuickLinksCard from './QuickLinksCard';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { getTokensPropType } from '../utils/props/tokens';
+import { variantProp } from '../utils/props/variantProp';
+import { List } from '../List/List';
+import { StackWrap } from '../StackView/StackWrap';
+import { QuickLinksCard } from './QuickLinksCard';
 
 /**
  * QuickLinks renders a list of interactive items. How it renders these items depends on theme options:
@@ -14,7 +15,7 @@ import QuickLinksCard from './QuickLinksCard';
  *  - If the theme returns `card` token as true, it wraps the above with a `Card`.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const QuickLinks = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const QuickLinks = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -74,5 +75,4 @@ QuickLinks.propTypes = {
   tag: PropTypes.string,
   variant: variantProp.propType,
   children: PropTypes.node
-};
-export default QuickLinks;
+};

package/lib/esm/QuickLinks/QuickLinksCard.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils';
-import CardBase from '../Card/CardBase';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { getTokensPropType } from '../utils/props/tokens';
+import { variantProp } from '../utils/props/variantProp';
+import { CardBase } from '../Card/CardBase';
 
 /**
  * Private subcomponent for use within QuickLinks.
@@ -11,7 +12,7 @@ import CardBase from '../Card/CardBase';
  * QuickLinksCard theme rather than the Card theme.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const QuickLinksList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const QuickLinksCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -24,10 +25,9 @@ const QuickLinksList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children: children
   });
 });
-QuickLinksList.displayName = 'QuickLinksList';
-QuickLinksList.propTypes = {
+QuickLinksCard.displayName = 'QuickLinksCard';
+QuickLinksCard.propTypes = {
   tokens: getTokensPropType('QuickLinksCard'),
   variant: variantProp.propType,
   children: PropTypes.node
-};
-export default QuickLinksList;
+};

package/lib/esm/QuickLinks/QuickLinksItem.js

@@ -1,18 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getTokensPropType, variantProp, withLinkRouter } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import PressableListItemBase from '../List/PressableListItemBase';
-import ButtonBase from '../Button/ButtonBase';
+import { getTokensPropType } from '../utils/props/tokens';
+import { variantProp } from '../utils/props/variantProp';
+import { withLinkRouter } from '../utils/withLinkRouter';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { PressableListItemBase } from '../List/PressableListItemBase';
+import { ButtonBase } from '../Button/ButtonBase';
 
 /**
- * Public component exported as QuickLinks.Item, for use as children of QuickLinks.
+ * Public component exported as QuickLinksItem, for use as children of QuickLinks.
  *
  * Receives props injected by QuickLinks and renders the appropriate child component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const QuickLinksItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const QuickLinksItemBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -39,8 +41,8 @@ const QuickLinksItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children: children
   });
 });
-QuickLinksItem.displayName = 'QuickLinksItem';
-QuickLinksItem.propTypes = {
+QuickLinksItemBase.displayName = 'QuickLinksItem';
+QuickLinksItemBase.propTypes = {
   ...withLinkRouter.propTypes,
   ...PressableListItemBase.propTypes,
   ...ButtonBase.propTypes,
@@ -48,4 +50,7 @@ QuickLinksItem.propTypes = {
   variant: variantProp.propType,
   children: PropTypes.node
 };
-export default withLinkRouter(QuickLinksItem);
+
+// Export unwrapped component for react-docgen to extract info for docsite
+export { QuickLinksItemBase };
+export const QuickLinksItem = withLinkRouter(QuickLinksItemBase);

package/lib/esm/QuickLinksFeature/QuickLinksFeature.js

@@ -1,9 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StackWrap } from '../StackView';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { StackWrap } from '../StackView/StackWrap';
+import { useViewport } from '../ViewportProvider/useViewport';
+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';
 
 // pass through and type relevant system props - add more sets for interactive components
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -15,9 +19,9 @@ const isQuickListItem = element => {
 
 /**
  * QuickLinksFeature renders a list of interactive items.
- *  - This is the base component that is used as a wrapper and accepts a List of `QuickLinksFeature.Item`
+ *  - This is the base component that is used as a wrapper and accepts a List of `QuickLinksFeatureItem`
  */
-const QuickLinksFeature = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const QuickLinksFeature = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -61,8 +65,7 @@ QuickLinksFeature.propTypes = {
    */
   tag: PropTypes.string,
   /**
-   * QuickLinksFeature.Item component
+   * QuickLinksFeatureItem component
    */
   children: PropTypes.node
-};
-export default QuickLinksFeature;
+};

package/lib/esm/QuickLinksFeature/QuickLinksFeatureItem.js

@@ -4,11 +4,17 @@ import Image from "react-native-web/dist/exports/Image";
 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 { getTokensPropType, variantProp, withLinkRouter, a11yProps, linkProps, selectSystemProps } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
-import { Link } from '../Link';
-import { StackWrap } from '../StackView';
+import { getTokensPropType } from '../utils/props/tokens';
+import { variantProp } from '../utils/props/variantProp';
+import { withLinkRouter } from '../utils/withLinkRouter';
+import { a11yProps } from '../utils/props/a11yProps';
+import { linkProps } from '../utils/props/linkProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { applyTextStyles } from '../ThemeProvider/utils/styles';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { Link } from '../Link/Link';
+import { StackWrap } from '../StackView/StackWrap';
 
 // pass through and type relevant system props - add more sets for interactive components
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -55,7 +61,7 @@ const selectLinkToken = _ref2 => {
  *
  * It will receive a image source and a accessibility label and will render a link accordingly with the theme tokens
  */
-const QuickLinksFeatureItem = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const QuickLinksFeatureItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,
@@ -124,8 +130,8 @@ const QuickLinksFeatureItem = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
   });
 });
-QuickLinksFeatureItem.displayName = 'QuickLinksFeatureItem';
-QuickLinksFeatureItem.propTypes = {
+QuickLinksFeatureItemBase.displayName = 'QuickLinksFeatureItem';
+QuickLinksFeatureItemBase.propTypes = {
   ...withLinkRouter.propTypes,
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('QuickLinksFeatureItem'),
@@ -143,4 +149,7 @@ QuickLinksFeatureItem.propTypes = {
    */
   imageSource: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
 };
-export default withLinkRouter(QuickLinksFeatureItem);
+
+// Export unwrapped component for react-docgen to extract info for docsite
+export { QuickLinksFeatureItemBase };
+export const QuickLinksFeatureItem = withLinkRouter(QuickLinksFeatureItemBase);

package/lib/esm/Radio/Radio.js

@@ -4,11 +4,19 @@ 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 RadioLabel from '../InputLabel/LabelContent';
-import RadioButton, { selectRadioButtonTokens } from './RadioButton';
-import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, focusHandlerProps, getTokensPropType, selectSystemProps, useInputValue, useUniqueId, variantProp, viewProps } from '../utils';
-import StackView from '../StackView';
+import { LabelContent } from '../InputLabel/LabelContent';
+import { RadioButton, selectRadioButtonTokens } from './RadioButton';
+import { applyShadowToken, applyTextStyles } from '../ThemeProvider/utils/styles';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { focusHandlerProps } from '../utils/props/handlerProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useInputValue } from '../utils/input';
+import { useUniqueId } from '../utils/useUniqueId';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { StackView } from '../StackView/StackView';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 const selectContainerStyles = _ref => {
@@ -107,7 +115,7 @@ const selectLabelStyles = _ref3 => {
  * or the internal state in case of uncontrolled radio button.
  *
  */
-const Radio = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+export const Radio = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     checked,
     defaultChecked,
@@ -198,7 +206,7 @@ const Radio = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
             })
           }), Boolean(label) && /*#__PURE__*/_jsx(Text, {
             style: labelStyles,
-            children: /*#__PURE__*/_jsx(RadioLabel, {
+            children: /*#__PURE__*/_jsx(LabelContent, {
               forId: inputId,
               children: label
             })
@@ -266,7 +274,6 @@ Radio.propTypes = {
    */
   variant: variantProp.propType
 };
-export default Radio;
 const staticStyles = StyleSheet.create({
   container: {
     flexDirection: 'row',

package/lib/esm/Radio/RadioButton.js

@@ -3,9 +3,14 @@ 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 RadioInput from './RadioInput';
-import { applyOuterBorder, applyShadowToken, resolveThemeTokens, validateThemeTokens, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensSetPropType, selectSystemProps, selectTokens, viewProps } from '../utils';
+import { RadioInput } from './RadioInput';
+import { applyOuterBorder, applyShadowToken } from '../ThemeProvider/utils/styles';
+import { resolveThemeTokens, validateThemeTokens } from '../ThemeProvider/utils/theme-tokens';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensSetPropType, selectTokens } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { viewProps } from '../utils/props/viewProps';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
@@ -103,7 +108,7 @@ const selectOuterBorderStyles = _ref5 => {
  * The visual toggle of a radio input. Is not interactive on its own, should be used inside
  * an interactive parent that passes down props when interacted with.
  */
-const RadioButton = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+export const RadioButton = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     isChecked,
     tokens,
@@ -179,5 +184,4 @@ const staticStyles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center'
   }
-});
-export default RadioButton;
+});