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

package/lib/cjs/FlexGrid/FlexGrid.js

@@ -3,21 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.FlexGrid = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _systemConstants = require("@telus-uds/system-constants");
-var _utils = require("../utils");
-var _resolveContentMaxWidth = _interopRequireDefault(require("../utils/resolveContentMaxWidth"));
-var _Row = _interopRequireDefault(require("./Row"));
-var _Col = _interopRequireDefault(require("./Col"));
-var _GutterContext = _interopRequireDefault(require("./providers/GutterContext"));
-var _helpers = _interopRequireDefault(require("./helpers"));
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
+var _a11yProps = require("../utils/props/a11yProps");
+var _viewProps = require("../utils/props/viewProps");
+var _semantics = require("../utils/a11y/semantics");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _BaseView = require("../utils/BaseView/BaseView");
+var _ssrMediaQuery = require("../utils/ssr-media-query/ssr-media-query");
+var _useResponsiveProp = require("../utils/useResponsiveProp");
+var _resolveContentMaxWidth = require("../utils/resolveContentMaxWidth");
+var _GutterContext = require("./providers/GutterContext");
+var _helpers = require("./helpers");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useViewport = require("../ViewportProvider/useViewport");
 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]);
 
 /**
  * Calculates the maximum width for a given viewport based on limitWidth and contentMaxWidth settings.
@@ -45,7 +49,7 @@ const getMaxWidthForViewport = (viewportKey, limitWidth, contentWidthProp, maxWi
  * A mobile-first flexbox grid.
  */
 
-const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const FlexGrid = exports.FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     limitWidth = true,
     gutter = true,
@@ -63,22 +67,22 @@ const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     contentMinWidth,
     ...rest
   } = _ref;
-  const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const reverseLevel = (0, _helpers.applyInheritance)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
+  const viewport = (0, _useViewport.useViewport)();
   const {
     themeOptions,
     themeOptions: {
       enableMediaQueryStyleSheet
     }
-  } = (0, _ThemeProvider.useTheme)();
+  } = (0, _useTheme.useTheme)();
   let flexgridStyles;
   let mediaIds;
 
   // Support both contentMaxWidth and deprecated contentMinWidth for backwards compatibility
   const contentWidthProp = contentMaxWidth || contentMinWidth;
