@telus-uds/components-base 2.0.0 → 2.0.1

package/lib/utils/transformGradient.js

@@ -0,0 +1,15 @@
+/**
+ * Transforms a gradient object into a CSS gradient string.
+ *
+ * @param {Object} gradient - The gradient object to transform.
+ * @param {string} gradient.type - The type of gradient (linear or radial).
+ * @param {number} gradient.angle - The angle of the linear gradient in degrees.
+ * @param {Array} gradient.stops - An array of gradient stops.
+ * @param {string} gradient.stops[].color - The color of the gradient stop.
+ * @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
+};

package/lib/utils/useCopy.js

@@ -1,10 +1,5 @@
-"use strict";
+export const DEFAULT_COPY = 'en';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.DEFAULT_COPY = void 0;
-const DEFAULT_COPY = 'en';
 /**
  * Extract translations from a keyed dictionary for a given language.
  * Returns a getter.
@@ -32,22 +27,16 @@ const DEFAULT_COPY = 'en';
  * @param {'en'|'fr'|object} copy - language
  * @return {function(string): string}
  */
-
-exports.DEFAULT_COPY = DEFAULT_COPY;
-
 function useCopy(_ref) {
   let {
     dictionary,
     copy = DEFAULT_COPY
   } = _ref;
-
   if (typeof copy === 'string') {
     return key => key ? dictionary[copy][key] : dictionary[copy];
-  } // support overriding the entire copy dictionary with an object for a single language
-
+  }
 
+  // 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,17 +1,9 @@
-"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);
 };
+
 /**
  * @typedef {import('react').SyntheticEvent} SyntheticEvent
  */
@@ -27,27 +19,23 @@ const doAction = (action, event) => {
  * @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) {
   let isReady = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  const [isDone, setIsDone] = (0, _react.useState)(false); // Do the action just once when ready after component mount, from hash on page load
-
+  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);
     }
-  }, [isToDo, action]); // Bind the action for each hash change; do re-bind if the function changes.
+  }, [isToDo, action]);
 
