@telus-uds/components-base 1.96.0 → 1.97.1

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

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 => {
-  const domStyle = (0, _prefixStyles.default)((0, _createReactDOMStyle.default)(style));
+  const domStyle = prefixStyles(createReactDOMStyle(style));
   const declarationsString = Object.keys(domStyle).map(property => {
     const value = domStyle[property];
-    const prop = (0, _hyphenateStyleName.default)(property);
+    const prop = hyphenateStyleName(property);
     if (Array.isArray(value)) {
       return value.map(v => `${prop}:${v}`).join(';');
     }
@@ -20,5 +13,4 @@ const createDeclarationBlock = style => {
   }).sort().join(';');
   return `{${declarationsString};}`;
 };
-var _default = createDeclarationBlock;
-exports.default = _default;
+export default createDeclarationBlock;

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

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _systemConstants = require("@telus-uds/system-constants");
+import { viewports } from '@telus-uds/system-constants';
 const inherit = _ref => {
   let {
     xs,
@@ -49,12 +43,12 @@ const inherit = _ref => {
 function createMediaQueryStyles(viewportStyles) {
   let shouldInherit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   const effectiveStyles = shouldInherit ? inherit(viewportStyles) : viewportStyles;
-  const viewportsArray = _systemConstants.viewports.keys;
+  const viewportsArray = viewports.keys;
   const mediaQueries = Object.entries(effectiveStyles).reduce((acc, _ref2) => {
     let [viewport, styles] = _ref2;
-    const minWidth = _systemConstants.viewports.map.get(viewport);
+    const minWidth = viewports.map.get(viewport);
     const nextViewport = viewportsArray[viewportsArray.indexOf(viewport) + 1];
-    const maxWidth = _systemConstants.viewports.map.get(nextViewport);
+    const maxWidth = viewports.map.get(nextViewport);
     const mediaQuery = `@media (min-width: ${minWidth}px)${maxWidth ? ` and (max-width: ${maxWidth}px)` : ''}`;
     return {
       ...acc,
@@ -63,5 +57,4 @@ function createMediaQueryStyles(viewportStyles) {
   }, {});
   return mediaQueries;
 }
-var _default = createMediaQueryStyles;
-exports.default = _default;
+export default createMediaQueryStyles;

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

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

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

@@ -1,12 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.hasCss = exports.flush = exports.addCss = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
 const rules = {};
 let styleSheet;
 if (typeof window !== 'undefined' && typeof document !== 'undefined') {
@@ -18,12 +11,11 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
     return style.sheet;
   })();
 }
-const hasCss = (id, text) => {
+export const hasCss = (id, text) => {
   var _rules$id$text, _rules$id$text$includ;
   return !!rules[id] && !!((_rules$id$text = rules[id].text) !== null && _rules$id$text !== void 0 && (_rules$id$text$includ = _rules$id$text.includes) !== null && _rules$id$text$includ !== void 0 && _rules$id$text$includ.call(_rules$id$text, text));
 };
-exports.hasCss = hasCss;
-const addCss = (id, text) => {
+export const addCss = (id, text) => {
   if (!hasCss(id, text)) {
     var _rules$id;
     rules[id] = (rules === null || rules === void 0 ? void 0 : rules[id]) || {};
@@ -33,10 +25,9 @@ const addCss = (id, text) => {
     }
   }
 };
-exports.addCss = addCss;
-const flush = () => {
-  if (_Platform.default.OS === 'web') {
-    return /*#__PURE__*/_react.default.createElement('style', {
+export const flush = () => {
+  if (Platform.OS === 'web') {
+    return /*#__PURE__*/React.createElement('style', {
       id: 'rnmq',
       key: 'rnmq',
       dangerouslySetInnerHTML: {
@@ -45,5 +36,4 @@ const flush = () => {
     });
   }
   return {};
-};
-exports.flush = flush;
+};

package/lib/utils/ssr.js

@@ -1,14 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ssrStyles = exports.getSSRStyles = exports.getReactNativeWebSSRStyles = exports.default = 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");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import AppRegistry from "react-native-web/dist/exports/AppRegistry";
+import { flush } from './ssr-media-query/utils/inject';
 /** @typedef {import('react').ComponentType} ReactComponent */
 /** @typedef {import('react').ReactElement} ReactElement */
 
@@ -27,7 +19,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {boolean} [options.styleGetters]
  * @param {(ReactElement) => ReactElement} [options.collectStyles]
  */
-const ssrStyles = function () {
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ssrStyles = function () {
   let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'UDS app';
   let {
     styleGetters = [],
@@ -54,12 +47,12 @@ const ssrStyles = function () {
         renderedByRNW = false,
         WrapperComponent
       } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-      _AppRegistry.default.registerComponent(appName, () => App);
+      AppRegistry.registerComponent(appName, () => App);
       // AppRegistry.getApplication renders the app in a container, and collects styles.
       const {
         element,
         getStyleElement
-      } = _AppRegistry.default.getApplication(appName, {
+      } = AppRegistry.getApplication(appName, {
         WrapperComponent,
         initialProps: props
       });
@@ -72,11 +65,11 @@ const ssrStyles = function () {
       // If the live app is not rendered using AppRegistry.runApplication, we need to
       // re-render it without the <AppContainer> wrapper, to avoid SSR mismatch errors.
       // Default to this as many platforms (e.g. NextJS) will use their own renderers.
-      WrapperComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperComponent, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
+      WrapperComponent ? /*#__PURE__*/_jsx(WrapperComponent, {
+        children: /*#__PURE__*/_jsx(App, {
           ...props
         })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
+      }) : /*#__PURE__*/_jsx(App, {
         ...props
       });
       const getRNWStyle = () => getStyleElement({
@@ -103,12 +96,12 @@ const ssrStyles = function () {
       for (var _len = arguments.length, existingStyles = new Array(_len), _key = 0; _key < _len; _key++) {
         existingStyles[_key] = arguments[_key];
       }
-      return [...existingStyles, ...styleGetters.flatMap(getter => getter()), (0, _inject.flush)()];
+      return [...existingStyles, ...styleGetters.flatMap(getter => getter()), flush()];
     }
   };
 };
-exports.ssrStyles = ssrStyles;
-var _default = ssrStyles;
+export default ssrStyles;
+
 /**
  * @deprecated - use ssrStyles instead
  *
@@ -119,13 +112,13 @@ var _default = ssrStyles;
  * @param {string} [appName]
  * @returns {ReactElement[]}
  */
-exports.default = _default;
-const getReactNativeWebSSRStyles = function (AppRoot) {
+
+export const getReactNativeWebSSRStyles = function (AppRoot) {
   let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
-  _AppRegistry.default.registerComponent(appName, () => AppRoot);
+  AppRegistry.registerComponent(appName, () => AppRoot);
   const {
     getStyleElement
-  } = _AppRegistry.default.getApplication(appName);
+  } = AppRegistry.getApplication(appName);
   return [getStyleElement()];
 };
 
@@ -140,12 +133,10 @@ const getReactNativeWebSSRStyles = function (AppRoot) {
  * @param {ReactElement[]} [existingStyles]
  * @returns {ReactElement[]}
  */
-exports.getReactNativeWebSSRStyles = getReactNativeWebSSRStyles;
-const getSSRStyles = function (AppRoot) {
+export const getSSRStyles = function (AppRoot) {
   let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
   let existingStyles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   return [...existingStyles, ...getReactNativeWebSSRStyles(AppRoot, appName)
   // if any other CSS-in-JS is added e.g. styled-components generate and add its styles here
   ];
-};
-exports.getSSRStyles = getSSRStyles;
+};

package/lib/utils/transformGradient.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.transformGradient = exports.default = void 0;
 /**
  * Transforms a gradient object into a CSS gradient string.
  *
@@ -15,9 +9,7 @@ exports.transformGradient = exports.default = void 0;
  * @param {number} gradient.stops[].stop - The position of the gradient stop as a percentage.
  * @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 = {
+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
-};
-exports.default = _default;
+};

package/lib/utils/useCopy.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.DEFAULT_COPY = void 0;
-const DEFAULT_COPY = 'en';
+export const DEFAULT_COPY = 'en';
 
 /**
  * Extract translations from a keyed dictionary for a given language.
@@ -33,7 +27,6 @@ const DEFAULT_COPY = 'en';
  * @param {'en'|'fr'|object} copy - language
  * @return {function(string): string}
  */
-exports.DEFAULT_COPY = DEFAULT_COPY;
 function useCopy(_ref) {
   let {
     dictionary,
@@ -46,5 +39,4 @@ function useCopy(_ref) {
   // support overriding the entire copy dictionary with an object for a single language
   return key => copy[key];
 }
-var _default = useCopy;
-exports.default = _default;
+export default useCopy;

package/lib/utils/useHash.js

@@ -1,13 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
+import { useEffect, useState } from 'react';
 const doAction = (action, event) => {
-  var _window, _window$location;
-  return typeof action === 'function' && action((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.hash, event);
+  var _window;
+  return typeof action === 'function' && action((_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.hash, event);
 };
 
 /**
@@ -27,10 +21,10 @@ const doAction = (action, event) => {
  */
 const useHash = function (action) {
   let isReady = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  const [isDone, setIsDone] = (0, _react.useState)(false);
+  const [isDone, setIsDone] = useState(false);
   // Do the action just once when ready after component mount, from hash on page load
   const isToDo = isReady && !isDone;
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (isToDo) {
       setIsDone(true);
       doAction(action);
@@ -38,11 +32,10 @@ const useHash = function (action) {
   }, [isToDo, action]);
 
   // Bind the action for each hash change; do re-bind if the function changes.
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     const handleChange = event => doAction(action, event);
     window.addEventListener('hashchange', handleChange);
     return () => window.removeEventListener('hashchange', handleChange);
   }, [action]);
 };
-var _default = useHash;
-exports.default = _default;
+export default useHash;

package/lib/utils/useHash.native.js

@@ -1,13 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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 = useHash;
-exports.default = _default;
+export default useHash;

package/lib/utils/useOverlaidPosition.js

@@ -1,13 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import { useCallback, useEffect, useRef, useState } from 'react';
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+import Platform from "react-native-web/dist/exports/Platform";
 const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
   const offset = Math.max(0, initialOffset);
   const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
@@ -130,14 +123,14 @@ const useOverlaidPosition = _ref3 => {
     }
   } = _ref3;
   // Element in main document flow that the targetRef element is positioned around
-  const sourceRef = (0, _react.useRef)(null);
-  const [sourceLayout, setSourceLayout] = (0, _react.useState)(null);
+  const sourceRef = useRef(null);
+  const [sourceLayout, setSourceLayout] = useState(null);
 
   // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
-  const targetRef = (0, _react.useRef)(null);
-  const [targetDimensions, setTargetDimensions] = (0, _react.useState)(null);
-  const [windowDimensions, setWindowDimensions] = (0, _react.useState)(null);
-  const onTargetLayout = (0, _react.useCallback)(_ref4 => {
+  const targetRef = useRef(null);
+  const [targetDimensions, setTargetDimensions] = useState(null);
+  const [windowDimensions, setWindowDimensions] = useState(null);
+  const onTargetLayout = useCallback(_ref4 => {
     let {
       nativeEvent: {
         layout: {
@@ -162,14 +155,14 @@ const useOverlaidPosition = _ref3 => {
     });
   }, []);
   const readyToShow = Boolean(isShown && sourceRef.current);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     const handleDimensionsChange = _ref5 => {
       var _sourceRef$current;
       let {
         window
       } = _ref5;
-      const measurementFunction = _Platform.default.OS === 'web' ? 'measureInWindow' : 'measure';
-      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 ? void 0 : _sourceRef$current[measurementFunction]((x, y, width, height) => {
+      const measurementFunction = Platform.OS === 'web' ? 'measureInWindow' : 'measure';
+      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 || _sourceRef$current[measurementFunction]((x, y, width, height) => {
         setWindowDimensions(window);
         setSourceLayout({
           x,
@@ -185,17 +178,17 @@ const useOverlaidPosition = _ref3 => {
       if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
         // React Native >=0.65.0
         subscription.remove();
-      } else if (typeof _Dimensions.default.remove === 'function') {
+      } else if (typeof Dimensions.remove === 'function') {
         // React Native <0.65.0
-        _Dimensions.default.remove('change', handleDimensionsChange);
+        Dimensions.remove('change', handleDimensionsChange);
       }
       setSourceLayout(null);
       setTargetDimensions(null);
     };
     if (readyToShow) {
-      subscription = _Dimensions.default.addEventListener('change', handleDimensionsChange);
+      subscription = Dimensions.addEventListener('change', handleDimensionsChange);
       handleDimensionsChange({
-        window: _Dimensions.default.get('window')
+        window: Dimensions.get('window')
       });
     } else {
       unsubscribe();
@@ -218,5 +211,4 @@ const useOverlaidPosition = _ref3 => {
     isReady
   };
 };
-var _default = useOverlaidPosition;
-exports.default = _default;
+export default useOverlaidPosition;

package/lib/utils/useResponsiveProp.js

@@ -1,14 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.resolveResponsiveProp = exports.default = void 0;
-var _systemConstants = require("@telus-uds/system-constants");
-var _ViewportProvider = require("../ViewportProvider");
-var _hasOwnProperty = _interopRequireDefault(require("./hasOwnProperty"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const hasResponsiveProperties = objectProp => _systemConstants.viewports.keys.some(key => (0, _hasOwnProperty.default)(objectProp, key));
+import { viewports } from '@telus-uds/system-constants';
+import { useViewport } from '../ViewportProvider';
+import hasOwnProperty from './hasOwnProperty';
+const hasResponsiveProperties = objectProp => viewports.keys.some(key => hasOwnProperty(objectProp, key));
 
 /**
  * Resolves a prop which may be a responsive object with keys for viewports.
@@ -20,14 +13,14 @@ const hasResponsiveProperties = objectProp => _systemConstants.viewports.keys.so
  * @param {*} [defaultValue]
  * @returns {*}
  */
-const resolveResponsiveProp = (prop, viewport, defaultValue) => {
+export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
   if (prop === undefined) return defaultValue;
   if (!prop || typeof prop !== 'object' || !hasResponsiveProperties(prop)) return prop;
-  const value = _systemConstants.viewports.keys.includes(viewport) ?
+  const value = viewports.keys.includes(viewport) ?
   // If there's a current viewport, return the closest match at or below it
-  _systemConstants.viewports.inherit(prop)[viewport] :
+  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[viewports.keys.find(key => hasOwnProperty(prop, key))];
   return value === undefined ? defaultValue : value;
 };
 
@@ -45,10 +38,8 @@ const resolveResponsiveProp = (prop, viewport, defaultValue) => {
  * @param {*} [defaultValue] - default value to provide if no matches found for the current viewport
  * @returns {*}
  */
-exports.resolveResponsiveProp = resolveResponsiveProp;
 const useResponsiveProp = (prop, defaultValue) => {
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = useViewport();
   return resolveResponsiveProp(prop, viewport, defaultValue);
 };
-var _default = useResponsiveProp;
-exports.default = _default;
+export default useResponsiveProp;

package/lib/utils/useSafeLayoutEffect.js

@@ -1,11 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _HydrationContext = require("../BaseProvider/HydrationContext");
+import { useLayoutEffect, useCallback } from 'react';
+import { useHydrationContext } from '../BaseProvider/HydrationContext';
 const isSSR = typeof window === 'undefined';
 const noop = () => {};
 
@@ -18,12 +12,12 @@ const noop = () => {};
 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 = (0, _HydrationContext.useHydrationContext)();
+  const isHydrating = useHydrationContext();
 
   // Callback updates and effect re-runs when deps array content changes, like useEffect.
   /* eslint-disable-next-line react-hooks/exhaustive-deps */
-  const callback = (0, _react.useCallback)(fn, deps);
-  (0, _react.useLayoutEffect)(() => {
+  const callback = useCallback(fn, deps);
+  useLayoutEffect(() => {
     // Do nothing before hydrating server-generated content, like useEffect. When hydration completes,
     // useHydrationContext provides false, re-rendering this hook and re-running the effect.
     if (isHydrating) return noop;
@@ -31,5 +25,4 @@ const useSafeLayoutEffect = isSSR ? noop // avoid React's fussy warnings by ensu
     return callback();
   }, [isHydrating, callback]);
 };
-var _default = useSafeLayoutEffect;
-exports.default = _default;
+export default useSafeLayoutEffect;

package/lib/utils/useScrollBlocking.js

@@ -1,22 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
+import { useCallback, useEffect, useRef, useState } from 'react';
 const addScrollBlocking = (preventScrolling, stopPropagation, ref) => {
   var _ref$current;
   document.body.addEventListener('touchmove', preventScrolling, {
     passive: false
   });
-  (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.addEventListener('touchmove', stopPropagation);
+  (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.addEventListener('touchmove', stopPropagation);
   document.body.style.overflow = 'hidden';
 };
 const removeScrollBlocking = (preventScrolling, stopPropagation, ref) => {
   var _ref$current2;
   document.body.removeEventListener('touchmove', preventScrolling);
-  (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.removeEventListener('touchmove', stopPropagation);
+  (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || _ref$current2.removeEventListener('touchmove', stopPropagation);
   document.body.style.overflow = 'inherit';
 };
 
@@ -32,16 +26,16 @@ const removeScrollBlocking = (preventScrolling, stopPropagation, ref) => {
 const useScrollBlocking = conditionProps => {
   // useRef refs are null on first render and don't trigger a re-render when they get their
   // element. Force re-run when ref mounts to ensure the stopPropagation listener is attached.
-  const ref = (0, _react.useRef)();
-  const [refIsMounted, setRefIsMounted] = (0, _react.useState)(false);
-  const callbackRef = (0, _react.useCallback)(element => {
+  const ref = useRef();
+  const [refIsMounted, setRefIsMounted] = useState(false);
+  const callbackRef = useCallback(element => {
     ref.current = element;
     setRefIsMounted(Boolean(element));
   }, []);
   const conditionsMet = Array.isArray(conditionProps) ? conditionProps.every(condition => condition) : Boolean(conditionProps);
-  const preventScrolling = (0, _react.useCallback)(event => event.preventDefault(), []);
-  const stopPropagation = (0, _react.useCallback)(event => event.stopPropagation(), []);
-  (0, _react.useEffect)(() => {
+  const preventScrolling = useCallback(event => event.preventDefault(), []);
+  const stopPropagation = useCallback(event => event.stopPropagation(), []);
+  useEffect(() => {
     const cleanup = () => removeScrollBlocking(preventScrolling, stopPropagation, ref);
     if (conditionsMet) {
       addScrollBlocking(preventScrolling, stopPropagation, ref);
@@ -54,5 +48,4 @@ const useScrollBlocking = conditionProps => {
   }, [preventScrolling, conditionsMet, stopPropagation, refIsMounted]);
   return callbackRef;
 };
-var _default = useScrollBlocking;
-exports.default = _default;
+export default useScrollBlocking;

package/lib/utils/useScrollBlocking.native.js

@@ -1,9 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 // This is a no-op to emphasize that the original hook is web-only
-var _default = () => {};
-exports.default = _default;
+export default () => {};

package/lib/utils/useSpacingScale.js

@@ -1,12 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _useResponsiveProp = require("./useResponsiveProp");
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens } from '../ThemeProvider';
+import { resolveResponsiveProp } from './useResponsiveProp';
 /**
  * @typedef {import('@telus-uds/system-constants/viewports').Viewport} Viewport
  * @typedef {import('./props/spacingProps.js').SpacingValue} SpacingValue
@@ -110,21 +104,20 @@ const resolveSpacingOptions = space => {
 const useSpacingScale = spaceValue => {
   // In future, may need to consider window height as well as width, particularly for native apps,
   // e.g. to ensure designs don't look lost on large, tall, not-so-wide portrait screens.
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = useViewport();
   const {
     tokens,
     variant,
     overridden,
     subtract = 0
   } = resolveSpacingOptions(spaceValue);
-  const space = !overridden && ((spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) ?? (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport, 0));
+  const space = !overridden && ((spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) ?? resolveResponsiveProp(spaceValue, viewport, 0));
   const {
     size
-  } = (0, _ThemeProvider.useThemeTokens)('spacingScale', tokens, variant, {
+  } = useThemeTokens('spacingScale', tokens, variant, {
     space: typeof space === 'number' ? space : 0,
     viewport
   });
   return Math.max(size - subtract, 0);
 };
-var _default = useSpacingScale;
-exports.default = _default;
+export default useSpacingScale;

package/lib/utils/useUniqueId.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
+import { useState } from 'react';
 let id = 0;
 function useUniqueId() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  const [uniqueId] = (0, _react.useState)(() => {
+  const [uniqueId] = useState(() => {
     id += 1;
     return `${prefix}-${id}`;
   });
   return uniqueId;
 }
-var _default = useUniqueId;
-exports.default = _default;
+export default useUniqueId;