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

package/lib/cjs/PriceLockup/PriceLockup.js

@@ -3,22 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.PriceLockup = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Divider = _interopRequireDefault(require("../Divider"));
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _renderFootnoteContent = _interopRequireDefault(require("./utils/renderFootnoteContent"));
-var _renderPrice = _interopRequireDefault(require("./utils/renderPrice"));
-var _renderTypography = _interopRequireDefault(require("./utils/renderTypography"));
+var _Divider = require("../Divider/Divider");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _tokens = require("../utils/props/tokens");
+var _htmlAttrs = require("../utils/htmlAttrs");
+var _viewProps = require("../utils/props/viewProps");
+var _renderFootnoteContent = require("./utils/renderFootnoteContent");
+var _renderPrice = require("./utils/renderPrice");
+var _renderTypography = require("./utils/renderTypography");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const PRICE_BASELINE_VARIANT = 'baseline';
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_htmlAttrs.htmlAttrs, _viewProps.viewProps]);
 const selectTopTextTypographyTokens = _ref => {
   let {
     topTextFontSize,
@@ -101,7 +104,7 @@ const selectContainertokens = _ref7 => {
     alignItems: alignItemsText
   };
 };
-const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
+const PriceLockup = exports.PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -119,7 +122,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     variant = {},
     ...rest
   } = _ref8;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     footnoteMarginTop,
     footnoteGap,
@@ -129,7 +132,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     fontColor,
     dividerColor,
     ...themeTokens
-  } = (0, _ThemeProvider.useThemeTokens)('PriceLockup', priceLockupTokens, {
+  } = (0, _useThemeTokens.useThemeTokens)('PriceLockup', priceLockupTokens, {
     ...variant,
     size
   }, {
@@ -149,15 +152,15 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     ...selectProps(rest),
     children: [topText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: staticStyles.topText,
-      children: (0, _renderTypography.default)(topText, topTextTypographyTokens, undefined, fontColor)
-    }) : null, (0, _renderPrice.default)(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens, isPriceBaseline), bottomText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+      children: (0, _renderTypography.renderTypography)(topText, topTextTypographyTokens, undefined, fontColor)
+    }) : null, (0, _renderPrice.renderPrice)(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens, isPriceBaseline), bottomText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.Divider, {
         testID: "price-lockup-divider",
         role: "separator",
         tokens: {
           color: dividerColor
         }
-      }), (0, _renderFootnoteContent.default)(footnoteMarginTop, bottomTextMarginTop, bottomText, bottomTextTypographyTokens, fontColor, footnoteLinks, bottomLinksMarginLeft, onClickFootnote, themeTokens)]
+      }), (0, _renderFootnoteContent.renderFootnoteContent)(footnoteMarginTop, bottomTextMarginTop, bottomText, bottomTextTypographyTokens, fontColor, footnoteLinks, bottomLinksMarginLeft, onClickFootnote, themeTokens)]
     }) : null]
   });
 });
@@ -219,9 +222,8 @@ PriceLockup.propTypes = {
   /**
    * `PriceLockup` tokens
    */
-  tokens: (0, _utils.getTokensPropType)('PriceLockup')
+  tokens: (0, _tokens.getTokensPropType)('PriceLockup')
 };
-var _default = exports.default = PriceLockup;
 const staticStyles = _StyleSheet.default.create({
   priceLockupContainer: {
     alignSelf: 'flex-start'

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

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.renderFootnoteContent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _renderTypography = _interopRequireDefault(require("./renderTypography"));
-var _renderFootnoteLinks = _interopRequireDefault(require("./renderFootnoteLinks"));
+var _renderTypography = require("./renderTypography");
+var _renderFootnoteLinks = require("./renderFootnoteLinks");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectFootnoteContainer = _ref => {
@@ -48,20 +48,20 @@ const renderFootnoteContent = (footnoteMarginTop, bottomTextMarginTop, bottomTex
         style: selectFootnoteBottomTextContainer({
           bottomTextMarginTop
         }),
-        children: [(0, _renderTypography.default)(bottomText, bottomTextTypographyTokens, undefined, fontColor), ' ']
+        children: [(0, _renderTypography.renderTypography)(bottomText, bottomTextTypographyTokens, undefined, fontColor), ' ']
       }), footnoteLinks?.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [staticStyles.footnoteLinkContainer, selectFootnoteLinksStyles({
           bottomLinksMarginLeft
         })],
-        children: (0, _renderFootnoteLinks.default)(footnoteLinks, themeTokens, onClickFootnote)
+        children: (0, _renderFootnoteLinks.renderFootnoteLinks)(footnoteLinks, themeTokens, onClickFootnote)
       }) : null]
     }), footnoteLinks?.length > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: staticStyles.verticalFootnoteLinkContainer,