-  (0, _react.useEffect)(() => {
+  // Bind the action for each hash change; do re-bind if the function changes.
+  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,15 +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

@@ -0,0 +1,214 @@
+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);
+  const tooWideBy = Math.max(0, otherEdgeOverflow - offset);
+  const adjusted = {
+    offset: Math.max(0, offset - otherEdgeOverflow)
+  };
+  if (tooWideBy) adjusted.width = Math.max(0, sourceWidth - tooWideBy);
+  return adjusted;
+};
+const getPosition = _ref => {
+  let {
+    edge,
+    fromEdge,
+    sourceSize
+  } = _ref;
+  switch (edge) {
+    case 'near':
+      return fromEdge;
+    case 'mid':
+      return fromEdge + sourceSize / 2;
+    case 'far':
+      return fromEdge + sourceSize;
+    default:
+      return 0;
+  }
+};
+const getEdgeType = (align, alignSide) => {
+  const alignTo = align[alignSide];
+  const edge = ['center', 'middle'].includes(alignTo) && 'mid' || (alignSide === alignTo ? 'near' : 'far');
+  return edge;
+};
+
+/**
+ * Based on UDS's private getTooltipPosition but generalised.
+ *
+ * Used for absolute positioning of the tooltip. Since the tooltip is always centered relatively
+ * to the source (button) and we have a limited set of positions, an easy and consistent way
+ * of positioning it is to check all of the possible positions and pick one that will be rendered
+ * within the window bounds. This way we can also rely on the tooltip being actually rendered
+ * before it is shown, which makes it account for the width being limiting in styles, custom font
+ * rendering, etc.
+ */
+function getOverlaidPosition(_ref2) {
+  let {
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets = {},
+    align
+  } = _ref2;
+  // Web-only: this will be difficult to mimic on native because there's no global scroll position.
+  // TODO: wire something in e.g. a scroll ref accessible from a provider included in Allium provider
+  // that can be passed to the appropriate ScrollView?
+  const {
+    scrollX = 0,
+    scrollY = 0
+  } = typeof window === 'object' ? window : {};
+
+  // Will have top, bottom, left and/or right offsets depending on `align`
+  const positioning = {};
+  if (align.top) positioning.top = getPosition({
+    edge: getEdgeType(align, 'top'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0),
+    sourceSize: sourceLayout.height
+  });
+  if (align.middle) positioning.top = getPosition({
+    edge: getEdgeType(align, 'middle'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0) - targetDimensions.height / 2,
+    sourceSize: sourceLayout.height
+  });
+  if (align.bottom) positioning.bottom = getPosition({
+    edge: getEdgeType(align, 'bottom'),
+    fromEdge: windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - (offsets.vertical ?? 0)),
+    sourceSize: sourceLayout.height
+  });
+  if (align.left) positioning.left = getPosition({
+    edge: getEdgeType(align, 'left'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0),
+    sourceSize: sourceLayout.width
+  });
+  if (align.center) positioning.left = getPosition({
+    edge: getEdgeType(align, 'center'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0) - targetDimensions.width / 2,
+    sourceSize: sourceLayout.width
+  });
+  if (align.right) positioning.right = getPosition({
+    edge: getEdgeType(align, 'right'),
+    fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - (offsets.horizontal ?? 0)),
+    sourceSize: sourceLayout.width
+  });
+  if (!(align.left && align.right)) {
+    // Check if the position and/or width need adjusting to fit on the screen
+    const side = align.right ? 'right' : 'left';
+    const adjusted = adjustHorizontalToFit(positioning[side], windowDimensions.width, sourceLayout.width);
+    if (typeof adjusted.width === 'number') positioning.width = adjusted.width;
+    if (typeof adjusted.offset === 'number') {
+      positioning[side] = adjusted.offset;
+    }
+  }
+  return positioning;
+}
+
+/**
+ * Positions an element in a modal or portal so that it appears tooltip-like below the
+ * target element.
+ *
+ * @TODO - add support for positioning other than 'below' like UDS's tooltip (this is not
+ * 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 => {
+  let {
+    isShown = false,
+    offsets,
+    // By default, align the overlaid target's `top` to the bottom of the source, and center horizontally.
+    align = {
+      center: 'center',
+      top: 'bottom'
+    }
+  } = _ref3;
+  // Element in main document flow that the targetRef element is positioned around
+  const sourceRef = useRef(null);
+  const [sourceLayout, setSourceLayout] = useState(null);
+
+  // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
+  const targetRef = useRef(null);
+  const [targetDimensions, setTargetDimensions] = useState(null);
+  const [windowDimensions, setWindowDimensions] = useState(null);
+  const onTargetLayout = useCallback(_ref4 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
+      }
+    } = _ref4;
+    // NOTE: UDS's Tooltip logic injects some additional width to allow for antialiasing etc of text,
+    // avoiding adding unnecessary line breaks to text that is slightly wider than it thinks it is.
+    // That is probably something specific to text tooltips that doesn't belong in a generic hook.
+    setTargetDimensions(previousDimensions => {
+      // Re-render on first non-zero width / height: avoid infinite loops on changes, or mispositioning
+      // if user scrolls while a slidedown animation is changing the height and recalculating position.
+      if (!previousDimensions && width && height) {
+        return {
+          width,
+          height
+        };
+      }
+      return previousDimensions;
+    });
+  }, []);
+  const readyToShow = Boolean(isShown && sourceRef.current);
+  useEffect(() => {
+    const handleDimensionsChange = _ref5 => {
+      var _sourceRef$current;
+      let {
+        window
+      } = _ref5;
+      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,
+          y,
+          width,
+          height
+        });
+      });
+    };
+    let subscription;
+    const unsubscribe = () => {
+      var _subscription;
+      if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
+        // React Native >=0.65.0
+        subscription.remove();
+      } else if (typeof Dimensions.remove === 'function') {
+        // React Native <0.65.0
+        Dimensions.remove('change', handleDimensionsChange);
+      }
+      setSourceLayout(null);
+      setTargetDimensions(null);
+    };
+    if (readyToShow) {
+      subscription = Dimensions.addEventListener('change', handleDimensionsChange);
+      handleDimensionsChange({
+        window: Dimensions.get('window')
+      });
+    } else {
+      unsubscribe();
+    }
+    return unsubscribe;
+  }, [readyToShow]);
+  const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
+  const overlaidPosition = isReady ? getOverlaidPosition({
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets,
+    align
+  }) : {};
+  return {
+    overlaidPosition,
+    sourceRef,
+    targetRef,
+    onTargetLayout,
+    isReady
+  };
+};
+export default useOverlaidPosition;

package/lib/utils/useResponsiveProp.js

@@ -1,19 +1,8 @@
-"use strict";
+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));
 
-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));
 /**
  * Resolves a prop which may be a responsive object with keys for viewports.
  *
@@ -24,16 +13,17 @@ 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) ? // 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))];
+  const value = viewports.keys.includes(viewport) ?
+  // If there's a current viewport, return the closest match at or below it
+  viewports.inherit(prop)[viewport] :
+  // If no current viewport is available, default to smallest viewport
+  prop[viewports.keys.find(key => hasOwnProperty(prop, key))];
   return value === undefined ? defaultValue : value;
 };
+
 /**
  * Takes any value and, if that value is a responsive prop (an object with one or more
  * keys matching system viewport names), returns the value corresponding to the largest
@@ -48,14 +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,40 +1,28 @@
-"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 = () => {};
+
 /**
  * useSafeLayoutEffect is a alternative to useLayoutEffect that avoids SSR hydration problems:
  *  - In a client-side render, it uses useLayoutEffect to avoid flashing the pre-render UI to the user.
  *  - 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
 : function (fn) {
   let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  const isHydrating = (0, _HydrationContext.useHydrationContext)(); // Callback updates and effect re-runs when deps array content changes, like useEffect.
+  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; // If there's no hydration in progress, behave like useLayoutEffect.
-
+    if (isHydrating) return noop;
+    // If there's no hydration in progress, behave like useLayoutEffect.
     return callback();
   }, [isHydrating, callback]);
 };
-var _default = useSafeLayoutEffect;
-exports.default = _default;
+export default useSafeLayoutEffect;

package/lib/utils/useScrollBlocking.js

@@ -1,29 +1,19 @@
-"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';
 };
+
 /**
  * Disables scrolling when passed `true` or an array where all items are `true`.
  *
@@ -33,34 +23,29 @@ const removeScrollBlocking = (preventScrolling, stopPropagation, ref) => {
  * @param {boolean | boolean[]} conditionProps
  * @returns
  */
