@telus-uds/components-base 1.66.0 → 1.67.1

package/lib-module/TextInput/TextArea.js

@@ -7,6 +7,7 @@ import { useThemeTokens } from '../ThemeProvider';
 import textInputPropTypes from './propTypes';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
+
 /**
  * Use to collect long-form information such as product feedback or support queries.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -31,7 +32,6 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, foc
  * or an indicator that the field is optional.
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
-
 const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     tokens,
@@ -39,8 +39,9 @@ const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const themeTokens = useThemeTokens('TextArea', tokens, variant);
-  const [inputHeight, setInputHeight] = useState(); // adjust the text area's height as new lines are added to the content
+  const [inputHeight, setInputHeight] = useState();
 
+  // adjust the text area's height as new lines are added to the content
   const onHeightChange = _ref2 => {
     let {
       nativeEvent: {
@@ -49,19 +50,19 @@ const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
         }
       }
     } = _ref2;
-
     // on native this is happens out of the box
     if (Platform.OS === 'web') {
       setInputHeight(height);
     }
   };
-
   const {
     supportsProps,
     ...selectedProps
   } = selectProps(rest);
-  const inputProps = { ...selectedProps,
-    variant: { ...variant,
+  const inputProps = {
+    ...selectedProps,
+    variant: {
+      ...variant,
       validation: supportsProps.validation
     },
     multiline: true,
@@ -69,7 +70,8 @@ const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
     height: inputHeight,
     tokens: themeTokens
   };
-  return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
+  return /*#__PURE__*/_jsx(InputSupports, {
+    ...supportsProps,
     children: _ref3 => {
       let {
         inputId,
@@ -85,7 +87,8 @@ const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 TextArea.displayName = 'TextArea';
-TextArea.propTypes = { ...selectedSystemPropTypes,
+TextArea.propTypes = {
+  ...selectedSystemPropTypes,
   ...textInputPropTypes,
   tokens: getTokensPropType('TextArea', 'TextInput'),
   // TODO: support both TextArea and TextInput tokens

package/lib-module/TextInput/TextInput.js

@@ -8,6 +8,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
+
 /**
  * A basic text input component. Use in forms or individually to receive user's input.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -26,7 +27,6 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, foc
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-
 const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     tokens,
@@ -38,9 +38,11 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     supportsProps,
     ...selectedProps
   } = selectProps(rest);
-  const inputProps = { ...selectedProps,
+  const inputProps = {
+    ...selectedProps,
     tokens,
-    variant: { ...variant,
+    variant: {
+      ...variant,
       validation: supportsProps.validation
     }
   };
@@ -64,9 +66,9 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 TextInput.displayName = 'TextInput';
-TextInput.propTypes = { ...selectedSystemPropTypes,
+TextInput.propTypes = {
+  ...selectedSystemPropTypes,
   ...textInputPropTypes,
-
   /**
    * A callback which if provided will get a clear button rendered and will be called whenever that button gets pressed.
    */

package/lib-module/TextInput/TextInputBase.js

@@ -13,7 +13,6 @@ import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, viewProps]);
-
 const selectInputStyles = (_ref, themeOptions, inactive, type) => {
   let {
     backgroundColor,
@@ -36,11 +35,9 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     width,
     height
   } = _ref;
-
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
-
   const textStyles = applyTextStyles({
     fontName,
     fontSize,
@@ -48,14 +45,12 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     fontWeight,
     themeOptions
   });
-
   function linesToHeight(lines) {
     const {
       lineHeight: absoluteLineHeight
     } = textStyles;
     return lines !== undefined ? lines * absoluteLineHeight + paddingTop + paddingBottom : undefined;
   }
-
   const minHeight = linesToHeight(minLines);
   const maxHeight = linesToHeight(maxLines);
   const webStyles = Platform.select({
@@ -63,9 +58,9 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
       outline: 'none',
       cursor: inactive ? 'not-allowed' : undefined,
       resize: minHeight !== maxHeight ? 'vertical' : 'none' // does nothing for an input, only needed for textarea
-
     }
   });
+
   const paddingWithIcon = iconSize + paddingRight;
   return {
     backgroundColor,
@@ -85,7 +80,6 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     ...webStyles
   };
 };
-
 const selectOuterBorderStyles = _ref2 => {
   let {
     outerBackgroundColor,
@@ -102,7 +96,6 @@ const selectOuterBorderStyles = _ref2 => {
     })
   };
 };
-
 const selectIconTokens = _ref3 => {
   let {
     iconSize,
@@ -113,7 +106,6 @@ const selectIconTokens = _ref3 => {
     color: iconColor
   };
 };
-
 const selectIconContainerStyles = (_ref4, buttonCount) => {
   let {
     buttonSize,
@@ -126,7 +118,6 @@ const selectIconContainerStyles = (_ref4, buttonCount) => {
     paddingBottom
   };
 };
-
 const selectLeftIconContainerStyles = _ref5 => {
   let {
     leftIconPaddingBottom
@@ -137,7 +128,6 @@ const selectLeftIconContainerStyles = _ref5 => {
     paddingBottom: leftIconPaddingBottom
   };
 };
-
 const selectButtonsContainerStyle = _ref6 => {
   let {
     buttonsPaddingRight
@@ -146,7 +136,6 @@ const selectButtonsContainerStyle = _ref6 => {
     paddingRight: buttonsPaddingRight
   };
 };
-
 const getIcon = function () {
   let cardNumber = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   let {
@@ -183,7 +172,6 @@ const getIcon = function () {
     testID: selectedIcon.testID
   });
 };
-
 const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
   let {
     buttons = [],
@@ -208,29 +196,23 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
   } = _ref7;
   const [isFocused, setIsFocused] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
-
   const handleFocus = event => {
     setIsFocused(true);
     if (typeof onFocus === 'function') onFocus(event);
   };
-
   const handleBlur = event => {
     setIsFocused(false);
     if (typeof onBlur === 'function') onBlur(event);
   };
-
   const [isHovered, setIsHovered] = useState(false);
-
   const handleMouseOver = event => {
     setIsHovered(true);
     if (typeof onMouseOver === 'function') onMouseOver(event);
   };
-
   const handleMouseOut = event => {
     setIsHovered(false);
     if (typeof onMouseOut === 'function') onMouseOut(event);
   };
-
   const defaultRef = useRef();
   const inputRef = ref ?? defaultRef;
   const {
@@ -260,43 +242,34 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
       element.pattern = pattern;
     }
   }, [element, pattern]);
-
   const handleChangeText = event => {
     var _event$nativeEvent, _event$target;
-
     const text = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.text) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
     let filteredText = isNumeric ? text === null || text === void 0 ? void 0 : text.replace(/[^\d]/g, '') : text;
-
     if (type === 'card' && filteredText) {
       const formattedValue = filteredText.replace(/[^a-zA-Z0-9]/g, '');
-      const regex = new RegExp(`([a-zA-Z0-9]{4})(?=[a-zA-Z0-9])`, 'g'); // Add a space every 4 digits starting from the 5th position
-
+      const regex = new RegExp(`([a-zA-Z0-9]{4})(?=[a-zA-Z0-9])`, 'g');
+      // Add a space every 4 digits starting from the 5th position
       filteredText = formattedValue.replace(regex, '$1 ').trim();
     }
-
     setValue(filteredText, event);
     if (typeof onChangeText === 'function') onChangeText(filteredText, event);
   };
-
   const states = {
     focus: isFocused,
     hover: isHovered,
     inactive
   };
   const themeTokens = useThemeTokens('TextInput', tokens, variant, states);
-
   const handleClear = event => {
     var _inputRef$current;
-
     onClear === null || onClear === void 0 ? void 0 : onClear(event);
     resetValue(event);
     inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   };
-
   const handleShowOrHide = () => {
     if (!variant.inactive) setShowPassword(!showPassword);
   };
-
   const {
     buttonsGap,
     clearButtonIcon: ClearButtonIcon,
@@ -314,7 +287,6 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
     copy
   });
   const textInputButtons = buttons;
-
   if (onClear && isDirty) {
     textInputButtons === null || textInputButtons === void 0 ? void 0 : textInputButtons.unshift( /*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
@@ -325,7 +297,6 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
       }
     }, "clear"));
   }
-
   if (isPassword) {
     textInputButtons === null || textInputButtons === void 0 ? void 0 : textInputButtons.unshift( /*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: !showPassword ? getCopy('hidePasswordAccessibilityLabel') : getCopy('showPasswordAccessibilityLabel'),
@@ -343,8 +314,8 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
       }
     }, !showPassword ? 'hide' : 'show'));
   }
-
-  const inputProps = { ...selectProps(rest),
+  const inputProps = {
+    ...selectProps(rest),
     editable: !inactive,
     onFocus: handleFocus,
     onBlur: handleBlur,
@@ -358,7 +329,8 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
   const {
     themeOptions
   } = useTheme();
-  const nativeInputStyle = selectInputStyles({ ...themeTokens,
+  const nativeInputStyle = selectInputStyles({
+    ...themeTokens,
     height
   }, themeOptions, inactive, type);
   return /*#__PURE__*/_jsxs(View, {
@@ -382,10 +354,12 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
     }), IconComponent && /*#__PURE__*/_jsx(View, {
       pointerEvents: "none" // avoid hijacking input press events
       ,
-      style: [staticStyles.rightIconContainer, selectIconContainerStyles({ ...themeTokens,
+      style: [staticStyles.rightIconContainer, selectIconContainerStyles({
+        ...themeTokens,
         buttonsGapSize
       }, buttons === null || buttons === void 0 ? void 0 : buttons.length)],
-      children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconTokens(themeTokens)
+      children: /*#__PURE__*/_jsx(IconComponent, {
+        ...selectIconTokens(themeTokens)
       })
     }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && /*#__PURE__*/_jsx(View, {
       style: [staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)],
@@ -398,9 +372,9 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref7, ref) => {
   });
 });
 TextInputBase.displayName = 'TextInputBase';
-TextInputBase.propTypes = { ...selectedSystemPropTypes,
+TextInputBase.propTypes = {
+  ...selectedSystemPropTypes,
   buttons: PropTypes.arrayOf(PropTypes.node),
-
   /**
    * Select English or French copy for the accessible labels.
    * You may also pass in a custom dictionary object.

package/lib-module/TextInput/propTypes.js

@@ -1,34 +1,30 @@
-import PropTypes from 'prop-types'; // These are prop types specific to UDS TextInput; see also ../utils/props/textInputProps
-// for generic React Native props and HTML input attrs that are passed through.
+import PropTypes from 'prop-types';
 
+// These are prop types specific to UDS TextInput; see also ../utils/props/textInputProps
+// for generic React Native props and HTML input attrs that are passed through.
 const textInputPropTypes = {
   /**
    * If the input's state is to be controlled by a parent component, use this prop
    * together with the `onChange` to pass down and update the lifted state.
    */
   value: PropTypes.string,
-
   /**
    * Use this to set the type of the input. Defaults to `text`.
    */
   type: PropTypes.string,
-
   /**
    * Use this to set the initial value of an uncontrolled input.
    * Updating `initialValue` will **not** update the actual value.
    */
   initialValue: PropTypes.string,
-
   /**
    * Disables all user interactions with the input.
    */
   inactive: PropTypes.bool,
-
   /**
    * Makes it impossible to change the input's value.
    */
   readOnly: PropTypes.bool,
-
   /**
    * Use to react upon input's value changes. Required when the `value` prop is set.
    * Will receive the input's value as an argument.

package/lib-module/ThemeProvider/ThemeProvider.js

@@ -5,9 +5,10 @@ import responsiveProps from '../utils/props/responsiveProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const uninitialisedError = new Error('Theme context used outside of ThemeProvider');
 export const ThemeContext = /*#__PURE__*/createContext(uninitialisedError);
-export const ThemeSetterContext = /*#__PURE__*/createContext(uninitialisedError); // These options default to `true` in v1.x to match legacy defaults and avoid breaking changes.
-// This should change in future major releases to become "opt-in" legacy support.
+export const ThemeSetterContext = /*#__PURE__*/createContext(uninitialisedError);
 
+// These options default to `true` in v1.x to match legacy defaults and avoid breaking changes.
+// This should change in future major releases to become "opt-in" legacy support.
 const defaultThemeOptions = {
   // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
   forceAbsoluteFontSizing: true,
@@ -16,7 +17,6 @@ const defaultThemeOptions = {
   // TODO: switch `enableHelmetSSR` to be false by default in the next major version
   enableHelmetSSR: true
 };
-
 const ThemeProvider = _ref => {
   let {
     children,
@@ -29,24 +29,26 @@ const ThemeProvider = _ref => {
       setTheme(defaultTheme);
     }
   }, [theme.metadata.name, defaultTheme]);
-  const appliedThemeOptions = { ...defaultThemeOptions,
+  const appliedThemeOptions = {
+    ...defaultThemeOptions,
     ...themeOptions
-  }; // Validate the theme tokens version on every render.
+  };
+
+  // Validate the theme tokens version on every render.
   // This will intentionally break the application when attempting to use an invalid theme.
   // This will surface an incompatibility quickly rather than allowing the potential for strange bugs due to missing or incompatible tokens.
-
   validateThemeTokensVersion(theme);
   return /*#__PURE__*/_jsx(ThemeSetterContext.Provider, {
     value: setTheme,
     children: /*#__PURE__*/_jsx(ThemeContext.Provider, {
-      value: { ...theme,
+      value: {
+        ...theme,
         themeOptions: appliedThemeOptions
       },
       children: children
     })
   });
 };
-
 ThemeProvider.propTypes = {
   children: PropTypes.node.isRequired,
   defaultTheme: PropTypes.shape({
@@ -55,7 +57,6 @@ ThemeProvider.propTypes = {
       name: PropTypes.string.isRequired
     }).isRequired
   }).isRequired,
-
   /**
    * An object containing options allowing to customize the theming experience:
    *

package/lib-module/ThemeProvider/useSetTheme.js

@@ -1,18 +1,18 @@
 import { useCallback, useContext } from 'react';
 import { ThemeSetterContext } from './ThemeProvider';
-
 const useSetTheme = () => {
   // Replace current theme with provided object
-  const setTheme = useContext(ThemeSetterContext); // Fail fast if dev uses useSetTheme outside of ThemeProvider
-
+  const setTheme = useContext(ThemeSetterContext);
+  // Fail fast if dev uses useSetTheme outside of ThemeProvider
   if (setTheme instanceof Error) {
     throw setTheme;
-  } // Merge provided object into current theme
-
+  }
 
+  // Merge provided object into current theme
   const editTheme = useCallback(newTheme => setTheme(function () {
     let oldTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return { ...oldTheme,
+    return {
+      ...oldTheme,
       ...newTheme
     };
   }), [setTheme]);
@@ -21,5 +21,4 @@ const useSetTheme = () => {
     editTheme
   };
 };
-
 export default useSetTheme;

package/lib-module/ThemeProvider/useTheme.js

@@ -1,14 +1,11 @@
 import { useContext } from 'react';
 import { ThemeContext } from './ThemeProvider';
-
 const useTheme = () => {
-  const theme = useContext(ThemeContext); // Fail fast if dev uses useTheme outside of ThemeProvider
-
+  const theme = useContext(ThemeContext);
+  // Fail fast if dev uses useTheme outside of ThemeProvider
   if (theme instanceof Error) {
     throw theme;
   }
-
   return theme;
 };
-
 export default useTheme;

package/lib-module/ThemeProvider/useThemeTokens.js

@@ -33,7 +33,6 @@ import { getComponentTheme, getThemeTokens, resolveThemeTokens, mergeAppearances
  * @param {AppearanceSet} [states] - optional object containing current theme appearances dictated by user action or context
  * @returns {TokensSet} - the currently-applicable resolved set of theme tokens to apply
  */
-
 export const useThemeTokens = function (componentName) {
   let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -43,6 +42,7 @@ export const useThemeTokens = function (componentName) {
   const themeTokens = getThemeTokens(componentTheme, tokens, variants, states);
   return themeTokens;
 };
+
 /**
  * Returns a memoised tokens getter function that gets tokens similar to calling useThemeTokens.
  * Scenarios where `useThemeTokensCallback` should be used instead of `useThemeTokens` include:
@@ -95,7 +95,6 @@ export const useThemeTokens = function (componentName) {
  *      tokenOverrides in rare cases where tokens overrides are also generated outside hook scope,
  *      e.g. if one theme tokens callback needs to pass certain token overrides to another.
  */
-
 export const useThemeTokensCallback = function (componentName) {
   let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

package/lib-module/ThemeProvider/utils/styles.js

@@ -3,8 +3,9 @@
  * don't map directly to cross-platform design token values.
  */
 import Platform from "react-native-web/dist/exports/Platform";
-import { fontBasePixels } from '@telus-uds/system-constants'; // Make design tokens fit React Native's text styles' specific requirements and quirks
+import { fontBasePixels } from '@telus-uds/system-constants';
 
+// Make design tokens fit React Native's text styles' specific requirements and quirks
 export function applyTextStyles(_ref) {
   let {
     fontColor,
@@ -21,27 +22,24 @@ export function applyTextStyles(_ref) {
     },
     ...rest
   } = _ref;
-  const styles = { ...rest
+  const styles = {
+    ...rest
   };
   const {
     forceAbsoluteFontSizing
   } = themeOptions;
-
   if (fontSize) {
     // If relative font sizes are needed, catch and calculate them here
     styles.fontSize = Platform.OS === 'web' && !forceAbsoluteFontSizing ? `${fontSize / fontBasePixels}rem` : fontSize;
   }
-
   if (typeof lineHeight === 'number') {
     // React Native expects absolute line heights but multipliers are better as design tokens
     styles.lineHeight = lineHeight * (fontSize || fontBasePixels);
   }
-
   if (typeof letterSpacing === 'number' && letterSpacing) {
     // Same as for line heights - React Native expects absolute letter spacing value
     styles.letterSpacing = letterSpacing * (fontSize || fontBasePixels);
   }
-
   if (fontName) {
     // Don't set undefined font families. May need some validation here that the font is available.
     // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
@@ -51,16 +49,17 @@ export function applyTextStyles(_ref) {
     // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
     styles.fontWeight = Platform.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight;
   }
-
   if (fontColor) {
     styles.color = fontColor;
-  } // TODO: look into calculating typographic spacing with PixelRatio.getFontScale()
+  }
+
+  // TODO: look into calculating typographic spacing with PixelRatio.getFontScale()
   // Do while implementing advanced typography e.g. paragraph etc
   // https://github.com/telus/universal-design-system/issues/89
 
-
   return styles;
 }
+
 /**
  * React Native's in-built shadow support is limited. Take an object describing an ideal shadow and
  * return a platform-appropriate implementation that gets close to the described effect.
@@ -74,7 +73,6 @@ export function applyTextStyles(_ref) {
  * @param {number}  shadowToken.spread
  * @return {object}
  */
-
 export function applyShadowToken(shadowToken) {
   if (!shadowToken) return {};
   const applyShadow = Platform.select({
@@ -84,7 +82,6 @@ export function applyShadowToken(shadowToken) {
   });
   return applyShadow();
 }
-
 function applyWebShadow(_ref2) {
   let {
     inset,
@@ -100,7 +97,6 @@ function applyWebShadow(_ref2) {
   };
   return boxShadow;
 }
-
 function applyAndroidShadow(shadowToken) {
   const {
     color,
@@ -108,23 +104,20 @@ function applyAndroidShadow(shadowToken) {
     spread,
     offsetY,
     offsetX
-  } = shadowToken; // Android shadows are very limited and workarounds are hacky. Use the built-in `elevation` API unless
+  } = shadowToken;
+  // Android shadows are very limited and workarounds are hacky. Use the built-in `elevation` API unless
   // shadow design is radically different to a simple top-down shadow (e.g. horizontal, upward, or inset)
-
   if (!inset && offsetY >= 0 && offsetY >= offsetX) {
     return {
       // Can't match other platforms, but can give longer shadows to elements designed for longer shadows
       elevation: spread + offsetY,
       shadowColor: color // Only applies on Android >= 9 and React Native >= 0.64.0
-
     };
-  } // TODO: maybe use a library or workaround to increase capabilities.
+  }
+  // TODO: maybe use a library or workaround to increase capabilities.
   // https://github.com/telus/universal-design-system/issues/535
-
-
   return {};
 }
-
 function applyIosShadow(_ref3) {
   let {
     inset,
@@ -138,15 +131,15 @@ function applyIosShadow(_ref3) {
   // TODO: maybe use a library or workaround for inset shadows. This is a sizable task and would
   // involve changing component implementations to use a custom view, can't be done with styles alone.
   // https://github.com/telus/universal-design-system/issues/535
-  if (inset) return {}; // React Native iOS doesn't support spread. Where there's an offset, can approximate positive spread by
+  if (inset) return {};
+
+  // React Native iOS doesn't support spread. Where there's an offset, can approximate positive spread by
   // increasing the (positive or negative) offset by the spread. This makes the shadow reach the point it
   // would if spread was supported (with a side effect that its start is further "under" the element).
-
   const nudgeBySpread = offset => {
     if (!offset || spread <= 0) return 0;
     return offset > 0 ? spread : spread * -1;
   };
-
   return {
     shadowColor: color,
     shadowOffset: {
@@ -155,7 +148,6 @@ function applyIosShadow(_ref3) {
     },
     shadowRadius: blur,
     shadowOpacity: 1 // opacity is applied via RGBA in the `color` token
-
   };
 }
 
@@ -171,20 +163,16 @@ export function verticalAlignRow(verticalAlign) {
     alignItems: verticalAlignToFlexRowAlign[verticalAlign]
   };
 }
-
 const calculateBorderRadius = (borderRadius, outerBorderGap, outerBorderWidth) => {
   if (borderRadius) {
     return borderRadius + outerBorderGap + outerBorderWidth;
   }
-
   return null;
 };
 /**
  * Use on an outer container to create an outer border with an optional gap around it
  * that matches the border radius of any inner border.
  */
-
-
 export const applyOuterBorder = _ref4 => {
   let {
     outerBorderColor,