@telus-uds/components-base 0.0.2-prerelease.1 → 0.0.2-prerelease.5

package/lib/Button/ButtonBase.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import { Pressable, Text, View, StyleSheet, Platform } from 'react-native';
 import { useThemeTokensCallback } from '../ThemeProvider';
@@ -21,6 +19,7 @@ const getOuterBorderOffset = ({
 }) => outerBorderGap + outerBorderWidth;
 
 const selectOuterContainerStyles = ({
+  alignSelf,
   opacity,
   outerBorderColor,
   outerBorderWidth,
@@ -28,6 +27,7 @@ const selectOuterContainerStyles = ({
   outerBorderRadius = 0,
   outerBackgroundColor
 }) => ({
+  alignSelf,
   padding: outerBorderGap,
   borderWidth: outerBorderWidth,
   borderColor: outerBorderColor,
@@ -39,13 +39,7 @@ const selectOuterContainerStyles = ({
 const selectOuterWidthStyles = ({
   outerBorderGap,
   outerBorderWidth,
-  width,
-  // TODO: make margin the responsibility of a parent
-  // https://github.com/telus/universal-design-system/issues/525
-  marginTop = 0,
-  marginBottom = 0,
-  marginLeft = 0,
-  marginRight = 0
+  width
 }) => {
   // The inner container's bounding box is the bounding box of the button overall
   // so this many device pixels will sit outside of the overall bounding box
@@ -54,22 +48,16 @@ const selectOuterWidthStyles = ({
     outerBorderWidth
   });
   const widthStyles = {
-    marginTop: marginTop - outerBorderOffset,
-    marginBottom: marginBottom - outerBorderOffset,
-    marginLeft: marginLeft - outerBorderOffset,
-    marginRight: marginRight - outerBorderOffset
+    margin: 0 - outerBorderOffset
   };
 
   if (!width) {
     return { ...widthStyles,
       // Wrap content, stopping a flex parent's default align-items: stretch stretching focus ring beyond content
       ...Platform.select({
+        // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
         web: {
-          width: 'fit-content'
-        },
-        // No fit-content or inline-block in RN. TODO: we might need to provide a prop to allow flex-end or center
-        native: {
-          alignSelf: 'flex-start'
+          display: 'inline-flex'
         }
       })
     };
@@ -171,7 +159,7 @@ const ButtonBase = ({
   selected = false,
   ...rest
 }) => {
-  const getTokens = useThemeTokensCallback('Button');
+  const getTokens = useThemeTokensCallback('Button', tokens, variant);
 
   const getButtonState = ({
     pressed,
@@ -185,7 +173,7 @@ const ButtonBase = ({
     selected
   });
 
-  const getTokensByPressableState = pressableState => getTokens(tokens, variant, getButtonState(pressableState));
+  const getTokensByPressableState = pressableState => getTokens(getButtonState(pressableState));
 
   const a11y = a11yProps.select(rest);
 
@@ -198,7 +186,7 @@ const ButtonBase = ({
     href,
     onPress
   });
-  return /*#__PURE__*/React.createElement(Pressable, _extends({
+  return /*#__PURE__*/React.createElement(Pressable, Object.assign({
     onPress: handlePress,
     style: getPressableStyle,
     disabled: inactive,

package/lib/Button/ButtonGroup.js

@@ -1,26 +1,13 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, Platform } from 'react-native';
+import { Platform } from 'react-native';
 import ButtonBase from './ButtonBase';
+import { StackWrap } from '../StackView';
 import { useViewport } from '../ViewportProvider';
 import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, pressProps, variantProp, getTokensPropType } from '../utils/propTypes';
+import { a11yProps, pressProps, variantProp, getTokensPropType, selectTokens } from '../utils/propTypes';
 import { useMultipleInputValues } from '../utils/input';
 
-const selectContainerStyles = ({
-  direction
-}) => ({
-  flexDirection: direction
-});
-
-const selectItemTokens = ({
-  gap
-}, index) => ({
-  marginLeft: index && gap
-});
-
 const ButtonGroup = ({
   variant,
   buttonVariant = {},
@@ -43,7 +30,11 @@ const ButtonGroup = ({
   const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, {
     viewport
   });
-  const containerStyles = selectContainerStyles(themeTokens);
+  const stackTokens = selectTokens('StackView', themeTokens);
+  const {
+    direction,
+    space
+  } = themeTokens;
   const {
     currentValues,
     toggleOneValue
@@ -59,14 +50,15 @@ const ButtonGroup = ({
     ...rest
   });
   const itemA11yRole = a11y.accessibilityRole === 'radioGroup' ? 'radio' : 'checkbox';
-  return /*#__PURE__*/React.createElement(View, _extends({
-    style: containerStyles
-  }, a11y), items.map(({
+  return /*#__PURE__*/React.createElement(StackWrap, Object.assign({}, a11y, {
+    space: space,
+    direction: direction,
+    tokens: stackTokens
+  }), items.map(({
     label,
     id = label,
     accessibilityLabel
   }, index) => {
-    const itemTokens = selectItemTokens(themeTokens, index);
     const isSelected = currentValues.includes(id); // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
 
     const pressHandlers = Object.fromEntries(Object.entries(pressProps.select(rest)).map(([key, handler]) => ({
@@ -102,10 +94,8 @@ const ButtonGroup = ({
       })
     }; // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
     // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
-    // See also: TODO: make margin the responsibility of a parent
-    // https://github.com/telus/universal-design-system/issues/525
 
-    return /*#__PURE__*/React.createElement(ButtonBase, _extends({
+    return /*#__PURE__*/React.createElement(ButtonBase, Object.assign({
       key: id
     }, pressHandlers, {
       onPress: handlePress,
@@ -113,7 +103,6 @@ const ButtonGroup = ({
         component: 'ButtonGroup',
         ...buttonVariant
       },
-      tokens: itemTokens,
       selected: isSelected,
       inactive: inactive
     }, itemA11y), label);

package/lib/Button/ButtonLink.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import ButtonBase from './ButtonBase';
 import buttonPropTypes from './propTypes';
@@ -17,7 +15,7 @@ const ButtonLink = ({
     hrefAttrs,
     rest
   } = hrefAttrsProp.bundle(props);
-  return /*#__PURE__*/React.createElement(ButtonBase, _extends({
+  return /*#__PURE__*/React.createElement(ButtonBase, Object.assign({
     accessibilityRole: accessibilityRole,
     hrefAttrs: hrefAttrs
   }, rest));

package/lib/Card/Card.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View } from 'react-native';
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
+import { getTokensPropType, variantProp } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import { a11yProps } from '../utils/propTypes'; // Ensure explicit selection of tokens
+
+const selectStyles = ({
+  backgroundColor,
+  borderColor,
+  borderRadius,
+  borderWidth,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  shadow
+}) => ({
+  backgroundColor,
+  borderColor,
+  borderRadius,
+  borderWidth,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  ...applyShadowToken(shadow)
+});
+/**
+ * A basic card component, unstyled by default.
+ *
+ * ## Component API
+ *
+ * ### Background
+ *
+ * In order to control the background of a card, the following tokens are currently
+ * supported:
+ *
+ * - `backgroundColor`
+ *
+ * ### Border
+ *
+ * The following border tokens can be used:
+ *
+ * - `borderColor`
+ * - `borderRadius`
+ * - `borderWidth`
+ *
+ * ### Padding
+ *
+ * Please use the following tokens to control the padding:
+ *
+ * - `paddingBottom`
+ * - `paddingLeft`
+ * - `paddingRight`
+ * - `paddingTop`
+ *
+ * Note that various viewport sizes are supported as well.
+ *
+ * ### Shadow
+ *
+ * Feel free to use the following properties within the `shadow` token:
+ *
+ * - `inset`: boolean
+ * - `color`: string
+ * - `offsetX`: number
+ * - `offsetY`: number
+ * - `blur`: number
+ * - `spread`: number
+ *
+ * ## Accessibility
+ *
+ * Card supports all the common a11y props. Please remember that by marking a card as `accessible`
+ * you automatically make inaccessible its children, which may or may not be appropriate
+ * depending on what you are trying to achieve.
+ */
+
+
+const Card = ({
+  children,
+  tokens,
+  variant,
+  ...rest
+}) => {
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Card', tokens, variant, {
+    viewport
+  });
+  const cardStyle = selectStyles(themeTokens);
+  const a11y = a11yProps.select(rest);
+  return /*#__PURE__*/React.createElement(View, Object.assign({
+    style: cardStyle
+  }, a11y), children);
+};
+
+Card.propTypes = {
+  children: PropTypes.node,
+  tokens: getTokensPropType('Card'),
+  variant: variantProp.propType,
+  ...a11yProps.types
+};
+export default Card;

package/lib/Card/index.js

@@ -0,0 +1,2 @@
+import Card from './Card';
+export default Card;

package/lib/Divider/Divider.js

@@ -1,10 +1,14 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { View, StyleSheet, Platform } from 'react-native';
 import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils/propTypes';
+import Spacer from '../Spacer';
+import { getTokensPropType, variantProp, spacingProps } from '../utils';
+/**
+ * @typedef {import('../utils/propTypes.js').SpacingIndex} SpacingIndex
+ * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
+ */
+
 /**
  * A basic divider component, horizontal by default. Color and thickness can be controlled by theme.
  * Divider is based on the flexbox model and uses `alignSelf: flex` to span its flex parent.
@@ -17,6 +21,26 @@ import { getTokensPropType, variantProp } from '../utils/propTypes';
  *
  * In a flexbox row, vertical dividers will automatically size to their parent height.
  *
+ * ## Space
+ *
+ * Use this to create **space either side of the divider**. For simple cases, pass a number referring to
+ * a position on the theme's spacing scale; for example, this will put a Spacer of the smallest supported
+ * size either side of the divider:
+ *
+ * ```jsx
+ * <Divider space={1} />
+ * ```
+ *
+ * `space` prop uses `useSpacingScale` and may accept a {@link SpacingObject} or a {@link SpacingIndex} number.
+ *
+ * To **reduce the length of a divider** as well as creating space between it and its neighbours, wrap it in
+ * a `Box` component. For example, this will have the second-smallest theme-supported spacing value between
+ * the dividing line and its neighbours, and will shorten the line at either end by the same amount:
+ *
+ * ```jsx
+ * <Box space={2}><Divider /></Box>
+ * ```
+ *
  * ## Accessibility
  *
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
@@ -25,6 +49,7 @@ import { getTokensPropType, variantProp } from '../utils/propTypes';
 const Divider = ({
   variant,
   vertical = false,
+  space,
   tokens,
   testID
 }) => {
@@ -45,14 +70,25 @@ const Divider = ({
     accessibilityRole: 'separator'
   } : // There are no such equivalent attributes for native
   {};
-  return /*#__PURE__*/React.createElement(View, _extends({
+  const divider = /*#__PURE__*/React.createElement(View, Object.assign({
     style: [styles.divider, borderStyles],
     testID: testID
   }, a11y));
+  if (!space) return divider;
+  const spacerProps = {
+    space,
+    direction: vertical ? 'row' : 'column'
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spacer, Object.assign({}, spacerProps, {
+    testID: testID ? `${testID}-Spacer-before` : undefined
+  })), divider, /*#__PURE__*/React.createElement(Spacer, Object.assign({}, spacerProps, {
+    testID: testID ? `${testID}-Spacer-after` : undefined
+  })));
 };
 
 Divider.propTypes = {
   tokens: getTokensPropType('Divider'),
+  space: spacingProps.types.spacingValue,
   variant: variantProp.propType,
 
   /**

package/lib/ExpandCollapse/Accordion.js

@@ -1,12 +1,10 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import ExpandCollapse from './ExpandCollapse';
 /**
  * 'Accordion' is a shorthand for an ExpandCollapse where only one item may be open at a time
  */
 
-const Accordion = props => /*#__PURE__*/React.createElement(ExpandCollapse, _extends({}, props, {
+const Accordion = props => /*#__PURE__*/React.createElement(ExpandCollapse, Object.assign({}, props, {
   maxOpen: 1
 }));
 

package/lib/ExpandCollapse/Control.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import { Pressable, View } from 'react-native';
 import PropTypes from 'prop-types';
@@ -60,7 +58,7 @@ const ExpandCollapseControl = ({
   variant,
   rest
 }) => {
-  const getTokens = useThemeTokensCallback('ExpandCollapseControl');
+  const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant);
   const a11y = a11yProps.select({ ...rest,
     accessibilityRole
   });
@@ -79,11 +77,11 @@ const ExpandCollapseControl = ({
     expanded: isExpanded
   });
 
-  const getControlTokens = pressableState => getTokens(tokens, variant, getControlState(pressableState));
+  const getControlTokens = pressableState => getTokens(getControlState(pressableState));
 
   const getPressableStyle = pressableState => selectContainerStyles(getControlTokens(pressableState));
 
-  return /*#__PURE__*/React.createElement(Pressable, _extends({}, a11y, {
+  return /*#__PURE__*/React.createElement(Pressable, Object.assign({}, a11y, {
     onPress: onPress,
     style: getPressableStyle
   }), pressableState => {

package/lib/ExpandCollapse/Panel.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { useState } from 'react';
 import { Animated, Platform, StyleSheet, View } from 'react-native';
 import PropTypes from 'prop-types';
@@ -84,11 +82,11 @@ const ExpandCollapsePanel = ({
   const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps;
   return /*#__PURE__*/React.createElement(View, {
     style: selectGroupStyles(themeTokens)
-  }, /*#__PURE__*/React.createElement(ExpandCollapseControl, _extends({}, a11y, {
+  }, /*#__PURE__*/React.createElement(ExpandCollapseControl, Object.assign({}, a11y, {
     isExpanded: isExpanded,
     tokens: controlTokens,
     onPress: handleControlPress
-  }), control), /*#__PURE__*/React.createElement(View, _extends({
+  }), control), /*#__PURE__*/React.createElement(View, Object.assign({
     style: overflowContainerStyles
   }, focusabilityProps), /*#__PURE__*/React.createElement(Animated.View, {
     onLayout: onContainerLayout,

package/lib/Feedback/Feedback.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectTokens, variantProp } from '../utils';
+
+const selectStyles = tokens => selectTokens('Feedback', tokens);
+
+const selectTitleTextStyles = ({
+  titleFontSize,
+  ...tokens
+}) => applyTextStyles(selectTokens('Typography', { ...tokens,
+  fontSize: titleFontSize
+}));
+
+const selectContentTextStyles = ({
+  contentFontSize,
+  ...tokens
+}) => applyTextStyles(selectTokens('Typography', { ...tokens,
+  fontSize: contentFontSize
+}));
+
+const selectIconTokens = ({
+  iconSize,
+  iconColor
+}) => ({
+  size: iconSize,
+  color: iconColor
+});
+
+const selectIconContainerStyles = ({
+  iconGap
+}) => ({
+  paddingRight: iconGap
+});
+/**
+ * A feedback box commonly used with form fields.
+ *
+ * ### Standalone usage
+ * While its primary use is to facilitate feedback states for other form components such as `TextInput`,
+ * you may use it standalone.
+ *
+ * ### Complex content
+ * You may pass any React tree as the children of this component, bear in mind that a render function
+ * is better suited for styling children based on Feedback's variant.
+ *
+ * ### Using a render function
+ * When a function is passed for rendering content, it will receive the feedback text styles and
+ * variant as arguments.
+ *
+ * ### Accessibility
+ * All accessibility props set on this component will be applied to the outer container.
+ */
+
+
+const Feedback = ({
+  title,
+  children,
+  tokens,
+  variant,
+  ...rest
+}) => {
+  const themeTokens = useThemeTokens('Feedback', tokens, variant);
+  const {
+    icon: IconComponent
+  } = themeTokens;
+  const titleTextStyles = selectTitleTextStyles(themeTokens);
+  const contentTextStyles = selectContentTextStyles(themeTokens);
+  const content = typeof children === 'string' ? /*#__PURE__*/React.createElement(Text, {
+    style: contentTextStyles
+  }, children) : children;
+  const accessibilityProps = a11yProps.select(rest); // TODO: use Stack to separate the title from content (space 2)
+
+  return /*#__PURE__*/React.createElement(View, Object.assign({
+    style: selectStyles(themeTokens)
+  }, accessibilityProps), title !== undefined && /*#__PURE__*/React.createElement(View, {
+    style: staticStyles.title
+  }, IconComponent && /*#__PURE__*/React.createElement(View, {
+    style: selectIconContainerStyles(themeTokens)
+  }, /*#__PURE__*/React.createElement(IconComponent, {
+    tokens: selectIconTokens(themeTokens)
+  })), /*#__PURE__*/React.createElement(Text, {
+    style: titleTextStyles
+  }, title)), content && typeof content === 'function' ? content({
+    textStyles: contentTextStyles,
+    variant
+  }) : /*#__PURE__*/React.createElement(View, null, content));
+};
+
+Feedback.propTypes = {
+  /**
+   * Emphasized summary of the feedback. If an icon is set, it is rendered next to the title.
+   */
+  title: PropTypes.string,
+
+  /**
+   * Feedback content rendered below the title. A render function `({textStyles, variant}) => {}` is supported.
+   */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
+  tokens: getTokensPropType('Feedback'),
+  variant: variantProp.propType
+};
+export default Feedback;
+const staticStyles = StyleSheet.create({
+  title: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});

package/lib/Feedback/index.js

@@ -0,0 +1,2 @@
+import Feedback from './Feedback';
+export default Feedback;

package/lib/FlexGrid/Col/Col.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Platform, StyleSheet, View } from 'react-native';
@@ -7,7 +5,7 @@ import { viewports } from '@telus-uds/system-constants';
 import GutterContext from '../providers/GutterContext';
 import { useViewport } from '../../ViewportProvider';
 import applyInheritance from '../helpers';
-import { responsivePropTypeFactory } from '../../utils';
+import { responsiveProps } from '../../utils';
 
 const Col = ({
   horizontalAlign,
@@ -151,7 +149,7 @@ const Col = ({
     lg: offsetsWithIheritance[3],
     xl: offsetsWithIheritance[4]
   };
-  return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
+  return /*#__PURE__*/React.createElement(View, Object.assign({}, viewProps, {
     style: [styles.col, gutterPadding, offsetStyles(offsets), sizeStyles(sizes), { ...hidingStyles
     }]
   }), children);
@@ -257,6 +255,6 @@ Col.propTypes = {
    *
    * Accepts a `PropType.string` following the [responsive prop](#/Layout?id=responsive) structure.
    */
-  horizontalAlign: responsivePropTypeFactory(PropTypes.oneOf(['left', 'center', 'right']))
+  horizontalAlign: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['left', 'center', 'right']))
 };
 export default Col;

package/lib/FlexGrid/FlexGrid.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { View, StyleSheet } from 'react-native';
@@ -60,7 +58,7 @@ const FlexGrid = ({
 
   return /*#__PURE__*/React.createElement(GutterContext.Provider, {
     value: gutter
-  }, /*#__PURE__*/React.createElement(View, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(View, Object.assign({}, rest, {
     style: [styles.grid, {
       marginHorizontal,
       marginVertical,

package/lib/FlexGrid/Row/Row.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { View, StyleSheet } from 'react-native';
@@ -107,7 +105,7 @@ const Row = ({
     flexDirection = reverseLevel[4] ? 'row-reverse' : 'row';
   }
 
-  return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(View, Object.assign({}, rest, {
     style: [styles.row, {
       flexDirection,
       ...horizontalAlignStyles(horizontalAlign),

package/lib/FlexGrid/providers/GutterContext.js

@@ -1,3 +1,3 @@
 import React from 'react';
-const GutterContext = React.createContext(false);
+const GutterContext = /*#__PURE__*/React.createContext(false);
 export default GutterContext;

package/lib/Icon/Icon.js

@@ -23,7 +23,7 @@ const Icon = ({
     style: {
       // TODO: https://github.com/telus/universal-design-system/issues/487
       transition: 'transform 200ms',
-      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : ''].filter(exists => exists).join(' ')
+      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' ')
     }
   }, iconContent) : iconContent;
 }; // Auto-generated SVG icon components wrap Icon and pass through these props: