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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.responsiveProps = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const getByViewport = propType => ({
@@ -28,7 +28,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
  */
-var _default = exports.default = {
+const responsiveProps = exports.responsiveProps = {
   getByViewport,
   getTypeByViewport: propType => _propTypes.default.shape(getByViewport(propType)),
   getTypeOptionallyByViewport: propType => _propTypes.default.oneOfType([propType, _propTypes.default.shape(getByViewport(propType))])

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = selectSystemProps;
+exports.selectSystemProps = selectSystemProps;
 // Returns a selector for requested prop kinds as well as the propTypes for
 // those props merged into one object
 function selectSystemProps(systemPropHelpers) {

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.spacingProps = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _responsiveProps = _interopRequireDefault(require("./responsiveProps"));
-var _variantProp = _interopRequireDefault(require("./variantProp"));
+var _responsiveProps = require("./responsiveProps");
+var _variantProp = require("./variantProp");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * @typedef {0|1|2|3|4|5|6|7|8|9|10|11} SpacingIndex - value used to select a size on the spacing scale
@@ -30,10 +30,10 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const spacingScale = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 const spacingIndexPropType = _propTypes.default.oneOf(spacingScale);
 const spacingObjectPropType = _propTypes.default.shape({
-  ..._responsiveProps.default.getByViewport(spacingIndexPropType),
+  ..._responsiveProps.responsiveProps.getByViewport(spacingIndexPropType),
   space: spacingIndexPropType,
   options: _propTypes.default.shape({
-    variant: _variantProp.default.propType,
+    variant: _variantProp.variantProp.propType,
     size: _propTypes.default.number
   })
 });
@@ -52,7 +52,7 @@ const spacingObjectPropType = _propTypes.default.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.
  */
-var _default = exports.default = {
+const spacingProps = exports.spacingProps = {
   scale: spacingScale,
   types: {
     spacingIndex: spacingIndexPropType,

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.textInputProps = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
+var _getPropSelector = require("./getPropSelector");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // This file contains common props for components that render a React Native TextInput
 // It excludes interaction handler functions which are in `./handlerProps.js`
@@ -170,7 +170,7 @@ const nativeOnly = {
   textBreakStrategy: _propTypes.default.string,
   underlineColorAndroid: _propTypes.default.string
 };
-var _default = exports.default = {
+const textInputProps = exports.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.
@@ -184,7 +184,7 @@ var _default = exports.default = {
    * Filters a props object. Return only platform-appropriate TextInput props, native inputs
    * may throw errors on receiving unknown props.
    */
-  select: (0, _getPropSelector.default)({
+  select: (0, _getPropSelector.getPropSelector)({
     ...crossPlatform,
     ..._Platform.default.select({
       web: webOnly,

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.textProps = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
+var _getPropSelector = require("./getPropSelector");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // These are the props accepted specifically on React Native (Web) `Text` elements.
 // They are generally concerned with the behaviour of multiline text.
@@ -43,7 +43,7 @@ const webOnly = {
   dir: _propTypes.default.oneOf(['auto', 'ltr', 'rtl']),
   lang: _propTypes.default.string
 };
-var _default = exports.default = {
+const textProps = exports.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.
@@ -57,7 +57,7 @@ var _default = exports.default = {
    * Filters a props object, returning only props specific to `Text` elements
    * on the current platform. Does not include props applicable to `Text` and `View`.
    */
-  select: (0, _getPropSelector.default)({
+  select: (0, _getPropSelector.getPropSelector)({
     ...crossPlatform,
     ..._Platform.default.select({
       web: webOnly,

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

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.variantProp = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
  * @typedef {AppearanceSet} VariantProp
  */
-var _default = exports.default = {
+const variantProp = exports.variantProp = {
   /**
    * 'variant' is an optional object prop on all themable components.
    *

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.viewProps = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
+var _getPropSelector = require("./getPropSelector");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const viewPropTypes = {
   pointerEvents: _propTypes.default.oneOf(['all', 'none', 'box-only', 'box-none']),
@@ -14,7 +14,7 @@ const viewPropTypes = {
   testID: _propTypes.default.string,
   dataSet: _propTypes.default.object
 };
-var _default = exports.default = {
+const viewProps = exports.viewProps = {
   /**
    * Subset of `View` proptypes that could conceivably be needed on any component
    * that renders a single View.
@@ -24,5 +24,5 @@ var _default = exports.default = {
    * Filters a props object, returning only cross-platform View props that are potentially
    * relevant to any basic layout component that renders one View.
    */
-  select: (0, _getPropSelector.default)(viewPropTypes)
+  select: (0, _getPropSelector.getPropSelector)(viewPropTypes)
 };

package/lib/cjs/utils/resolveContentMaxWidth.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.resolveContentMaxWidth = void 0;
 const CONTENT_MAX_WIDTH = 'max';
 const CONTENT_FULL_WIDTH = 'full';
 
@@ -27,4 +27,4 @@ const resolveContentMaxWidth = (contentMaxWidthValue, responsiveWidth) => {
   }
   return contentMaxWidthValue;
 };
-var _default = exports.default = resolveContentMaxWidth;
+exports.resolveContentMaxWidth = resolveContentMaxWidth;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.createStyleSheet = void 0;
 var _cssMediaquery = _interopRequireDefault(require("css-mediaquery"));
 var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
 var _common = require("../utils/common");
@@ -52,4 +52,4 @@ const createStyleSheet = stylesWithQuery => {
     fullStyles: stylesWithQuery
   };
 };
-var _default = exports.default = createStyleSheet;
+exports.createStyleSheet = createStyleSheet;

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

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _createStylesheetMobile = _interopRequireDefault(require("./create-stylesheet-mobile"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = _createStylesheetMobile.default;
+Object.defineProperty(exports, "createStyleSheet", {
+  enumerable: true,
+  get: function () {
+    return _createStylesheetMobile.createStyleSheet;
+  }
+});
+var _createStylesheetMobile = require("./create-stylesheet-mobile");

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

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _createStylesheetMobile = _interopRequireDefault(require("./create-stylesheet-mobile"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = _createStylesheetMobile.default;
+Object.defineProperty(exports, "createStyleSheet", {
+  enumerable: true,
+  get: function () {
+    return _createStylesheetMobile.createStyleSheet;
+  }
+});
+var _createStylesheetMobile = require("./create-stylesheet-mobile");

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

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.createStyleSheet = void 0;
 var _inject = require("../utils/inject");
-var _createDeclarationBlock = _interopRequireDefault(require("../utils/create-declaration-block"));
-var _hash = _interopRequireDefault(require("../hash"));
+var _createDeclarationBlock = require("../utils/create-declaration-block");
+var _hash = require("../hash");
 var _common = require("../utils/common");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const createStyleSheet = stylesWithQuery => {
   if (!stylesWithQuery) return {
     ids: {},
@@ -22,8 +21,8 @@ const createStyleSheet = stylesWithQuery => {
     const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(_common.isMediaOrPseudo);
     mediaQueriesAndPseudoClasses.forEach(query => {
       const sanitizedStyle = (0, _common.sanitizeStyle)(stylesWithQuery[key][query]);
-      const css = (0, _createDeclarationBlock.default)(sanitizedStyle);
-      const stringHash = `rnmq-${(0, _hash.default)(`${key}${query}${css}`)}`;
+      const css = (0, _createDeclarationBlock.createDeclarationBlock)(sanitizedStyle);
+      const stringHash = `rnmq-${(0, _hash.hash)(`${key}${query}${css}`)}`;
       const rule = (0, _common.createCssRule)(query, stringHash, css);
       (0, _inject.addCss)(`${stringHash}`, rule);
       delete cleanStyles[key][query];
@@ -39,4 +38,4 @@ const createStyleSheet = stylesWithQuery => {
     fullStyles: stylesWithQuery
   };
 };
-var _default = exports.default = createStyleSheet;
+exports.createStyleSheet = createStyleSheet;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = hash;
+exports.hash = hash;
 /* eslint-disable no-bitwise */
 function hash(text) {
   if (!text) {

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyleSheet = void 0;
+Object.defineProperty(exports, "createMediaQueryStyles", {
+  enumerable: true,
+  get: function () {
+    return _createMediaQueryStyles.createMediaQueryStyles;
+  }
+});
+Object.defineProperty(exports, "useAllViewportTokens", {
+  enumerable: true,
+  get: function () {
+    return _useAllViewportTokens.useAllViewportTokens;
+  }
+});
+var _createStylesheet = require("./create-stylesheet");
+var _createMediaQueryStyles = require("./utils/create-media-query-styles");
+var _useAllViewportTokens = require("./utils/use-all-viewport-tokens");
+const StyleSheet = exports.StyleSheet = {
+  create: _createStylesheet.createStyleSheet
+};

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

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.createDeclarationBlock = void 0;
 var _createReactDOMStyle = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle"));
 var _prefixStyles = _interopRequireDefault(require("react-native-web/dist/cjs/modules/prefixStyles"));
-var _hyphenateStyleName = _interopRequireDefault(require("./hyphenate-style-name"));
+var _hyphenateStyleName = require("./hyphenate-style-name");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const createDeclarationBlock = style => {
   const domStyle = (0, _prefixStyles.default)((0, _createReactDOMStyle.default)(style));
   const declarationsString = Object.keys(domStyle).map(property => {
     const value = domStyle[property];
-    const prop = (0, _hyphenateStyleName.default)(property);
+    const prop = (0, _hyphenateStyleName.hyphenateStyleName)(property);
     if (Array.isArray(value)) {
       return value.map(v => `${prop}:${v}`).join(';');
     }
@@ -20,4 +20,4 @@ const createDeclarationBlock = style => {
   }).sort().join(';');
   return `{${declarationsString};}`;
 };
-var _default = exports.default = createDeclarationBlock;
+exports.createDeclarationBlock = createDeclarationBlock;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.createMediaQueryStyles = createMediaQueryStyles;
 var _systemConstants = require("@telus-uds/system-constants");
 const inherit = _ref => {
   let {
@@ -63,5 +63,4 @@ function createMediaQueryStyles(viewportStyles) {
     };
   }, {});
   return mediaQueries;
-}
-var _default = exports.default = createMediaQueryStyles;
+}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.hyphenateStyleName = void 0;
 const uppercasePattern = /[A-Z]/g;
 const msPattern = /^ms-/;
 const cache = {};
@@ -15,4 +15,4 @@ const hyphenateStyleName = name => {
   const hName = name.replace(uppercasePattern, toHyphenLower);
   return cache[name] === msPattern.test(hName) ? `-${hName}` : hName;
 };
-var _default = exports.default = hyphenateStyleName;
+exports.hyphenateStyleName = hyphenateStyleName;

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _ThemeProvider = require("../../../ThemeProvider");
-var _ViewportProvider = require("../../../ViewportProvider");
+exports.useAllViewportTokens = void 0;
+var _useThemeTokens = require("../../../ThemeProvider/useThemeTokens");
+var _useViewport = require("../../../ViewportProvider/useViewport");
 /**
  * Hook to get theme tokens for all viewports at once.
  * This is useful for components that need to support React Native Media Queries (RNMQ).
@@ -22,23 +22,23 @@ var _ViewportProvider = require("../../../ViewportProvider");
  * // Returns: { xs: {...}, sm: {...}, md: {...}, lg: {...}, xl: {...}, current: {...} }
  */
 const useAllViewportTokens = (componentName, tokens, variant) => {
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const xs = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+  const viewport = (0, _useViewport.useViewport)();
+  const xs = (0, _useThemeTokens.useThemeTokens)(componentName, tokens, variant, {
     viewport: 'xs'
   });
-  const sm = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+  const sm = (0, _useThemeTokens.useThemeTokens)(componentName, tokens, variant, {
     viewport: 'sm'
   });
-  const md = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+  const md = (0, _useThemeTokens.useThemeTokens)(componentName, tokens, variant, {
     viewport: 'md'
   });
-  const lg = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+  const lg = (0, _useThemeTokens.useThemeTokens)(componentName, tokens, variant, {
     viewport: 'lg'
   });
-  const xl = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+  const xl = (0, _useThemeTokens.useThemeTokens)(componentName, tokens, variant, {
     viewport: 'xl'
   });
-  const current = (0, _ThemeProvider.useThemeTokens)(componentName, tokens, variant, {
+  const current = (0, _useThemeTokens.useThemeTokens)(componentName, tokens, variant, {
     viewport
   });
   return {
@@ -50,4 +50,4 @@ const useAllViewportTokens = (componentName, tokens, variant) => {
     current
   };
 };
-var _default = exports.default = useAllViewportTokens;
+exports.useAllViewportTokens = useAllViewportTokens;

package/lib/cjs/utils/ssr.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ssrStyles = exports.getSSRStyles = exports.getReactNativeWebSSRStyles = exports.default = void 0;
+exports.ssrStyles = exports.getSSRStyles = exports.getReactNativeWebSSRStyles = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _AppRegistry = _interopRequireDefault(require("react-native-web/dist/cjs/exports/AppRegistry"));
 var _inject = require("./ssr-media-query/utils/inject");
@@ -107,8 +107,7 @@ const ssrStyles = function () {
     }
   };
 };
-exports.ssrStyles = ssrStyles;
-var _default = exports.default = ssrStyles;
+
 /**
  * @deprecated - use ssrStyles instead
  *
@@ -119,6 +118,7 @@ var _default = exports.default = ssrStyles;
  * @param {string} [appName]
  * @returns {ReactElement[]}
  */
+exports.ssrStyles = ssrStyles;
 const getReactNativeWebSSRStyles = function (AppRoot) {
   let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
   _AppRegistry.default.registerComponent(appName, () => AppRoot);

package/lib/cjs/utils/transformGradient.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transformGradient = exports.default = void 0;
+exports.transformGradient = void 0;
 /**
  * Transforms a gradient object into a CSS gradient string.
  *
@@ -16,7 +16,4 @@ exports.transformGradient = exports.default = void 0;
  * @returns {string} The CSS gradient string.
  */
 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}%)`;
-exports.transformGradient = transformGradient;
-var _default = exports.default = {
-  transformGradient
-};
+exports.transformGradient = transformGradient;

package/lib/cjs/utils/useCopy.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DEFAULT_COPY = void 0;
+exports.DEFAULT_COPY = void 0;
+exports.useCopy = useCopy;
 const DEFAULT_COPY = exports.DEFAULT_COPY = 'en';
 
 /**
@@ -44,5 +45,4 @@ function useCopy(_ref) {
 
   // support overriding the entire copy dictionary with an object for a single language
   return key => copy[key];
-}
-var _default = exports.default = useCopy;
+}

package/lib/cjs/utils/useDetectOutsideClick.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.useDetectOutsideClick = useDetectOutsideClick;
 var _react = _interopRequireDefault(require("react"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -35,5 +35,4 @@ function useDetectOutsideClick(ref, onOutside) {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [ref, onOutside, enabled]);
-}
-var _default = exports.default = useDetectOutsideClick;
+}

package/lib/cjs/utils/useHash.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.useHash = void 0;
 var _react = require("react");
 const doAction = (action, event) => typeof action === 'function' && action(window?.location?.hash, event);
 
@@ -41,4 +41,4 @@ const useHash = function (action) {
     return () => window.removeEventListener('hashchange', handleChange);
   }, [action]);
 };
-var _default = exports.default = useHash;
+exports.useHash = useHash;

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.useHash = void 0;
 /**
  * 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 = () => {};
-var _default = exports.default = useHash;
+exports.useHash = useHash;

package/lib/cjs/utils/useMediaQuerySpacing.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _ThemeProvider = require("../ThemeProvider");
+exports.useMediaQuerySpacing = void 0;
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
 var _useResponsiveProp = require("./useResponsiveProp");
 /**
  * @typedef {import('@telus-uds/system-constants/viewports').Viewport} Viewport
@@ -78,23 +78,23 @@ const useMediaQuerySpacing = function (spaceValue) {
     lg: getSpaceIndex('lg'),
     xl: getSpaceIndex('xl')
   };
-  const tokensXs = (0, _ThemeProvider.useThemeTokens)(tokenKey, tokens, variant, {
+  const tokensXs = (0, _useThemeTokens.useThemeTokens)(tokenKey, tokens, variant, {
     space: spaceIndexByViewport.xs,
     viewport: 'xs'
   });
-  const tokensSm = (0, _ThemeProvider.useThemeTokens)(tokenKey, tokens, variant, {
+  const tokensSm = (0, _useThemeTokens.useThemeTokens)(tokenKey, tokens, variant, {
     space: spaceIndexByViewport.sm,
     viewport: 'sm'
   });
-  const tokensMd = (0, _ThemeProvider.useThemeTokens)(tokenKey, tokens, variant, {
+  const tokensMd = (0, _useThemeTokens.useThemeTokens)(tokenKey, tokens, variant, {
     space: spaceIndexByViewport.md,
     viewport: 'md'
   });
-  const tokensLg = (0, _ThemeProvider.useThemeTokens)(tokenKey, tokens, variant, {
+  const tokensLg = (0, _useThemeTokens.useThemeTokens)(tokenKey, tokens, variant, {
     space: spaceIndexByViewport.lg,
     viewport: 'lg'
   });
-  const tokensXl = (0, _ThemeProvider.useThemeTokens)(tokenKey, tokens, variant, {
+  const tokensXl = (0, _useThemeTokens.useThemeTokens)(tokenKey, tokens, variant, {
     space: spaceIndexByViewport.xl,
     viewport: 'xl'
   });
@@ -118,4 +118,4 @@ const useMediaQuerySpacing = function (spaceValue) {
     tokensByViewport
   };
 };
-var _default = exports.default = useMediaQuerySpacing;
+exports.useMediaQuerySpacing = useMediaQuerySpacing;

package/lib/cjs/utils/useOverlaidPosition.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.useOverlaidPosition = void 0;
 var _react = require("react");
 var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -241,4 +241,4 @@ const useOverlaidPosition = _ref3 => {
     isReady
   };
 };
-var _default = exports.default = useOverlaidPosition;
+exports.useOverlaidPosition = useOverlaidPosition;

package/lib/cjs/utils/useResponsiveProp.js

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resolveResponsiveProp = exports.default = void 0;
+exports.useResponsiveProp = exports.resolveResponsiveProp = void 0;
 var _systemConstants = require("@telus-uds/system-constants");
-var _ViewportProvider = require("../ViewportProvider");
-var _hasOwnProperty = _interopRequireDefault(require("./hasOwnProperty"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const hasResponsiveProperties = objectProp => _systemConstants.viewports.keys.some(key => (0, _hasOwnProperty.default)(objectProp, key));
+var _useViewport = require("../ViewportProvider/useViewport");
+var _hasOwnProperty = require("./hasOwnProperty");
+const hasResponsiveProperties = objectProp => _systemConstants.viewports.keys.some(key => (0, _hasOwnProperty.hasOwnProperty)(objectProp, key));
 
 /**
  * Resolves a prop which may be a responsive object with keys for viewports.
@@ -27,7 +26,7 @@ const resolveResponsiveProp = (prop, viewport, defaultValue) => {
   // If there's a current viewport, return the closest match at or below it
   _systemConstants.viewports.inherit(prop)[viewport] :
   // If no current viewport is available, default to smallest viewport
-  prop[_systemConstants.viewports.keys.find(key => (0, _hasOwnProperty.default)(prop, key))];
+  prop[_systemConstants.viewports.keys.find(key => (0, _hasOwnProperty.hasOwnProperty)(prop, key))];
   return value === undefined || value === null ? defaultValue : value;
 };
 
@@ -47,7 +46,7 @@ const resolveResponsiveProp = (prop, viewport, defaultValue) => {
  */
 exports.resolveResponsiveProp = resolveResponsiveProp;
 const useResponsiveProp = (prop, defaultValue) => {
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   return resolveResponsiveProp(prop, viewport, defaultValue);
 };
-var _default = exports.default = useResponsiveProp;
+exports.useResponsiveProp = useResponsiveProp;

package/lib/cjs/utils/useSafeLayoutEffect.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.useSafeLayoutEffect = void 0;
 var _react = require("react");
 var _HydrationContext = require("../BaseProvider/HydrationContext");
 const isSSR = typeof window === 'undefined';
@@ -15,7 +15,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
+const useSafeLayoutEffect = exports.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 = (0, _HydrationContext.useHydrationContext)();
@@ -30,5 +30,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]);
-};
-var _default = exports.default = useSafeLayoutEffect;
+};