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

package/lib/esm/Fieldset/Fieldset.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Feedback from '../Feedback';
-import { getTokensPropType, spacingProps, variantProp } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import FieldsetContainer from './FieldsetContainer';
-import { getStackedContent } from '../StackView';
-import InputLabel from '../InputLabel';
-import useInputSupports from '../InputSupports/useInputSupports';
+import { Feedback } from '../Feedback/Feedback';
+import { getTokensPropType } from '../utils/props/tokens';
+import { spacingProps } from '../utils/props/spacingProps';
+import { variantProp } from '../utils/props/variantProp';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { FieldsetContainer } from './FieldsetContainer';
+import { getStackedContent } from '../StackView/getStackedContent';
+import { InputLabel } from '../InputLabel/InputLabel';
+import { useInputSupports } from '../InputSupports/useInputSupports';
 
 /**
  * An alternative to InputSupports for groups of input elements that, on web, are to be
@@ -14,8 +16,8 @@ import useInputSupports from '../InputSupports/useInputSupports';
  *
  * Follows the same theming and most of the same props as InputSupports.
  */
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-const Fieldset = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Fieldset = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     space,
@@ -105,10 +107,16 @@ const Fieldset = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
   // fieldset as much as possible, but also allow different spacing within content and between
   // fieldset / feedback / etc, wrap resolved children in a fragment, and stack with `preserveFragments`.
-  const childContent = /*#__PURE__*/_jsx(_Fragment, {
+  const childContent = /*#__PURE__*/_jsx(React.Fragment, {
     children: typeof children === 'function' ? children(a11yProps) : children
-  });
-  const orderedContent = feedbackPosition === 'bottom' ? [legendContent, feedbackContent, childContent] : [legendContent, childContent, feedbackContent];
+  }, "fieldset-children");
+  const legendWithKey = legendContent ? /*#__PURE__*/_jsx(React.Fragment, {
+    children: legendContent
+  }, "fieldset-legend") : null;
+  const feedbackWithKey = feedbackContent ? /*#__PURE__*/_jsx(React.Fragment, {
+    children: feedbackContent
+  }, "fieldset-feedback") : null;
+  const orderedContent = feedbackPosition === 'bottom' ? [legendWithKey, feedbackWithKey, childContent].filter(Boolean) : [legendWithKey, childContent, feedbackWithKey].filter(Boolean);
   const stackedContent = getStackedContent(orderedContent, {
     space,
     preserveFragments: true
@@ -189,5 +197,4 @@ Fieldset.propTypes = {
    * Use to show border in case of error for a group of components
    */
   showErrorBorder: PropTypes.bool
-};
-export default Fieldset;
+};

package/lib/esm/Fieldset/FieldsetContainer.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cssReset from './cssReset';
-import { selectSystemProps, a11yProps, htmlAttrs } from '../utils';
+import { cssReset } from './cssReset';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { a11yProps } from '../utils/props/a11yProps';
+import { htmlAttrs } from '../utils/htmlAttrs';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, htmlAttrs]);
 
 /**
  * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
  */
-const FieldsetContainer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const FieldsetContainer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     inactive,
@@ -44,5 +46,4 @@ FieldsetContainer.propTypes = {
   showBorderStyle: PropTypes.bool,
   borderStyle: PropTypes.object,
   style: PropTypes.object
-};
-export default FieldsetContainer;
+};

package/lib/esm/Fieldset/FieldsetContainer.native.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
-import { selectSystemProps, a11yProps, viewProps } from '../utils';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { a11yProps } from '../utils/props/a11yProps';
+import { viewProps } from '../utils/props/viewProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 // No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
 // If a11y testing finds any additional handling is needed at the container level, add it here.
-const FieldsetContainer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const FieldsetContainer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     accessibilityRole,
@@ -28,5 +30,4 @@ FieldsetContainer.propTypes = {
   children: PropTypes.node,
   accessibilityRole: PropTypes.string,
   style: PropTypes.object
-};
-export default FieldsetContainer;
+};

