@telus-uds/components-base 1.66.0 → 1.67.1

package/lib/utils/props/textProps.js

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 // These are the props accepted specifically on React Native (Web) `Text` elements.
 // They are generally concerned with the behaviour of multiline text.
 const crossPlatform = {
@@ -21,17 +16,16 @@ const crossPlatform = {
    * On native, ellipsis behaviour may be changed with `ellipsizeMode` prop.
    */
   numberOfLines: _propTypes.default.number,
-
   /**
    * Default is true on web and false on native
    */
   selectable: _propTypes.default.bool
 };
+
 /**
  * See React Native docs for latest details on these.
  * https://reactnative.dev/docs/text
  */
-
 const nativeOnly = {
   ellipsizeMode: _propTypes.default.string,
   maxFontSizeMultiplier: _propTypes.default.number,
@@ -40,10 +34,10 @@ const nativeOnly = {
   suppressHighlighting: _propTypes.default.bool,
   textBreakStrategy: _propTypes.default.string
 };
+
 /**
  * These set HTML attributes of the same name.
  */
-
 const webOnly = {
   dir: _propTypes.default.oneOf(['auto', 'ltr', 'rtl']),
   lang: _propTypes.default.string
@@ -53,16 +47,17 @@ var _default = {
    * Set of prop types specific to React Native and React Native Web `Text`,
    * which largely revolve around the behaviour of multiline non-pressable text.
    */
-  types: { ...crossPlatform,
+  types: {
+    ...crossPlatform,
     ...webOnly,
     ...nativeOnly
   },
-
   /**
    * 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)({ ...crossPlatform,
+  select: (0, _getPropSelector.default)({
+    ...crossPlatform,
     ..._Platform.default.select({
       web: webOnly,
       default: nativeOnly

package/lib/utils/props/tokens.js

@@ -4,29 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectTokens = exports.getTokensSetPropType = exports.getTokensPropType = exports.getTokenNames = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _systemThemeTokens = require("@telus-uds/system-theme-tokens");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 // Tokens can be primitive values (e.g. `'rgba(0,0,0,0'`, `12`), or objects of such values,
 // such as tokens that describe shadow (e.g. shadow: { inset: true, color: 'rgba(...)' ... }),
 // or components (e.g. Icon tokens)
 const tokenValue = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool, _propTypes.default.elementType]);
-
 const tokenValueType = _propTypes.default.oneOfType([tokenValue, _propTypes.default.objectOf(tokenValue)]);
-
 const getTokenNames = componentName => {
   const componentTokenSchema = _systemThemeTokens.components[componentName];
-
   if (!componentTokenSchema) {
     throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`);
   }
-
   return Object.keys(componentTokenSchema);
 };
+
 /**
  * Returns the subset of a set of tokens that may be accepted by the `tokens` prop of a named component
  * or by a provided array of tokens. A prefix may be provided, for example:
@@ -56,28 +49,26 @@ const getTokenNames = componentName => {
  * @param {string} [prefix] - if provided, matches keys in the source object with this as the first camelCase item
  * @returns {object} - subset of theme tokens
  */
-
-
 exports.getTokenNames = getTokenNames;
-
 const selectTokens = (specifier, tokens, prefix) => {
   const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier;
   const filteredTokens = tokenNames.reduce((validTokens, key) => {
     const prefixedKey = prefix ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
     const token = tokens[prefixedKey];
-    return token !== undefined ? { ...validTokens,
+    return token !== undefined ? {
+      ...validTokens,
       [key]: token
     } : validTokens;
   }, {});
   return filteredTokens;
 };
+
 /**
  * @typedef {string|number|boolean|{[key: string]:string|number|boolean}} TokenValue
  * @typedef {{[key: string]: TokenValue}} TokensSet
  * @typedef {(AppearanceSet) => TokensSet} TokensGetter
  * @typedef {TokensSet|TokensGetter} TokensProp
  */
-
 /**
  * 'tokens' is an optional object prop on all themable components. Its keys must match the
  * token keys in the component's theme schema.
@@ -99,20 +90,15 @@ const selectTokens = (specifier, tokens, prefix) => {
  *   tokens: getTokensPropType('Component1', 'Component2')
  * }
  */
-
-
 exports.selectTokens = selectTokens;
-
 const getTokensPropType = function () {
   for (var _len = arguments.length, componentsNames = new Array(_len), _key = 0; _key < _len; _key++) {
     componentsNames[_key] = arguments[_key];
   }
-
   return (props, propName, componentName) => {
     _propTypes.default.checkPropTypes({
       [propName]: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func])
     }, props, propName, componentName);
-
     if (typeof props[propName] !== 'function') {
       _propTypes.default.checkPropTypes({
         [propName]: _propTypes.default.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
@@ -120,6 +106,7 @@ const getTokensPropType = function () {
     }
   };
 };
+
 /**
  * Get a proptypes validator for a set of tokens that is not based on a component in the theme schema.
  *
@@ -134,26 +121,20 @@ const getTokensPropType = function () {
  * @param {boolean} [options.allowFunction] - if true, allows functions as well as tokens objects
  * @returns
  */
-
-
 exports.getTokensPropType = getTokensPropType;
-
 const getTokensSetPropType = function (componentTokenKeys) {
   let {
     partial = false,
     allowFunction = false
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-  const tokensObjectValidator = _propTypes.default.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
+  const tokensObjectValidator = _propTypes.default.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType :
+  // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
   function (props, propName) {
     for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
       args[_key2 - 2] = arguments[_key2];
     }
-
     return props[propName] !== null && tokenValueType.isRequired(props, propName, ...args);
   }])));
-
   return allowFunction ? _propTypes.default.oneOfType([tokensObjectValidator, _propTypes.default.func]) : tokensObjectValidator;
 };
-
 exports.getTokensSetPropType = getTokensSetPropType;

package/lib/utils/props/variantProp.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
  * @typedef {AppearanceSet} VariantProp

package/lib/utils/props/viewProps.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const viewPropTypes = {
   pointerEvents: _propTypes.default.oneOf(['all', 'none', 'box-only', 'box-none']),
   onLayout: _propTypes.default.func,
@@ -24,7 +20,6 @@ var _default = {
    * that renders a single View.
    */
   types: viewPropTypes,
-
   /**
    * Filters a props object, returning only cross-platform View props that are potentially
    * relevant to any basic layout component that renders one View.

package/lib/utils/ssr.js

@@ -4,17 +4,11 @@ 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 _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /** @typedef {import('react').ComponentType} ReactComponent */
-
 /** @typedef {import('react').ReactElement} ReactElement */
 
 /**
@@ -59,10 +53,8 @@ const ssrStyles = function () {
         renderedByRNW = false,
         WrapperComponent
       } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
-      _AppRegistry.default.registerComponent(appName, () => App); // AppRegistry.getApplication renders the app in a container, and collects styles.
-
-
+      _AppRegistry.default.registerComponent(appName, () => App);
+      // AppRegistry.getApplication renders the app in a container, and collects styles.
       const {
         element,
         getStyleElement
@@ -70,34 +62,32 @@ const ssrStyles = function () {
         WrapperComponent,
         initialProps: props
       });
-
-      let renderedApp = // React Native Web's AppRegistry.getApplication assumes the app is rendered using
+      let renderedApp =
+      // React Native Web's AppRegistry.getApplication assumes the app is rendered using
       // AppRegistry.runApplication and wraps it in <AppContainer>, which wraps the entire app
       // in two outer containers resembling <View style={{ flex: 1 }} pointerEvents="box-none">.
       // So, use that IF user says AppRegistry.runApplication will do the client-side render.
-      renderedByRNW && element || // If the live app is not rendered using AppRegistry.runApplication, we need to
+      renderedByRNW && element ||
+      // 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, { ...props
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
+          ...props
         })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(App, { ...props
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
+        ...props
       });
-
       const getRNWStyle = () => getStyleElement({
         key: 'react-native-stylesheet'
       });
-
       styleGetters.push(getRNWStyle);
-
       if (typeof collectStyles === 'function') {
         renderedApp = collectStyles(renderedApp);
       }
-
       hasAppRendered = true;
       return renderedApp;
     },
-
     /**
      * Turns styles collected during renderApp into an array of React elements of
      * HTML <style> tags ready for insertion into the SSR HTML's <head>.
@@ -109,16 +99,13 @@ const ssrStyles = function () {
      */
     getStyles: function () {
       if (!hasAppRendered) throw new Error('Called getStyles before renderApp in ssrStyles');
-
       for (var _len = arguments.length, existingStyles = new Array(_len), _key = 0; _key < _len; _key++) {
         existingStyles[_key] = arguments[_key];
       }
-
       return [...existingStyles, ...styleGetters.flatMap(getter => getter())];
     }
   };
 };
-
 exports.ssrStyles = ssrStyles;
 var _default = ssrStyles;
 /**
@@ -131,20 +118,16 @@ var _default = ssrStyles;
  * @param {string} [appName]
  * @returns {ReactElement[]}
  */
-
 exports.default = _default;
-
 const getReactNativeWebSSRStyles = function (AppRoot) {
   let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
-
   _AppRegistry.default.registerComponent(appName, () => AppRoot);
-
   const {
     getStyleElement
   } = _AppRegistry.default.getApplication(appName);
-
   return [getStyleElement()];
 };
+
 /**
  * @deprecated - use ssrStyles instead
  *
@@ -156,15 +139,12 @@ const getReactNativeWebSSRStyles = function (AppRoot) {
  * @param {ReactElement[]} [existingStyles]
  * @returns {ReactElement[]}
  */
-
-
 exports.getReactNativeWebSSRStyles = getReactNativeWebSSRStyles;
-
 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
+  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/useCopy.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 +33,18 @@ 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;

package/lib/utils/useHash.js

@@ -4,14 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("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);
 };
+
 /**
  * @typedef {import('react').SyntheticEvent} SyntheticEvent
  */
@@ -27,27 +25,24 @@ 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] = (0, _react.useState)(false);
+  // Do the action just once when ready after component mount, from hash on page load
   const isToDo = isReady && !isDone;
   (0, _react.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]);
 
+  // Bind the action for each hash change; do re-bind if the function changes.
   (0, _react.useEffect)(() => {
     const handleChange = event => doAction(action, event);
-
     window.addEventListener('hashchange', handleChange);
     return () => window.removeEventListener('hashchange', handleChange);
   }, [action]);
 };