-
-
 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);
     } else {
       cleanup();
     }
-
-    return cleanup; // preventScrolling and stopPropagation are stable callbacks with no deps, so this
+    return cleanup;
+    // preventScrolling and stopPropagation are stable callbacks with no deps, so this
     // will re-run when conditionsMet or refIsMounted flip between true and false.
   }, [preventScrolling, conditionsMet, stopPropagation, refIsMounted]);
   return callbackRef;
 };
-
-var _default = useScrollBlocking;
-exports.default = _default;
+export default useScrollBlocking;

package/lib/utils/useScrollBlocking.native.js

@@ -1,11 +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,16 +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
@@ -18,6 +8,7 @@ var _useResponsiveProp = require("./useResponsiveProp");
  * @typedef {import('./props/spacingProps.js').SpacingObject} SpacingObject
  * @typedef {import('./props/spacingProps.js').SpacingOptions} SpacingOptions
  */
+
 const resolveSpacingOptions = space => {
   if (!(space !== null && space !== void 0 && space.options)) return {};
   const {
@@ -25,7 +16,9 @@ const resolveSpacingOptions = space => {
     variant,
     subtract = 0
   } = space.options;
-  const overridden = typeof size === 'number'; // Might need an option that adapts the size value by current user's system font scale, so that
+  const overridden = typeof size === 'number';
+
+  // Might need an option that adapts the size value by current user's system font scale, so that
   // meaningful spacing between items doesn't disappear on the highest a11y font scale settings.
   // https://github.com/telus/universal-design-system/issues/583
 
@@ -38,6 +31,7 @@ const resolveSpacingOptions = space => {
     subtract
   };
 };
+
 /**
  * Pass a {@link SpacingValue}, which is one of:
  *
@@ -107,29 +101,23 @@ const resolveSpacingOptions = space => {
  * @param {SpacingValue} [spaceValue] - a {@link SpacingIndex} number, or a {@link SpacingObject}
  * @returns {number}
  */
-
-
 const useSpacingScale = spaceValue => {
-  var _spaceValue$space;
-
   // 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$space = spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) !== null && _spaceValue$space !== 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,22 +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 "".concat(prefix, "-").concat(id);
+    return `${prefix}-${id}`;
   });
   return uniqueId;
 }
-
-var _default = useUniqueId;
-exports.default = _default;
+export default useUniqueId;