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

package/lib/esm/utils/info/platform/platform.js

@@ -1 +1,10 @@
-export default '.web (default)';
+import Platform from "react-native-web/dist/exports/Platform"; // Allows consuming libraries that might not have a direct dependency on
+// React Native to check what the current platform is.
+// Particularly useful for validating Jest config: it is possible for Jest to
+// get configured such that Platform.OS returns a different mocked value to the
+// OS being used to select files by platform suffix (e.g. .web, .native).
+export const fileSuffix = '.web (default)';
+export const platform = {
+  OS: Platform.OS,
+  fileSuffix
+};

package/lib/esm/utils/info/platform/platform.native.js

@@ -1,4 +1,4 @@
 // This shouldn't ever be chosen, as the more specific '.ios' and '.android' are available.
 // If this gets picked, either an unsupported React Native platform is being used somehow
 // (e.g. a native Windows app), or there's a serious config problem somewhere.
-export default '.native';
+export const fileSuffix = '.native';

package/lib/esm/utils/info/versions.js

@@ -1,6 +1,6 @@
 import pkgJson from '../../../package.json';
 
 // Add more versions if they are useful e.g. theme schema version
-export default {
+export const versions = {
   uds: pkgJson.version
 };

package/lib/esm/utils/isTouchDevice.js

@@ -4,7 +4,7 @@ import Platform from "react-native-web/dist/exports/Platform";
  *
  * @returns {boolean} True if the device supports touch, false otherwise
  */
-const isTouchDevice = () => {
+export const isTouchDevice = () => {
   if (Platform.OS !== 'web') {
     return true;
   }
@@ -23,5 +23,4 @@ const isTouchDevice = () => {
     }
   }
   return false;
-};
-export default isTouchDevice;
+};

package/lib/esm/utils/pressability.js

@@ -1,6 +1,6 @@
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import pressProps from './props/pressProps';
+import { pressProps } from './props/pressProps';
 
 /**
  * @typedef {import('react').ReactNode} ReactNode

package/lib/esm/utils/props/a11yProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector';
+import { getPropSelector } from './getPropSelector';
 
 // React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
 // so we have to define them ourselves.
@@ -246,7 +246,7 @@ if (Platform.OS === 'web') {
     };
   };
 }
-export default {
+export const a11yProps = {
   /**
    * Proptypes for recognised React Native accessiblity (a11y) props.
    * Spread this in the propTypes of components that accept React Native a11y props.

package/lib/esm/utils/props/clickProps.js

@@ -4,7 +4,7 @@ const clickHandlerMapping = {
   onMouseDown: 'onPressIn',
   onMouseUp: 'onPressOut'
 };
-export default {
+export const clickProps = {
   /**
    * Web-oriented HTML click handlers that may be mapped to React Native press handlers
    */

package/lib/esm/utils/props/componentPropType.js

@@ -7,7 +7,7 @@
  * @param {string|string[]} passedName
  * @return {function}
  */