package/lib/esm/Fieldset/Legend.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cssReset from './cssReset';
+import { cssReset } from './cssReset';
 
 /**
  * On Web, wraps children in HTML `<legend>` tag.
  * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const Legend = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Legend = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
@@ -20,5 +20,4 @@ const Legend = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 Legend.displayName = 'Legend';
 Legend.propTypes = {
   children: PropTypes.node
-};
-export default Legend;
+};

package/lib/esm/Fieldset/Legend.native.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
  * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const Legend = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Legend = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
@@ -27,5 +27,4 @@ const staticStyles = StyleSheet.create({
     width: '100%',
     flexGrow: 1
   }
-});
-export default Legend;
+});

package/lib/esm/Fieldset/cssReset.js

@@ -3,7 +3,7 @@
 // Can't use RN stylesheets because it's not an RN element (RNW's createElement tooling is unstable).
 // Using CSS `all` doesn't work well as an inline style.
 // https://github.com/necolas/react-native-web/issues/1385
-export default {
+export const cssReset = {
   margin: 'unset',
   padding: 'unset',
   float: 'unset',

package/lib/esm/FileUpload/FileUpload.js

@@ -2,15 +2,22 @@ import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, copyPropTypes, getTokensPropType, selectSystemProps, useCopy, variantProp, viewProps, convertFromMegaByteToByte } from '../utils';
-import InputLabel from '../InputLabel';
-import { Button } from '../Button';
-import Notification from '../Notification';
-import Spacer from '../Spacer';
-import StackView from '../StackView';
-import NotificationContent from './NotificationContent';
-import defaultDictionary from './dictionary';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { copyPropTypes } from '../utils/props/copyPropTypes';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useCopy } from '../utils/useCopy';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { convertFromMegaByteToByte } from '../utils/convertFromMegaByteToByte';
+import { InputLabel } from '../InputLabel/InputLabel';
+import { Button } from '../Button/Button';
+import { Notification } from '../Notification/Notification';
+import { Spacer } from '../Spacer/Spacer';
+import { StackView } from '../StackView/StackView';
+import { NotificationContent } from './NotificationContent';
+import { dictionary as defaultDictionary } from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const getHintFromFileTypes = fileTypes => {
@@ -81,7 +88,7 @@ const selectComponentTokens = (tokens, componentIdentifier) => {
  * @param {any} props.rest - Additional props to be spread to the component.
  * @returns {JSX.Element} The rendered FileUpload component.
  */
-const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     tokens,
     variant,
@@ -388,5 +395,4 @@ FileUpload.propTypes = {
     en: dictionaryEntryShape,
     fr: dictionaryEntryShape
   })
-};
-export default FileUpload;
+};

package/lib/esm/FileUpload/NotificationContent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Typography from '../Typography';
+import { Typography } from '../Typography/Typography';
 
 /**
  * Renders the content of a notification for a file upload.
@@ -14,7 +14,7 @@ import Typography from '../Typography';
  * @returns {JSX.Element} The rendered NotificationContent component.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const NotificationContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const NotificationContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     file,
     color,
@@ -50,5 +50,4 @@ NotificationContent.propTypes = {
    * The color of the typography.
    */
   color: PropTypes.string
-};
-export default NotificationContent;
+};

package/lib/esm/FileUpload/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     label: 'Upload files',
     buttonLabel: 'Choose files',

package/lib/esm/FlexGrid/FlexGrid.js