-      children: (0, _renderFootnoteLinks.default)(footnoteLinks, themeTokens, onClickFootnote)
+      children: (0, _renderFootnoteLinks.renderFootnoteLinks)(footnoteLinks, themeTokens, onClickFootnote)
     }) : null]
   });
 };
-var _default = exports.default = renderFootnoteContent;
+exports.renderFootnoteContent = renderFootnoteContent;
 const staticStyles = _StyleSheet.default.create({
   footnoteContainer: {
     flexDirection: 'row'

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.renderFootnoteLinks = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _FootnoteLink = _interopRequireDefault(require("../../Footnote/FootnoteLink"));
+var _FootnoteLink = require("../../Footnote/FootnoteLink");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectFootnoteLinkStyles = (_ref, footnoteLinks) => {
@@ -27,9 +27,9 @@ const selectFootnoteLinkStyles = (_ref, footnoteLinks) => {
     fontSize: footnoteLinkFontSize
   };
 };
-const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) => footnoteLinks?.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FootnoteLink.default, {
+const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) => footnoteLinks?.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FootnoteLink.FootnoteLink, {
   tokens: selectFootnoteLinkStyles(themeTokens, footnoteLinks),
   content: footnoteLinks,
   onClick: onClickFootnote
 }) : null;
-var _default = exports.default = renderFootnoteLinks;
+exports.renderFootnoteLinks = renderFootnoteLinks;

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

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.renderPrice = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _A11yText = _interopRequireDefault(require("../../A11yText"));
-var _renderTypography = _interopRequireDefault(require("./renderTypography"));
-var _renderFootnoteLinks = _interopRequireDefault(require("./renderFootnoteLinks"));
+var _A11yText = require("../../A11yText/A11yText");
+var _renderTypography = require("./renderTypography");
+var _renderFootnoteLinks = require("./renderFootnoteLinks");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectStrikeThroughStyles = _ref => {
@@ -30,12 +30,12 @@ const selectFootnoteLinksStyles = _ref2 => {
     marginLeft: bottomLinksMarginLeft
   };
 };
-const renderCurrencySymbol = (currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor) => (0, _renderTypography.default)(`${currencySymbol}`, currencySymbolTypographyTokens, ratePosition, fontColor);
+const renderCurrencySymbol = (currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor) => (0, _renderTypography.renderTypography)(`${currencySymbol}`, currencySymbolTypographyTokens, ratePosition, fontColor);
 const renderAmount = (amount, amountTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens) => {
-  const amountText = (0, _renderTypography.default)(amount, amountTypographyTokens, undefined, fontColor); // undefined is ratePosition
+  const amountText = (0, _renderTypography.renderTypography)(amount, amountTypographyTokens, undefined, fontColor); // undefined is ratePosition
   if (strikeThrough) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yText.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yText.A11yText, {
         text: a11yText
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
         style: [staticStyles.strikeThroughContainer, selectStrikeThroughStyles(themeTokens)],
@@ -68,26 +68,26 @@ const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbo
           children: renderCurrencySymbol(currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor)
         }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
           children: [renderAmount(amount, amountTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens), isPriceBaseline && cents && renderAmount(`${separator}${cents}`, centsTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens)]
-        }), cents && !isPriceBaseline ? (0, _renderTypography.default)(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor) : null, signDirection === 'right' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        }), cents && !isPriceBaseline ? (0, _renderTypography.renderTypography)(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor) : null, signDirection === 'right' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
           style: staticStyles.currencySymbol,
           children: renderCurrencySymbol(currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor)
         }) : null]
       }), rateText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
         style: ratePosition === 'bottom' ? staticStyles.rateTextVerticalPosition : [staticStyles.rateTextPosition, staticStyles.rateTextVerticalPosition],
-        children: (0, _renderTypography.default)(rateText, rateTypographyTokens, ratePosition, fontColor)
+        children: (0, _renderTypography.renderTypography)(rateText, rateTypographyTokens, ratePosition, fontColor)
       }) : null, !bottomText && footnoteLinks?.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
         style: [footnoteLinkPositionStyles, selectFootnoteLinksStyles({
           bottomLinksMarginLeft
         })],