-
 var _default = useHash;
 exports.default = _default;

package/lib/utils/useHash.native.js

@@ -4,12 +4,10 @@ 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;

package/lib/utils/useOverlaidPosition.js

@@ -4,15 +4,10 @@ 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 }; }
-
 const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
   const offset = Math.max(0, initialOffset);
   const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
@@ -23,34 +18,29 @@ const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
   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.
  *
@@ -61,8 +51,6 @@ const getEdgeType = (align, alignSide) => {
  * before it is shown, which makes it account for the width being limiting in styles, custom font
  * rendering, etc.
  */
-
-
 function getOverlaidPosition(_ref2) {
   let {
     sourceLayout,
@@ -77,8 +65,9 @@ function getOverlaidPosition(_ref2) {
   const {
     scrollX = 0,
     scrollY = 0
-  } = typeof window === 'object' ? window : {}; // Will have top, bottom, left and/or right offsets depending on `align`
+  } = 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'),
@@ -110,20 +99,18 @@ function getOverlaidPosition(_ref2) {
     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.
@@ -132,8 +119,6 @@ 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 => {
   let {
     isShown = false,
@@ -146,8 +131,9 @@ 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); // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
+  const [sourceLayout, setSourceLayout] = (0, _react.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);
@@ -172,7 +158,6 @@ const useOverlaidPosition = _ref3 => {
           height
         };
       }
-
       return previousDimensions;
     });
   }, []);