@@ -1,14 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
-import { a11yProps, viewProps, getA11yPropsFromHtmlTag, layoutTags, selectSystemProps, BaseView, StyleSheet, createMediaQueryStyles, useResponsiveProp } from '../utils';
-import resolveContentMaxWidth from '../utils/resolveContentMaxWidth';
-import Row from './Row';
-import Col from './Col';
-import GutterContext from './providers/GutterContext';
-import applyInheritance from './helpers';
-import { useTheme } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
+import { a11yProps } from '../utils/props/a11yProps';
+import { viewProps } from '../utils/props/viewProps';
+import { getA11yPropsFromHtmlTag, layoutTags } from '../utils/a11y/semantics';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { BaseView } from '../utils/BaseView/BaseView';
+import { StyleSheet, createMediaQueryStyles } from '../utils/ssr-media-query/ssr-media-query';
+import { useResponsiveProp } from '../utils/useResponsiveProp';
+import { resolveContentMaxWidth } from '../utils/resolveContentMaxWidth';
+import { GutterContext } from './providers/GutterContext';
+import { applyInheritance } from './helpers';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { useViewport } from '../ViewportProvider/useViewport';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
@@ -38,7 +42,7 @@ const getMaxWidthForViewport = (viewportKey, limitWidth, contentWidthProp, maxWi
  * A mobile-first flexbox grid.
  */
 
-const FlexGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const FlexGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     limitWidth = true,
     gutter = true,
@@ -96,6 +100,7 @@ const FlexGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   };
   const staticStyles = {
     flexWrap: 'wrap',
+    alignContent: 'stretch',
     width: outsideGutter ? '100%' : 'auto',
     marginVertical: 0,
     marginHorizontal: outsideGutter ? 'auto' : -16
@@ -182,7 +187,7 @@ FlexGrid.propTypes = {
    */
   tag: PropTypes.oneOf(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.node.isRequired,
   /**
@@ -216,7 +221,4 @@ FlexGrid.propTypes = {
     sm: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
     xs: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number])
   })
-};
-FlexGrid.Row = Row;
-FlexGrid.Col = Col;
-export default FlexGrid;
+};

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

@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import GutterContext from '../providers/GutterContext';
-import applyInheritance from '../helpers';
-import { responsiveProps, BaseView, StyleSheet, createMediaQueryStyles } from '../../utils';
-import { useViewport } from '../../ViewportProvider';
-import { useTheme } from '../../ThemeProvider';
+import { GutterContext } from '../providers/GutterContext';
+import { applyInheritance } from '../helpers';
+import { responsiveProps } from '../../utils/props/responsiveProps';
+import { BaseView } from '../../utils/BaseView/BaseView';
+import { StyleSheet, createMediaQueryStyles } from '../../utils/ssr-media-query/ssr-media-query';
+import { useViewport } from '../../ViewportProvider/useViewport';
+import { useTheme } from '../../ThemeProvider/useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Col = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const FlexGridCol = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     horizontalAlign,
     children,
@@ -165,14 +167,14 @@ const Col = /*#__PURE__*/React.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.
    *
@@ -238,7 +240,7 @@ Col.propTypes = {
    */
   xlOffset: PropTypes.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.node.isRequired,
   /**
@@ -250,8 +252,7 @@ Col.propTypes = {
   horizontalAlign: responsiveProps.getTypeOptionallyByViewport(PropTypes.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.bool
-};
-export default Col;
+};

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import applyInheritance from '../helpers';
-import { BaseView, StyleSheet, createMediaQueryStyles } from '../../utils';
-import { useTheme } from '../../ThemeProvider';
-import { useViewport } from '../../ViewportProvider';
+import { applyInheritance } from '../helpers';
+import { BaseView } from '../../utils/BaseView/BaseView';
+import { StyleSheet, createMediaQueryStyles } from '../../utils/ssr-media-query/ssr-media-query';
+import { useTheme } from '../../ThemeProvider/useTheme';
+import { useViewport } from '../../ViewportProvider/useViewport';
 import { jsx as _jsx } from "react/jsx-runtime";
 const horizontalAlignStyles = horizontalAlign => {
   switch (horizontalAlign) {
@@ -58,7 +59,7 @@ const distributeStyles = distribute => {
       return {};
   }
 };
-const Row = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const FlexGridRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     horizontalAlign,
     verticalAlign,
@@ -142,8 +143,8 @@ const Row = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children: children
   });
 });
-Row.displayName = 'Row';
-Row.propTypes = {
+FlexGridRow.displayName = 'FlexGridRow';
+FlexGridRow.propTypes = {
   /**
    * Align columns horizontally within their row.
    */
@@ -177,5 +178,4 @@ Row.propTypes = {
    */
   xlReverse: PropTypes.bool,
   children: PropTypes.node.isRequired
-};
-export default Row;
+};

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

@@ -1,4 +1,4 @@
-const applyInheritance = sizes => {
+export const applyInheritance = sizes => {
   let prevSize;
   return sizes.map((size, index) => {
     if (size !== undefined) {
@@ -11,5 +11,4 @@ const applyInheritance = sizes => {
     }
     return undefined;
   });
-};
-export default applyInheritance;
+};

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

@@ -1,3 +1,2 @@
 import React from 'react';
-const GutterContext = /*#__PURE__*/React.createContext(false);
-export default GutterContext;
+export const GutterContext = /*#__PURE__*/React.createContext(false);

package/lib/esm/Footnote/Footnote.js

@@ -8,13 +8,19 @@ import Modal from "react-native-web/dist/exports/Modal";
 import View from "react-native-web/dist/exports/View";
 import SafeAreaView from "react-native-web/dist/exports/SafeAreaView";
 import ScrollView from "react-native-web/dist/exports/ScrollView";
-import defaultDictionary from './dictionary';
-import { getTokensPropType, htmlAttrs, selectSystemProps, useCopy, viewProps } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import { useTheme, useThemeTokens } from '../ThemeProvider';
-import Typography from '../Typography';
-import Icon from '../Icon';
-import OrderedList from '../OrderedList';
+import { dictionary as defaultDictionary } from './dictionary';
+import { getTokensPropType } from '../utils/props/tokens';
+import { htmlAttrs } from '../utils/htmlAttrs';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useCopy } from '../utils/useCopy';
+import { viewProps } from '../utils/props/viewProps';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { Typography } from '../Typography/Typography';
+import { Icon } from '../Icon/Icon';
+import { OrderedList } from '../OrderedList/OrderedList';
+import { OrderedListItem } from '../OrderedList/OrderedListItem';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
 const selectFootnoteStyle = _ref => {
@@ -130,7 +136,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.forwardRef((_ref6, ref) => {
+export const Footnote = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     copy = 'en',
     number = undefined,
@@ -166,7 +172,7 @@ const Footnote = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     }
     return /*#__PURE__*/_jsx(OrderedList, {
       start: number,
-      children: /*#__PURE__*/_jsx(OrderedList.Item, {
+      children: /*#__PURE__*/_jsx(OrderedListItem, {
         children: /*#__PURE__*/_jsx(Text, {
           style: selectCustomContentFontStyle(themeTokens),
           children: content
@@ -288,7 +294,6 @@ Footnote.propTypes = {
     fr: dictionaryContentShape
   })
 };
-export default Footnote;
 const staticStyles = StyleSheet.create({
   container: {
     flex: 1

package/lib/esm/Footnote/FootnoteLink.js

@@ -4,9 +4,15 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
 import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
-import dictionary from './dictionary';
-import { htmlAttrs, selectSystemProps, useCopy, viewProps, wrapStringsInText, variantProp } from '../utils';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { dictionary } from './dictionary';
+import { htmlAttrs } from '../utils/htmlAttrs';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useCopy } from '../utils/useCopy';
+import { viewProps } from '../utils/props/viewProps';
+import { wrapStringsInText } from '../utils/children';
+import { variantProp } from '../utils/props/variantProp';
+import { applyTextStyles } from '../ThemeProvider/utils/styles';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
 
@@ -32,7 +38,7 @@ const selectTextStyle = _ref => {
     })
   };
 };
-const FootnoteLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const FootnoteLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     copy = 'en',
     content = [],
@@ -95,7 +101,6 @@ FootnoteLink.propTypes = {
    */
   onClick: PropTypes.func.isRequired
 };
-export default FootnoteLink;
 const staticStyles = StyleSheet.create({
   text: {
     position: 'relative',

package/lib/esm/Footnote/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     a11yLabel: 'Read legal footnote',
     close: 'close',

package/lib/esm/HorizontalScroll/HorizontalScroll.js

@@ -3,10 +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 { validateThemeTokens, resolveThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensSetPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils';
-import ScrollViewEnd from './ScrollViewEnd';
-import { getItemPositionScrollTarget, itemPositionsPropType } from './itemPositions';
+import { validateThemeTokens, resolveThemeTokens } from '../ThemeProvider/utils/theme-tokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensSetPropType, selectTokens } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { ScrollViewEnd } from './ScrollViewEnd';
+import { getItemPositionScrollTarget, itemPositionsPropType, useItemPositions, getItemPositionLayoutHandler } from './itemPositions';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const tokenKeys = ['nextIcon', 'previousIcon', 'gutter', 'borderBottomWidth', 'borderBottomColor', 'buttonClearance'];
@@ -15,6 +19,13 @@ const selectBorderStyles = (borderBottomWidth, borderBottomColor) => ({
   borderBottomWidth,
   borderBottomColor
 });
+export const horizontalScrollUtils = {
+  selectHorizontalScrollTokens,
+  useItemPositions,
+  getItemPositionScrollTarget,
+  getItemPositionLayoutHandler,
+  itemPositionsPropType
+};
 
 /**
  * Base component that scrolls horizontally and displays left and right buttons if
@@ -22,7 +33,7 @@ const selectBorderStyles = (borderBottomWidth, borderBottomColor) => ({
  *
  * @TODO revisit `ScrollButton` after IconButton is stable.
  */
-const HorizontalScroll = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const HorizontalScroll = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     ScrollButton,
     tokens,
@@ -166,5 +177,4 @@ HorizontalScroll.propTypes = {
   }),
   variant: variantProp.propType,
   children: PropTypes.node
-};
-export default HorizontalScroll;
+};

package/lib/esm/HorizontalScroll/HorizontalScrollButton.js

@@ -2,10 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
-import { variantProp, getTokensPropType, useCopy, copyPropTypes, a11yProps } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import IconButton from '../IconButton';
-import dictionary from './dictionary';
+import { variantProp } from '../utils/props/variantProp';
+import { getTokensPropType } from '../utils/props/tokens';
+import { useCopy } from '../utils/useCopy';
+import { copyPropTypes } from '../utils/props/copyPropTypes';
+import { a11yProps } from '../utils/props/a11yProps';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { IconButton } from '../IconButton/IconButton';
+import { dictionary } from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 const selectContainerStyles = _ref => {
   let {
@@ -24,7 +28,7 @@ const selectContainerStyles = _ref => {
  *
  * @TODO when IconButton is complete and stable revisit this and update interaction state styles.
  */
-const HorizontalScrollButton = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const HorizontalScrollButton = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     direction = 'next',
     icon,
@@ -75,5 +79,4 @@ HorizontalScrollButton.propTypes = {
   offset: PropTypes.number,
   icon: PropTypes.elementType,
   onPress: PropTypes.func.isRequired
-};
-export default HorizontalScrollButton;
+};

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',