-        children: (0, _renderFootnoteLinks.default)(footnoteLinks, themeTokens, onClickFootnote)
+        children: (0, _renderFootnoteLinks.renderFootnoteLinks)(footnoteLinks, themeTokens, onClickFootnote)
       }) : null]
     }), !bottomText && footnoteLinks?.length > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: staticStyles.verticalFootnoteLinkContainer,
-      children: (0, _renderFootnoteLinks.default)(footnoteLinks, themeTokens, onClickFootnote)
+      children: (0, _renderFootnoteLinks.renderFootnoteLinks)(footnoteLinks, themeTokens, onClickFootnote)
     }) : null]
   });
 };
-var _default = exports.default = renderPrice;
+exports.renderPrice = renderPrice;
 const staticStyles = _StyleSheet.default.create({
   priceContainerRow: {
     flexDirection: 'row'

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.renderTypography = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Typography = _interopRequireDefault(require("../../Typography"));
+var _Typography = require("../../Typography/Typography");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const renderTypography = (value, themeTokens, ratePosition, fontColor) => {
@@ -22,9 +22,9 @@ const renderTypography = (value, themeTokens, ratePosition, fontColor) => {
       color: fontColor
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
     ...customProps,
     children: value
   });
 };
-var _default = exports.default = renderTypography;
+exports.renderTypography = renderTypography;

package/lib/cjs/ProductCard/ProductCard.js

@@ -3,26 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ProductCard = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _utils = require("../utils");
-var _Badge = _interopRequireDefault(require("../Badge"));
-var _PriceLockup = _interopRequireDefault(require("../PriceLockup"));
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _Button = require("../Button");
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _Box = _interopRequireDefault(require("../Box"));
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _useViewport = require("../ViewportProvider/useViewport");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _dictionary = require("./dictionary");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _tokens = require("../utils/props/tokens");
+var _htmlAttrs = require("../utils/htmlAttrs");
+var _viewProps = require("../utils/props/viewProps");
+var _input = require("../utils/input");
+var _useCopy = require("../utils/useCopy");
+var _a11yProps = require("../utils/props/a11yProps");
+var _Badge = require("../Badge/Badge");
+var _PriceLockup = require("../PriceLockup/PriceLockup");
+var _Typography = require("../Typography/Typography");
+var _Button = require("../Button/Button");
+var _StackView = require("../StackView/StackView");
+var _Box = require("../Box/Box");
+var _Icon = require("../Icon/Icon");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps, _utils.a11yProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_htmlAttrs.htmlAttrs, _viewProps.viewProps, _a11yProps.a11yProps]);
 const selectProductCardTokens = _ref => {
   let {
     borderStyle,
@@ -41,10 +47,10 @@ const selectProductCardTokens = _ref => {
     paddingVertical
   };
 };
-const ProductCard = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ProductCard = exports.ProductCard = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     copy = 'en',
-    dictionary = _dictionary.default,
+    dictionary = _dictionary.dictionary,
     image = {
       src: '',
       alt: ''
@@ -55,18 +61,18 @@ const ProductCard = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     tokens,
     ...rest
   } = _ref2;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ProductCard', tokens, {
+  const viewport = (0, _useViewport.useViewport)();
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('ProductCard', tokens, {
     viewport
   });
-  const getCopy = (0, _utils.useCopy)({
+  const getCopy = (0, _useCopy.useCopy)({
     copy,
     dictionary
   });
   const {
     currentValue,
     setValue
-  } = (0, _utils.useInputValue)();
+  } = (0, _input.useInputValue)();
   const hasClicked = isSelected || currentValue;
   const handlePress = event => {
     if (cardId) {
@@ -75,17 +81,17 @@ const ProductCard = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       setValue(!currentValue, event);
     }
   };
-  const renderButton = hasClicked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+  const renderButton = hasClicked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.Box, {
     vertical: 1,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
       space: 2,
       direction: "row",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         icon: themeTokens.selectedButtonIcon,
         variant: {
           color: 'success'
         }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
         variant: {
           size: 'h4'
         },
@@ -120,22 +126,22 @@ const ProductCard = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       })
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: staticStyles.textContainer,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.Box, {
         left: 3,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
           space: 1,
-          children: [getCopy('badgeText') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+          children: [getCopy('badgeText') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.Badge, {
             variant: {
               outline: true,
               purpose: 'editorial'
             },
             children: getCopy('badgeText')
-          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
             variant: {
               size: 'h6'
             },
             children: getCopy('brandName')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
             variant: {
               size: 'h4',
               colour: 'brand'
@@ -144,24 +150,24 @@ const ProductCard = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
               fontWeight: 400
             },
             children: getCopy('productName')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
             space: 3,
             divider: true,
             direction: "row",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PriceLockup.default, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PriceLockup.PriceLockup, {
               ...getCopy('primaryPrice'),
               size: "small",
               ratePosition: "bottom"
-            }), getCopy('secondaryPrice')?.price ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PriceLockup.default, {
+            }), getCopy('secondaryPrice')?.price ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PriceLockup.PriceLockup, {
               ...getCopy('secondaryPrice'),
               size: "small",
               ratePosition: "bottom"
             }) : null]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.Box, {
             top: 2,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
               space: 2,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
                 variant: {
                   size: 'h6'
                 },
@@ -169,7 +175,7 @@ const ProductCard = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
                   fontWeight: 500
                 },
                 children: getCopy('term')
-              }), getCopy('buttonLabel') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              }), getCopy('buttonLabel') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.Box, {
                 top: 1,
                 children: renderButton
               }) : null]