-  const contentWidthValue = (0, _utils.useResponsiveProp)(contentWidthProp);
-  const responsiveWidth = (0, _utils.useResponsiveProp)(themeOptions?.contentMaxWidth);
-  const maxWidth = (0, _resolveContentMaxWidth.default)(contentWidthValue, responsiveWidth);
+  const contentWidthValue = (0, _useResponsiveProp.useResponsiveProp)(contentWidthProp);
+  const responsiveWidth = (0, _useResponsiveProp.useResponsiveProp)(themeOptions?.contentMaxWidth);
+  const maxWidth = (0, _resolveContentMaxWidth.resolveContentMaxWidth)(contentWidthValue, responsiveWidth);
   const stylesByViewport = {
     xs: {
       maxWidth: getMaxWidthForViewport('xs', limitWidth, contentWidthProp, maxWidth),
@@ -103,16 +107,17 @@ const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   };
   const staticStyles = {
     flexWrap: 'wrap',
+    alignContent: 'stretch',
     width: outsideGutter ? '100%' : 'auto',
     marginVertical: 0,
     marginHorizontal: outsideGutter ? 'auto' : -16
   };
   if (enableMediaQueryStyleSheet) {
-    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(stylesByViewport);
+    const mediaQueryStyles = (0, _ssrMediaQuery.createMediaQueryStyles)(stylesByViewport);
     const {
       ids,
       styles
-    } = _utils.StyleSheet.create({
+    } = _ssrMediaQuery.StyleSheet.create({
       flexgrid: {
         ...staticStyles,
         ...mediaQueryStyles
@@ -128,16 +133,16 @@ const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   }
   const props = {
     accessibilityRole,
-    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...(0, _semantics.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...selectProps(rest)
   };
   const dataSetValue = mediaIds ? {
     media: mediaIds,
     ...dataSet
   } : dataSet;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GutterContext.default.Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GutterContext.GutterContext.Provider, {
     value: gutter,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.BaseView, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseView.BaseView, {
       ref: ref,
       ...props,
       style: flexgridStyles,
@@ -187,9 +192,9 @@ FlexGrid.propTypes = {
    * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
    * is not defined, the accessibilityRole will default to "heading".
    */
-  tag: _propTypes.default.oneOf(_utils.layoutTags),
+  tag: _propTypes.default.oneOf(_semantics.layoutTags),
   /**
-   * The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components.
+   * The rows and columns of the Grid. Will typically be `FlexGridRow` and `FlexGridCol` components.
    */
   children: _propTypes.default.node.isRequired,
   /**
@@ -223,7 +228,4 @@ FlexGrid.propTypes = {
     sm: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
     xs: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number])
   })
-};
-FlexGrid.Row = _Row.default;
-FlexGrid.Col = _Col.default;
-var _default = exports.default = FlexGrid;
+};

package/lib/cjs/FlexGrid/{Col/Col.js → FlexGridCol/FlexGridCol.js}

@@ -3,18 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.FlexGridCol = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _GutterContext = _interopRequireDefault(require("../providers/GutterContext"));
-var _helpers = _interopRequireDefault(require("../helpers"));
-var _utils = require("../../utils");
-var _ViewportProvider = require("../../ViewportProvider");
-var _ThemeProvider = require("../../ThemeProvider");
+var _GutterContext = require("../providers/GutterContext");
+var _helpers = require("../helpers");
+var _responsiveProps = require("../../utils/props/responsiveProps");
+var _BaseView = require("../../utils/BaseView/BaseView");
+var _ssrMediaQuery = require("../../utils/ssr-media-query/ssr-media-query");
+var _useViewport = require("../../ViewportProvider/useViewport");
+var _useTheme = require("../../ThemeProvider/useTheme");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Col = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const FlexGridCol = exports.FlexGridCol = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     horizontalAlign,
     children,
@@ -31,17 +33,17 @@ const Col = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     flex,
     ...viewProps
   } = _ref;
-  const gutter = _react.default.useContext(_GutterContext.default);
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const gutter = _react.default.useContext(_GutterContext.GutterContext);
+  const viewport = (0, _useViewport.useViewport)();
   const {
     themeOptions: {
       enableMediaQueryStyleSheet
     }
-  } = (0, _ThemeProvider.useTheme)();
-  const hiddenLevels = (0, _helpers.default)([xs, sm, md, lg, xl]);
+  } = (0, _useTheme.useTheme)();
+  const hiddenLevels = (0, _helpers.applyInheritance)([xs, sm, md, lg, xl]);
   const getHorizontalAlignLevel = () => {
     if (typeof horizontalAlign === 'object') {
-      return (0, _helpers.default)([horizontalAlign.xs, horizontalAlign.sm, horizontalAlign.md, horizontalAlign.lg, horizontalAlign.xl]);
+      return (0, _helpers.applyInheritance)([horizontalAlign.xs, horizontalAlign.sm, horizontalAlign.md, horizontalAlign.lg, horizontalAlign.xl]);
     }
     if (typeof horizontalAlign === 'string') {
       return [horizontalAlign, horizontalAlign, horizontalAlign, horizontalAlign, horizontalAlign];
@@ -85,8 +87,8 @@ const Col = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const shown = !flex && _Platform.default.OS === 'web' ? 'block' : 'flex';
   const sizesArray = [xs, sm, md, lg, xl];
   const offSetsArray = [xsOffset, smOffset, mdOffset, lgOffset, xlOffset];
-  const sizesWithIheritance = (0, _helpers.default)(sizesArray);
-  const offsetsWithIheritance = (0, _helpers.default)(offSetsArray);
+  const sizesWithIheritance = (0, _helpers.applyInheritance)(sizesArray);
+  const offsetsWithIheritance = (0, _helpers.applyInheritance)(offSetsArray);
   const sizes = {
     xs: sizesWithIheritance[0],
     sm: sizesWithIheritance[1],
@@ -144,11 +146,11 @@ const Col = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let colStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(stylesByViewport);
+    const mediaQueryStyles = (0, _ssrMediaQuery.createMediaQueryStyles)(stylesByViewport);
     const {
       ids,
       styles
-    } = _utils.StyleSheet.create({
+    } = _ssrMediaQuery.StyleSheet.create({
       col: {
         ...staticStyles,
         ...mediaQueryStyles
@@ -162,7 +164,7 @@ const Col = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       ...stylesByViewport[viewport]
     };
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.BaseView, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseView.BaseView, {
     ref: ref,
     ...viewProps,
     style: colStyles,
@@ -172,14 +174,14 @@ const Col = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children: children
   });
 });
-Col.displayName = 'Col';
+FlexGridCol.displayName = 'FlexGridCol';
 
 /*
  * We're disabling default props since passing undefined props to
  * the react-flexbox-grid component sets up blank classes that may cause
  * styling issues.
  */
-Col.propTypes = {
+FlexGridCol.propTypes = {
   /**
    * Specify number of columns within the 'xs' breakpoint range. `0` hides the column.
    *
@@ -245,7 +247,7 @@ Col.propTypes = {
    */
   xlOffset: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
   /**
-   * The columns of the Grid. Will typically be `FlexGrid.Col` components.
+   * The columns of the Grid. Will typically be `FlexGridCol` components.
    */
   children: _propTypes.default.node.isRequired,
   /**
@@ -254,11 +256,10 @@ Col.propTypes = {
    *
    * Accepts a `PropType.string` following the [responsive prop](#/Layout?id=responsive) structure.
    */
-  horizontalAlign: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['left', 'center', 'right'])),
+  horizontalAlign: _responsiveProps.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['left', 'center', 'right'])),
   /**
    * (web only) Stretches the column to fill vertical space using `display: flex`.
-   * In native apps, FlexGrid.Col behaves as if this is always true (as do all `View`s).
+   * In native apps, FlexGridCol behaves as if this is always true (as do all `View`s).
    */
   flex: _propTypes.default.bool
-};
-var _default = exports.default = Col;
+};

package/lib/cjs/FlexGrid/{Row/Row.js → FlexGridRow/FlexGridRow.js}

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.FlexGridRow = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _helpers = _interopRequireDefault(require("../helpers"));
-var _utils = require("../../utils");
-var _ThemeProvider = require("../../ThemeProvider");
-var _ViewportProvider = require("../../ViewportProvider");
+var _helpers = require("../helpers");
+var _BaseView = require("../../utils/BaseView/BaseView");
+var _ssrMediaQuery = require("../../utils/ssr-media-query/ssr-media-query");
+var _useTheme = require("../../ThemeProvider/useTheme");
+var _useViewport = require("../../ViewportProvider/useViewport");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const horizontalAlignStyles = horizontalAlign => {
@@ -65,7 +66,7 @@ const distributeStyles = distribute => {
       return {};
   }
 };
-const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const FlexGridRow = exports.FlexGridRow = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     horizontalAlign,
     verticalAlign,
@@ -82,8 +83,8 @@ const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     themeOptions: {
       enableMediaQueryStyleSheet
     }
-  } = (0, _ThemeProvider.useTheme)();
-  const viewport = (0, _ViewportProvider.useViewport)();
+  } = (0, _useTheme.useTheme)();
+  const viewport = (0, _useViewport.useViewport)();
   const staticStyles = {
     width: '100%',
     marginVertical: 0,
@@ -95,7 +96,7 @@ const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ...verticalAlignStyles(verticalAlign),
     ...distributeStyles(distribute)
   };
-  const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
+  const reverseLevel = (0, _helpers.applyInheritance)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
   const stylesByViewport = {
     xs: {
       flexDirection: reverseLevel[0] ? 'row-reverse' : 'row',
@@ -121,11 +122,11 @@ const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let rowStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(stylesByViewport);
+    const mediaQueryStyles = (0, _ssrMediaQuery.createMediaQueryStyles)(stylesByViewport);
     const {
       ids,
       styles
-    } = _utils.StyleSheet.create({
+    } = _ssrMediaQuery.StyleSheet.create({
       row: {
         ...staticStyles,
         ...mediaQueryStyles
@@ -139,7 +140,7 @@ const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       ...stylesByViewport[viewport]
     };
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.BaseView, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseView.BaseView, {
     ref: ref,
     ...rest,
     style: rowStyles,
@@ -149,8 +150,8 @@ const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children: children
   });
 });
-Row.displayName = 'Row';
-Row.propTypes = {
+FlexGridRow.displayName = 'FlexGridRow';
+FlexGridRow.propTypes = {
   /**
    * Align columns horizontally within their row.
    */
@@ -184,5 +185,4 @@ Row.propTypes = {
    */
   xlReverse: _propTypes.default.bool,
   children: _propTypes.default.node.isRequired
-};
-var _default = exports.default = Row;
+};

package/lib/cjs/FlexGrid/helpers/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.applyInheritance = void 0;
 const applyInheritance = sizes => {
   let prevSize;
   return sizes.map((size, index) => {
@@ -18,4 +18,4 @@ const applyInheritance = sizes => {
     return undefined;
   });
 };
-var _default = exports.default = applyInheritance;
+exports.applyInheritance = applyInheritance;

package/lib/cjs/FlexGrid/providers/GutterContext.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.GutterContext = void 0;
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const GutterContext = /*#__PURE__*/_react.default.createContext(false);
-var _default = exports.default = GutterContext;
+const GutterContext = exports.GutterContext = /*#__PURE__*/_react.default.createContext(false);

package/lib/cjs/Footnote/Footnote.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Footnote = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -14,16 +14,22 @@ var _Modal = _interopRequireDefault(require("react-native-web/dist/cjs/exports/M
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _SafeAreaView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/SafeAreaView"));
 var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _utils = require("../utils");
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _OrderedList = _interopRequireDefault(require("../OrderedList"));
+var _dictionary = require("./dictionary");
+var _tokens = require("../utils/props/tokens");
+var _htmlAttrs = require("../utils/htmlAttrs");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _useCopy = require("../utils/useCopy");
+var _viewProps = require("../utils/props/viewProps");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _Typography = require("../Typography/Typography");
+var _Icon = require("../Icon/Icon");
+var _OrderedList = require("../OrderedList/OrderedList");
+var _OrderedListItem = require("../OrderedList/OrderedListItem");
 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]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_htmlAttrs.htmlAttrs, _viewProps.viewProps]);
 const selectFootnoteStyle = _ref => {
   let {
     screenHeight,
@@ -137,7 +143,7 @@ const selectCustomContentFontStyle = _ref5 => {
  * - When `Footnote` is open, the inert prop must be set on all children of body excluding the Footnote
  * - When `Footnote` is closed, focus must return to the initiating element
  */
-const Footnote = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+const Footnote = exports.Footnote = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {
     copy = 'en',
     number = undefined,
@@ -146,15 +152,15 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     isOpen = false,
     tokens,
     variant = {},
-    dictionary = _dictionary.default,
+    dictionary = _dictionary.dictionary,
     ...rest
   } = _ref6;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Footnote', tokens, variant, {
+  const viewport = (0, _useViewport.useViewport)();
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('Footnote', tokens, variant, {
     viewport
   });
-  const themeOptions = (0, _ThemeProvider.useTheme)();
-  const getCopy = (0, _utils.useCopy)({
+  const themeOptions = (0, _useTheme.useTheme)();
+  const getCopy = (0, _useCopy.useCopy)({
     dictionary,
     copy
   });
@@ -171,9 +177,9 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
         children: content
       });
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedList.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedList.OrderedList, {
       start: number,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedList.default.Item, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedListItem.OrderedListItem, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
           style: selectCustomContentFontStyle(themeTokens),
           children: content
@@ -211,7 +217,7 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
             style: staticStyles.content,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
               style: [selectFootnoteHeaderContentStyle(themeTokens), staticStyles.headerContent],
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
                 tokens: {
                   fontSize: themeTokens?.headerFontSize,
                   lineHeight: themeTokens?.headerLineHeight
@@ -225,7 +231,7 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
                 accessibilityLabel: getCopy('close'),
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
                   style: [selectFootnoteCloseButtonStyle(themeTokens), staticStyles.closeButton],
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                     icon: themeTokens?.closeIcon,
                     tokens: {
                       size: themeTokens?.closeButtonIconSize
@@ -261,7 +267,7 @@ const dictionaryContentShape = _propTypes.default.shape({
 });
 Footnote.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('Footnote'),
+  tokens: (0, _tokens.getTokensPropType)('Footnote'),
   /**
    * The content.
    */
@@ -295,7 +301,6 @@ Footnote.propTypes = {
     fr: dictionaryContentShape
   })
 };
-var _default = exports.default = Footnote;
 const staticStyles = _StyleSheet.default.create({
   container: {
     flex: 1

package/lib/cjs/Footnote/FootnoteLink.js

@@ -3,19 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.FootnoteLink = 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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TouchableWithoutFeedback"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
+var _dictionary = require("./dictionary");
+var _htmlAttrs = require("../utils/htmlAttrs");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _useCopy = require("../utils/useCopy");
+var _viewProps = require("../utils/props/viewProps");
+var _children = require("../utils/children");
+var _variantProp = require("../utils/props/variantProp");
+var _styles = require("../ThemeProvider/utils/styles");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
 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]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_htmlAttrs.htmlAttrs, _viewProps.viewProps]);
 
 // The top property varies between devices due to how devices render the viewport.
 const selectTextStyle = _ref => {
@@ -39,7 +45,7 @@ const selectTextStyle = _ref => {
     })
   };
 };
-const FootnoteLink = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const FootnoteLink = exports.FootnoteLink = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     copy = 'en',
     content = [],
@@ -48,15 +54,15 @@ const FootnoteLink = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     variant = {},
     ...rest
   } = _ref2;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('FootnoteLink', tokens, variant);
-  const textStyles = (0, _ThemeProvider.applyTextStyles)(themeTokens);
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('FootnoteLink', tokens, variant);
+  const textStyles = (0, _styles.applyTextStyles)(themeTokens);
   const numbers = Array.isArray(content) ? content : [content];
   const refs = numbers.map(() => /*#__PURE__*/_react.default.createRef());
   const handleOnClick = index => {
     onClick(numbers[index], refs[index]);
   };
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+  const getCopy = (0, _useCopy.useCopy)({
+    dictionary: _dictionary.dictionary,
     copy
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -69,7 +75,7 @@ const FootnoteLink = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
         onPress: handleOnClick,
         accessibilityRole: "button",
-        children: (0, _utils.wrapStringsInText)(`${num}${index !== numbers.length - 1 ? ',' : ''}`, {
+        children: (0, _children.wrapStringsInText)(`${num}${index !== numbers.length - 1 ? ',' : ''}`, {
           style: {
             ...textStyles,
             ...staticStyles.text,
@@ -86,7 +92,7 @@ const copyShape = _propTypes.default.shape({
 });
 FootnoteLink.propTypes = {
   ...selectedSystemPropTypes,
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
    * To provide your own, pass a JSON object with the key `a11yLabel`.
@@ -102,7 +108,6 @@ FootnoteLink.propTypes = {
    */
   onClick: _propTypes.default.func.isRequired
 };
-var _default = exports.default = FootnoteLink;
 const staticStyles = _StyleSheet.default.create({
   text: {
     position: 'relative',

package/lib/cjs/Footnote/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: {
     a11yLabel: 'Read legal footnote',
     close: 'close',