-export default function componentPropType(passedName) {
+export function componentPropType(passedName) {
   const passedNames = typeof passedName === 'string' ? [passedName] : passedName;
   const checkProp = (props, propName, componentName) => {
     if (props[propName] === undefined || props[propName] === null) {

package/lib/esm/utils/props/contentfulProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector';
+import { getPropSelector } from './getPropSelector';
 const contentfulPropsTypes = {
   ...Platform.select({
     web: {
@@ -10,7 +10,7 @@ const contentfulPropsTypes = {
     default: {}
   })
 };
-export default {
+export const contentfulProps = {
   /**
    * Set of contentful properties used for the content preview inspector.
    */

package/lib/esm/utils/props/copyPropTypes.js

@@ -1,2 +1,2 @@
 import PropTypes from 'prop-types';
-export default PropTypes.oneOf(['en', 'fr']);
+export const copyPropTypes = PropTypes.oneOf(['en', 'fr']);

package/lib/esm/utils/props/getPropSelector.js

@@ -1,5 +1,5 @@
 import merge from 'lodash.merge';
-import hasOwnProperty from '../hasOwnProperty';
+import { hasOwnProperty } from '../hasOwnProperty';
 
 /**
  * @callback PropSelectorCallback - a callback called for each prop passed to a component
@@ -36,7 +36,7 @@ const applyCallback = (callback, items, key, value) => {
  * @param {PropSelectorCallback} callback - optional function taking `(key, value)` returning either undefined or an object of new props to merge in
  * @returns {object} - valid props for this component
  */
-export default function getPropSelector(propTypes, regexp, callback) {
+export function getPropSelector(propTypes, regexp, callback) {
   return props => Object.entries(props).reduce((items, _ref) => {
     let [key, value] = _ref;
     return (

package/lib/esm/utils/props/handlerProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector';
+import { getPropSelector } from './getPropSelector';
 const focusHandlerProps = {
   types: {
     /**

package/lib/esm/utils/props/hrefAttrsProp.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 // Props related to HTML <a> anchor link attributes.
 const targetValues = ['_self', '_blank', '_parent', '_top'];
-export default {
+export const hrefAttrsProp = {
   types: {
     // React Native Web >= 0.15.0 supports hrefAttrs prop with only these properties
     // and passes them to <a> if an element has a href prop or accessibilityRole "link"

package/lib/esm/utils/props/inputSupportsProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import tooltipPropTypes from '../../Tooltip/shared';
-export default {
+import { propTypes as tooltipPropTypes } from '../../Tooltip/shared';
+export const inputSupportsProps = {
   types: {
     /**
      * Whether the English or French copy will be used (e.g. for accessibility labels).

package/lib/esm/utils/props/linkProps.js

@@ -2,16 +2,16 @@ import Linking from "react-native-web/dist/exports/Linking";
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { pressPropTypes } from './pressProps';
-import a11yProps from './a11yProps';
-import hrefAttrsProp from './hrefAttrsProp';
-import getPropSelector from './getPropSelector';
+import { a11yProps } from './a11yProps';
+import { hrefAttrsProp } from './hrefAttrsProp';
+import { getPropSelector } from './getPropSelector';
 const linkPropTypes = {
   ...pressPropTypes,
   href: PropTypes.string,
   hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
   ...a11yProps.types
 };
-export default {
+export const linkProps = {
   /**
    * Proptypes for components that, on Web, can output <a href="..."> link elements
    */

package/lib/esm/utils/props/paddingProp.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-export default {
+export const paddingProp = {
   propType: PropTypes.shape({
     paddingBottom: PropTypes.number,
     paddingLeft: PropTypes.number,

package/lib/esm/utils/props/pressProps.js

@@ -1,7 +1,7 @@
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
-import rectProp from './rectProp';
-import getPropSelector from './getPropSelector';
+import { rectProp } from './rectProp';
+import { getPropSelector } from './getPropSelector';
 const pressHandlerPropTypes = {
   onPress: PropTypes.func,
   onPressIn: PropTypes.func,
@@ -29,7 +29,7 @@ export const pressPropTypes = {
     }
   })
 };
-export default {
+export const pressProps = {
   /**
    * Proptypes for clickable or pressable components, including web-only props
    */

package/lib/esm/utils/props/rectProp.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-export default {
+export const rectProp = {
   propType: PropTypes.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,

package/lib/esm/utils/props/responsiveProps.js

@@ -21,7 +21,7 @@ const getByViewport = propType => ({
  * @property {Function} getTypeOptionallyByViewport - returns a PropTypes validator that accepts
  *   either the provided proptype on its own, or the output of getTypeByViewport
  */
-export default {
+export const responsiveProps = {
   getByViewport,
   getTypeByViewport: propType => PropTypes.shape(getByViewport(propType)),
   getTypeOptionallyByViewport: propType => PropTypes.oneOfType([propType, PropTypes.shape(getByViewport(propType))])

package/lib/esm/utils/props/selectSystemProps.js

@@ -1,6 +1,6 @@
 // Returns a selector for requested prop kinds as well as the propTypes for
 // those props merged into one object
-export default function selectSystemProps(systemPropHelpers) {
+export function selectSystemProps(systemPropHelpers) {
   const selectProps = props => systemPropHelpers.reduce((acc, propHelper) => {
     if (typeof propHelper?.select !== 'function') {
       throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in ${propHelper}`);

package/lib/esm/utils/props/spacingProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import responsiveProps from './responsiveProps';
-import variantProp from './variantProp';
+import { responsiveProps } from './responsiveProps';
+import { variantProp } from './variantProp';
 
 /**
  * @typedef {0|1|2|3|4|5|6|7|8|9|10|11} SpacingIndex - value used to select a size on the spacing scale
@@ -46,7 +46,7 @@ const spacingObjectPropType = PropTypes.shape({
  *   scale, or an object with an optional `options` key and one or more spacing indexes keyed either by
  *   viewports or `space` to apply at all viewports.
  */
-export default {
+export const spacingProps = {
   scale: spacingScale,
   types: {
     spacingIndex: spacingIndexPropType,

package/lib/esm/utils/props/textInputProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector';
+import { getPropSelector } from './getPropSelector';
 
 // This file contains common props for components that render a React Native TextInput
 // It excludes interaction handler functions which are in `./handlerProps.js`
@@ -164,7 +164,7 @@ const nativeOnly = {
   textBreakStrategy: PropTypes.string,
   underlineColorAndroid: PropTypes.string
 };
-export default {
+export const textInputProps = {
   /**
    * Subset of proptypes that can be passed down to a React Native or React Native Web
    * `TextInput` component. Allow regardless of platform, so cross-platform apps don't warn.

package/lib/esm/utils/props/textProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector';
+import { getPropSelector } from './getPropSelector';
 
 // These are the props accepted specifically on React Native (Web) `Text` elements.
 // They are generally concerned with the behaviour of multiline text.
@@ -37,7 +37,7 @@ const webOnly = {
   dir: PropTypes.oneOf(['auto', 'ltr', 'rtl']),
   lang: PropTypes.string
 };
-export default {
+export const textProps = {
   /**
    * Set of prop types specific to React Native and React Native Web `Text`,
    * which largely revolve around the behaviour of multiline non-pressable text.

package/lib/esm/utils/props/variantProp.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
  * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
  * @typedef {AppearanceSet} VariantProp
  */
-export default {
+export const variantProp = {
   /**
    * 'variant' is an optional object prop on all themable components.
    *

package/lib/esm/utils/props/viewProps.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import getPropSelector from './getPropSelector';
+import { getPropSelector } from './getPropSelector';
 const viewPropTypes = {
   pointerEvents: PropTypes.oneOf(['all', 'none', 'box-only', 'box-none']),
   onLayout: PropTypes.func,
@@ -7,7 +7,7 @@ const viewPropTypes = {
   testID: PropTypes.string,
   dataSet: PropTypes.object
 };
-export default {
+export const viewProps = {
   /**
    * Subset of `View` proptypes that could conceivably be needed on any component
    * that renders a single View.

package/lib/esm/utils/resolveContentMaxWidth.js

@@ -9,7 +9,7 @@ const CONTENT_FULL_WIDTH = 'full';
  * @param {number} responsiveWidth - The responsive width to use when contentMaxWidthValue is CONTENT_MAX_WIDTH.
  * @returns {number|string|null} The resolved maximum width value, or null if full width is desired.
  */
-const resolveContentMaxWidth = (contentMaxWidthValue, responsiveWidth) => {
+export const resolveContentMaxWidth = (contentMaxWidthValue, responsiveWidth) => {
   if (!contentMaxWidthValue || contentMaxWidthValue === CONTENT_FULL_WIDTH) {
     return null;
   }
@@ -20,5 +20,4 @@ const resolveContentMaxWidth = (contentMaxWidthValue, responsiveWidth) => {
     return responsiveWidth;
   }
   return contentMaxWidthValue;
-};
-export default resolveContentMaxWidth;
+};

package/lib/esm/utils/ssr-media-query/create-stylesheet/create-stylesheet-mobile.js

@@ -1,7 +1,7 @@
 import mediaQuery from 'css-mediaquery';
 import Dimensions from "react-native-web/dist/exports/Dimensions";
 import { isMediaOrPseudo, isMedia } from '../utils/common';
-const createStyleSheet = stylesWithQuery => {
+export const createStyleSheet = stylesWithQuery => {
   if (!stylesWithQuery) return {
     ids: {},
     styles: {},
@@ -44,5 +44,4 @@ const createStyleSheet = stylesWithQuery => {
     styles: cleanStyles,
     fullStyles: stylesWithQuery
   };
-};
-export default createStyleSheet;
+};

package/lib/esm/utils/ssr-media-query/create-stylesheet/index.android.js

@@ -1,2 +1 @@
-import createStyleSheet from './create-stylesheet-mobile';
-export default createStyleSheet;
+export { createStyleSheet } from './create-stylesheet-mobile';

package/lib/esm/utils/ssr-media-query/create-stylesheet/index.ios.js

@@ -1,2 +1 @@
-import createStyleSheet from './create-stylesheet-mobile';
-export default createStyleSheet;
+export { createStyleSheet } from './create-stylesheet-mobile';

package/lib/esm/utils/ssr-media-query/create-stylesheet/index.js

@@ -1,8 +1,8 @@
 import { addCss } from '../utils/inject';
-import createDeclarationBlock from '../utils/create-declaration-block';
-import hash from '../hash';
+import { createDeclarationBlock } from '../utils/create-declaration-block';
+import { hash } from '../hash';
 import { isMediaOrPseudo, deepClone, createCssRule, sanitizeStyle } from '../utils/common';
-const createStyleSheet = stylesWithQuery => {
+export const createStyleSheet = stylesWithQuery => {
   if (!stylesWithQuery) return {
     ids: {},
     styles: {},
@@ -31,5 +31,4 @@ const createStyleSheet = stylesWithQuery => {
     styles: cleanStyles,
     fullStyles: stylesWithQuery
   };
-};
-export default createStyleSheet;
+};

package/lib/esm/utils/ssr-media-query/hash.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-bitwise */
-export default function hash(text) {
+export function hash(text) {
   if (!text) {
     return '';
   }

package/lib/esm/utils/ssr-media-query/ssr-media-query.js

@@ -0,0 +1,7 @@
+import { createStyleSheet } from './create-stylesheet';
+import { createMediaQueryStyles } from './utils/create-media-query-styles';
+import { useAllViewportTokens } from './utils/use-all-viewport-tokens';
+const StyleSheet = {
+  create: createStyleSheet
+};
+export { StyleSheet, createMediaQueryStyles, useAllViewportTokens };

package/lib/esm/utils/ssr-media-query/utils/create-declaration-block.js

@@ -1,7 +1,7 @@
 import createReactDOMStyle from 'react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle';
 import prefixStyles from 'react-native-web/dist/cjs/modules/prefixStyles';
-import hyphenateStyleName from './hyphenate-style-name';
-const createDeclarationBlock = style => {
+import { hyphenateStyleName } from './hyphenate-style-name';
+export const createDeclarationBlock = style => {
   const domStyle = prefixStyles(createReactDOMStyle(style));
   const declarationsString = Object.keys(domStyle).map(property => {
     const value = domStyle[property];
@@ -12,5 +12,4 @@ const createDeclarationBlock = style => {
     return `${prop}:${value} !important`;
   }).sort().join(';');
   return `{${declarationsString};}`;
-};
-export default createDeclarationBlock;
+};

package/lib/esm/utils/ssr-media-query/utils/create-media-query-styles.js

@@ -40,7 +40,7 @@ const inherit = _ref => {
  * @returns { Object } - The media query styles.
  */
 
-function createMediaQueryStyles(viewportStyles) {
+export function createMediaQueryStyles(viewportStyles) {
   let shouldInherit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   const effectiveStyles = shouldInherit ? inherit(viewportStyles) : viewportStyles;
   const viewportsArray = viewports.keys;
@@ -57,5 +57,4 @@ function createMediaQueryStyles(viewportStyles) {
     };
   }, {});
   return mediaQueries;
-}
-export default createMediaQueryStyles;
+}

package/lib/esm/utils/ssr-media-query/utils/hyphenate-style-name.js

@@ -2,11 +2,10 @@ const uppercasePattern = /[A-Z]/g;
 const msPattern = /^ms-/;
 const cache = {};
 const toHyphenLower = match => `-${match.toLowerCase()}`;
-const hyphenateStyleName = name => {
+export const hyphenateStyleName = name => {
   if (Object.prototype.hasOwnProperty.call(cache, name)) {
     return cache[name];
   }
   const hName = name.replace(uppercasePattern, toHyphenLower);
   return cache[name] === msPattern.test(hName) ? `-${hName}` : hName;
-};
-export default hyphenateStyleName;
+};

package/lib/esm/utils/ssr-media-query/utils/use-all-viewport-tokens.js

@@ -1,5 +1,5 @@
-import { useThemeTokens } from '../../../ThemeProvider';
-import { useViewport } from '../../../ViewportProvider';
+import { useThemeTokens } from '../../../ThemeProvider/useThemeTokens';
+import { useViewport } from '../../../ViewportProvider/useViewport';
 
 /**
  * Hook to get theme tokens for all viewports at once.
@@ -16,7 +16,7 @@ import { useViewport } from '../../../ViewportProvider';
  * const allTokens = useAllViewportTokens('StackView', tokens, variant)
  * // Returns: { xs: {...}, sm: {...}, md: {...}, lg: {...}, xl: {...}, current: {...} }
  */
-const useAllViewportTokens = (componentName, tokens, variant) => {
+export const useAllViewportTokens = (componentName, tokens, variant) => {
   const viewport = useViewport();
   const xs = useThemeTokens(componentName, tokens, variant, {
     viewport: 'xs'
@@ -44,5 +44,4 @@ const useAllViewportTokens = (componentName, tokens, variant) => {
     xl,
     current
   };
-};
-export default useAllViewportTokens;
+};

package/lib/esm/utils/ssr.js

@@ -100,7 +100,6 @@ export const ssrStyles = function () {
     }
   };
 };
-export default ssrStyles;
 
 /**
  * @deprecated - use ssrStyles instead

package/lib/esm/utils/transformGradient.js

@@ -9,7 +9,4 @@
  * @param {number} gradient.stops[].stop - The position of the gradient stop as a percentage.
  * @returns {string} The CSS gradient string.
  */
-export const transformGradient = gradient => `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${gradient.stops[0].stop * 100}%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`;
-export default {
-  transformGradient
-};
+export const transformGradient = gradient => `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${gradient.stops[0].stop * 100}%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`;

package/lib/esm/utils/useCopy.js

@@ -27,7 +27,7 @@ export const DEFAULT_COPY = 'en';
  * @param {'en'|'fr'|object} copy - language
  * @return {function(string): string}
  */
-function useCopy(_ref) {
+export function useCopy(_ref) {
   let {
     dictionary,
     copy = DEFAULT_COPY
@@ -38,5 +38,4 @@ function useCopy(_ref) {
 
   // support overriding the entire copy dictionary with an object for a single language
   return key => copy[key];
-}
-export default useCopy;
+}

package/lib/esm/utils/useDetectOutsideClick.js

@@ -11,7 +11,7 @@ import Platform from "react-native-web/dist/exports/Platform";
  *   Flag to enable or disable the outside-click detection at runtime.
  *   @deprecated Will be removed in next major release; detection will always be enabled.
  */
-function useDetectOutsideClick(ref, onOutside) {
+export function useDetectOutsideClick(ref, onOutside) {
   let enabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   React.useEffect(() => {
     if (!enabled || Platform.OS !== 'web') {
@@ -27,5 +27,4 @@ function useDetectOutsideClick(ref, onOutside) {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [ref, onOutside, enabled]);
-}
-export default useDetectOutsideClick;
+}

package/lib/esm/utils/useHash.js

@@ -16,7 +16,7 @@ const doAction = (action, event) => typeof action === 'function' && action(windo
  * @param {(hash: string, event?: SyntheticEvent) => void} action - a function to act on the current hash on load and when it changes
  * @returns
  */
-const useHash = function (action) {
+export const useHash = function (action) {
   let isReady = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   const [isDone, setIsDone] = useState(false);
   // Do the action just once when ready after component mount, from hash on page load
@@ -34,5 +34,4 @@ const useHash = function (action) {
     window.addEventListener('hashchange', handleChange);
     return () => window.removeEventListener('hashchange', handleChange);
   }, [action]);
-};
-export default useHash;
+};

package/lib/esm/utils/useHash.native.js

@@ -2,5 +2,4 @@
  * No URL hashes on Native, so do a no-op. Remembering scenes for reloads
  * is handled at OS level and deep links have completely different usage.
  */
-const useHash = () => {};
-export default useHash;
+export const useHash = () => {};

package/lib/esm/utils/useMediaQuerySpacing.js

@@ -1,4 +1,4 @@
-import { useThemeTokens } from '../ThemeProvider';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
 import { resolveResponsiveProp } from './useResponsiveProp';
 
 /**
@@ -52,7 +52,7 @@ import { resolveResponsiveProp } from './useResponsiveProp';
  * - `sizeByViewport`: The actual pixel/number values for each viewport
  * - `tokensByViewport`: The full theme tokens for each viewport (for advanced use cases)
  */
-const useMediaQuerySpacing = function (spaceValue) {
+export const useMediaQuerySpacing = function (spaceValue) {
   let tokenKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'spacingScale';
   let tokens = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let variant = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
@@ -112,5 +112,4 @@ const useMediaQuerySpacing = function (spaceValue) {
     sizeByViewport,
     tokensByViewport
   };
-};
-export default useMediaQuerySpacing;
+};

package/lib/esm/utils/useOverlaidPosition.js

@@ -116,7 +116,7 @@ function getOverlaidPosition(_ref2) {
  * a small task because UDS's tooltip logic only really works for short text - it might be
  * better to use a third-party library).
  */
-const useOverlaidPosition = _ref3 => {
+export const useOverlaidPosition = _ref3 => {
   let {
     isShown = false,
     offsets,
@@ -233,5 +233,4 @@ const useOverlaidPosition = _ref3 => {
     onTargetLayout,
     isReady
   };
-};
-export default useOverlaidPosition;
+};

package/lib/esm/utils/useResponsiveProp.js

@@ -1,6 +1,6 @@
 import { viewports } from '@telus-uds/system-constants';
-import { useViewport } from '../ViewportProvider';
-import hasOwnProperty from './hasOwnProperty';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { hasOwnProperty } from './hasOwnProperty';
 const hasResponsiveProperties = objectProp => viewports.keys.some(key => hasOwnProperty(objectProp, key));
 
 /**
@@ -38,8 +38,7 @@ export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
  * @param {*} [defaultValue] - default value to provide if no matches found for the current viewport
  * @returns {*}
  */
-const useResponsiveProp = (prop, defaultValue) => {
+export const useResponsiveProp = (prop, defaultValue) => {
   const viewport = useViewport();
   return resolveResponsiveProp(prop, viewport, defaultValue);
-};
-export default useResponsiveProp;
+};

package/lib/esm/utils/useSafeLayoutEffect.js

@@ -9,7 +9,7 @@ const noop = () => {};
  *  - During hydration from SSR, the provided function is skipped to avoid mismatches from server content.
  *  - In SSR, it is a no-op function to avoid warnings about using useLayoutEffect in SSR
  */
-const useSafeLayoutEffect = isSSR ? noop // avoid React's fussy warnings by ensuring to never call useLayoutEffect on server
+export const useSafeLayoutEffect = isSSR ? noop // avoid React's fussy warnings by ensuring to never call useLayoutEffect on server
 : function (fn) {
   let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   const isHydrating = useHydrationContext();
@@ -24,5 +24,4 @@ const useSafeLayoutEffect = isSSR ? noop // avoid React's fussy warnings by ensu
     // If there's no hydration in progress, behave like useLayoutEffect.
     return callback();
   }, [isHydrating, callback]);
-};
-export default useSafeLayoutEffect;
+};