@@ -211,9 +217,8 @@ ProductCard.propTypes = {
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
-  tokens: (0, _utils.getTokensPropType)('ProductCard')
+  tokens: (0, _tokens.getTokensPropType)('ProductCard')
 };
-var _default = exports.default = ProductCard;
 const staticStyles = _StyleSheet.default.create({
   container: {
     flexDirection: 'row',

package/lib/cjs/ProductCard/dictionary.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
   en: {
     badgeText: '',
     brandName: 'Brand name',

package/lib/cjs/ProductCardGroup/ProductCardGroup.js

@@ -3,17 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ProductCardGroup = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _utils = require("../utils");
-var _ProductCard = _interopRequireDefault(require("../ProductCard"));
-var _StackView = require("../StackView");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _htmlAttrs = require("../utils/htmlAttrs");
+var _viewProps = require("../utils/props/viewProps");
+var _a11yProps = require("../utils/props/a11yProps");
+var _ProductCard = require("../ProductCard/ProductCard");
+var _StackWrap = require("../StackView/StackWrap");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps, _utils.a11yProps]);
-const ProductCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_htmlAttrs.htmlAttrs, _viewProps.viewProps, _a11yProps.a11yProps]);
+const ProductCardGroup = exports.ProductCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     productCards,
     maxSelection = 1,
@@ -35,7 +38,7 @@ const ProductCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ...selectProps(rest),
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackWrap.StackWrap, {
       direction: {
         xs: 'column',
         lg: 'row'
@@ -44,7 +47,7 @@ const ProductCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       children: productCards.map((cardProperties, index) => {
         const cardId = cardProperties.id || index;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductCard.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductCard.ProductCard, {
             cardId: cardId,
             isSelected: selectedCardIds.includes(cardId),
             onSelect: handleSelect,
@@ -73,5 +76,4 @@ ProductCardGroup.propTypes = {
     image: _propTypes.default.object,
     dictionary: _propTypes.default.object
   })).isRequired
-};
-var _default = exports.default = ProductCardGroup;
+};

package/lib/cjs/Progress/Progress.js

@@ -3,17 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Progress = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _ProgressContext = _interopRequireDefault(require("./ProgressContext"));
+var _styles = require("../ThemeProvider/utils/styles");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _ProgressContext = require("./ProgressContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const selectProgressStyles = _ref => {
   let {
     backgroundColor,
@@ -29,7 +34,7 @@ const selectProgressStyles = _ref => {
     borderColor,
     borderRadius,
     height,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+    ...(0, _styles.applyShadowToken)(shadow)
   };
 };
 
@@ -69,17 +74,17 @@ const selectProgressStyles = _ref => {
  * role.
  *
  */
-const Progress = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Progress = exports.Progress = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
     variant,
     ...rest
   } = _ref2;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Progress', tokens, variant);
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('Progress', tokens, variant);
   // Default to false (vertical layout) to preserve existing behavior and avoid breaking changes
   const layers = variant?.layers ?? false;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressContext.default.Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressContext.ProgressContext.Provider, {
     value: {
       layers
     },
@@ -101,13 +106,12 @@ Progress.propTypes = {
   /**
    * Progress tokens.
    */
-  tokens: (0, _utils.getTokensPropType)('Progress'),
+  tokens: (0, _tokens.getTokensPropType)('Progress'),
   /**
    * Progress variant.
    */
-  variant: _utils.variantProp.propType
+  variant: _variantProp.variantProp.propType
 };
-var _default = exports.default = Progress;
 const staticStyles = _StyleSheet.default.create({
   progressContainer: {
     position: 'relative'