@@ -180,7 +165,6 @@ const useOverlaidPosition = _ref3 => {
   (0, _react.useEffect)(() => {
     const handleDimensionsChange = _ref5 => {
       var _sourceRef$current;
-
       let {
         window
       } = _ref5;
@@ -195,12 +179,9 @@ const useOverlaidPosition = _ref3 => {
         });
       });
     };
-
     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();
@@ -208,11 +189,9 @@ const useOverlaidPosition = _ref3 => {
         // React Native <0.65.0
         _Dimensions.default.remove('change', handleDimensionsChange);
       }
-
       setSourceLayout(null);
       setTargetDimensions(null);
     };
-
     if (readyToShow) {
       subscription = _Dimensions.default.addEventListener('change', handleDimensionsChange);
       handleDimensionsChange({
@@ -221,7 +200,6 @@ const useOverlaidPosition = _ref3 => {
     } else {
       unsubscribe();
     }
-
     return unsubscribe;
   }, [readyToShow]);
   const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
@@ -240,6 +218,5 @@ const useOverlaidPosition = _ref3 => {
     isReady
   };
 };
-
 var _default = useOverlaidPosition;
 exports.default = _default;

package/lib/utils/useResponsiveProp.js

@@ -4,16 +4,12 @@ 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 +20,17 @@ const hasResponsiveProperties = objectProp => _systemConstants.viewports.keys.so
  * @param {*} [defaultValue]
  * @returns {*}
  */
-
-
 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
+  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))];
   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 +45,10 @@ 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)();
   return resolveResponsiveProp(prop, viewport, defaultValue);
 };
-
 var _default = useResponsiveProp;
 exports.default = _default;