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

package/lib/Divider/Divider.js

@@ -2,7 +2,13 @@ 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.
@@ -15,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"`.
@@ -23,6 +49,7 @@ import { getTokensPropType, variantProp } from '../utils/propTypes';
 const Divider = ({
   variant,
   vertical = false,
+  space,
   tokens,
   testID
 }) => {
@@ -43,14 +70,25 @@ const Divider = ({
     accessibilityRole: 'separator'
   } : // There are no such equivalent attributes for native
   {};
-  return /*#__PURE__*/React.createElement(View, Object.assign({
+  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/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/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:

package/lib/InputLabel/InputLabel.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { getTokensPropType, selectTokens, variantProp } from '../utils';
+import LabelContent from './LabelContent';
+
+const selectLabelStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
+
+const selectHintStyles = ({
+  hintColor,
+  hintFontName,
+  hintFontSize,
+  hintFontWeight,
+  hintLineHeight
+}) => applyTextStyles({
+  color: hintColor,
+  fontName: hintFontName,
+  fontSize: hintFontSize,
+  fontWeight: hintFontWeight,
+  lineHeight: hintLineHeight
+});
+
+const selectGapStyles = ({
+  gap
+}) => ({
+  marginRight: gap
+});
+
+function InputLabel({
+  label,
+  forId,
+  hint,
+  hintPosition = 'inline',
+  hintId,
+  tooltip,
+  tokens,
+  variant
+}) {
+  const themeTokens = useThemeTokens('InputLabel', tokens, variant); // TODO: use the actual Tooltip component here
+
+  const hasTooltip = tooltip !== undefined;
+  const isHintInline = hintPosition === 'inline';
+  return /*#__PURE__*/React.createElement(View, {
+    style: [staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow]
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label]
+  }, /*#__PURE__*/React.createElement(LabelContent, {
+    forId: forId
+  }, label)), hint && isHintInline && /*#__PURE__*/React.createElement(Text, {
+    style: [selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens)],
+    nativeID: hintId
+  }, hint), tooltip && /*#__PURE__*/React.createElement(Text, null, "?"), hint && !isHintInline && /*#__PURE__*/React.createElement(Text, {
+    style: [selectHintStyles(themeTokens), staticStyles.hintBelow],
+    nativeID: hintId
+  }, hint));
+}
+
+InputLabel.propTypes = {
+  label: PropTypes.string.isRequired,
+  forId: PropTypes.string,
+  hint: PropTypes.string,
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
+  hintId: PropTypes.string,
+  tooltip: PropTypes.string,
+  tokens: getTokensPropType('InputLabel'),
+  variant: variantProp.propType
+};
+export default InputLabel;
+const staticStyles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  containerWithHintBelow: {
+    flexWrap: 'wrap'
+  },
+  label: {
+    flexShrink: 0
+  },
+  hintBelow: {
+    flexBasis: '100%',
+    flexShrink: 0
+  }
+});

package/lib/InputLabel/LabelContent.native.js

@@ -0,0 +1,8 @@
+// Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
+function LabelContent({
+  children
+}) {
+  return children;
+}
+
+export default LabelContent;

package/lib/InputLabel/LabelContent.web.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function LabelContent({
+  children,
+  forId
+}) {
+  return /*#__PURE__*/React.createElement("label", {
+    htmlFor: forId
+  }, children);
+}
+
+export default LabelContent;
+LabelContent.propTypes = {
+  children: PropTypes.string,
+  forId: PropTypes.string
+};

package/lib/InputLabel/index.js

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

package/lib/Link/LinkBase.js

@@ -25,7 +25,10 @@ Platform.OS === 'web' ? {
   outline: outerBorderOutline,
   borderWidth: outerBorderWidth,
   borderColor: outerBorderColor,
-  borderRadius: outerBorderRadius
+  borderRadius: outerBorderRadius,
+  // Stops focus ring stretching horizontally if parent has display: block
+  // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
+  display: 'inline-flex'
 } : {};
 
 const selectTextStyles = ({
@@ -53,10 +56,12 @@ const selectIconStyles = ({
   iconGapBefore,
   iconGapAfter,
   iconScale,
-  iconTranslateX
+  iconTranslateX,
+  iconTranslateY
 }) => ({
   scale: iconScale,
   translateX: iconTranslateX,
+  translateY: iconTranslateY,
   size: iconSize,
   gapBefore: iconGapBefore,
   gapAfter: iconGapAfter
@@ -183,7 +188,8 @@ const LinkBase = ({
     size: iconStyles.size ? iconStyles.size * iconScale : undefined,
     color: contentStyles.color ?? undefined,
     scale: iconStyles.scale ?? undefined,
-    translateX: iconStyles.translateX ?? undefined
+    translateX: iconStyles.translateX ?? undefined,
+    translateY: iconStyles.translateY ?? undefined
   };
   const iconContent = /*#__PURE__*/React.createElement(IconComponent, {
     tokens: iconTokens,

package/lib/Spacer/Spacer.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheet, View } from 'react-native';
+import { useSpacingScale, spacingProps } from '../utils';
+/**
+ * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
+ * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
+ */
+
+const selectSizeStyle = (size, direction) => ({
+  // Only apply space in one direction at a time, else large spacers will increase the
+  // 'across' size of the parent and mess up siblings with styles like `alignItems: stretch`.
+  [direction === 'row' ? 'width' : 'height']: size
+});
+/**
+ * An empty element used to create a gap between components that is sized according to the theme spacing scale,
+ * passing its `space` prop ({@link SpacingValue}) to `useSpacingScale`.
+ *
+ * ## Simple spacing
+ *
+ * For most simple uses, pass a number to Spacer's `space` prop referring to an index in the theme's
+ * spacing scale. For example, for a spacer of the theme's smallest non-zero spacing size:
+ *
+ * ```jsx
+ * <Spacer space={1} />
+ * ```
+ *
+ * ## Responsive spacing
+ *
+ * Different spacing scale sizes may be chosen for different viewports by passing `space` a {@link SpacingObject}
+ * using keys for the viewports at and above which certain spacing indexes should apply.
+ *
+ * This can be useful when a Spacer is inside a layout with a shape that changes between viewports.
+ *
+ * For example, a spacer might need no width below 'md' viewport because the items it separates will be on separate lines,
+ * but may need a visible size above that viewport, and a wider size at the highest viewport:
+ *
+ * ```jsx
+ * <Spacer space={{ xs: 0, md: 2, xl: 3 }} />
+ * ```
+ *
+ * Note that themes may also define viewport-specific behaviour for indexes on the spacing scale. These viewport
+ * props should only be used where necessary to achieve a certain responsive layoutm and shouldn't be used to replace
+ * or deviate from responsive spacing behaviour in a theme that is intended to apply universally.
+ *
+ * ## More options
+ *
+ * See `useSpacingScale` hook for more options that may be used with the `space` prop.
+ *
+ * ## Accessibility
+ *
+ * Spacer has no content and is ignored by tools such as screen readers. Use `Divider` for
+ * separations between elements that may be treated as semantically meaningful on web.
+ */
+
+
+const Spacer = ({
+  space = 1,
+  direction = 'column',
+  testID
+}) => {
+  const size = useSpacingScale(space);
+  const sizeStyle = selectSizeStyle(size, direction);
+  return /*#__PURE__*/React.createElement(View, {
+    testID: testID,
+    style: [staticStyles.stretch, sizeStyle]
+  });
+};
+
+Spacer.propTypes = {
+  /**
+   * The size of the spacer according to the theme's spacing scale.
+   * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
+   * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
+   */
+  space: spacingProps.types.spacingValue,
+
+  /**
+   * The spacer applies space in only one direction, which is controlled by the `direction` prop:
+   *
+   * - `'column'` (default) applies space vertically; has a fixed height and not width.
+   * - `'row'` applies space horizontally; has a fixed width and not height.
+   */
+  direction: PropTypes.oneOf(['column', 'row']),
+
+  /**
+   * @ignore
+   * In tests, the only way to select Spacers is with testID prop and getByTestId, since they have no content,
+   * no accessibility role, and there is no equivalent of nextSibling in React Native Testing Library.
+   */
+  testID: PropTypes.string
+};
+const staticStyles = StyleSheet.create({
+  stretch: {
+    alignSelf: 'stretch'
+  }
+});
+export default Spacer;

package/lib/Spacer/index.js

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

package/lib/StackView/StackView.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View } from 'react-native';
+import Divider from '../Divider';
+import { spacingProps, a11yProps } from '../utils';
+import { useThemeTokens } from '../ThemeProvider';
+import getStackedContent from './getStackedContent';
+import { staticStyles, selectFlexStyles } from './common';
+/**
+ * StackView evenly spaces its children, by default placing `Spacer` components between them.
+ *
+ * ## Spacing
+ *
+ * StackView takes the same spacing props as `Spacer` and passes them directly to the layout components
+ * it uses for spacing.
+ *
+ * ## Direction
+ *
+ * Use `direction` to control how the children are stacked:
+ *
+ * - `'column'` (default) stacks and spaces the children vertically.
+ * - `'row'` stacks and spaces the children horizontally.
+ * - `'column-reverse'` acts the same as `'column'`, but reverses the direction.
+ * - `'row-reverse'` acts the same as `'row'`, but reverses the direction.
+ *
+ * ## Theming, alignment and justification
+ *
+ * `StackView` is a pure layout component and has no theme styles beyond a small set of layout styles
+ * (`alignItems`, `justifyContent`, `flexGrow`) which may be set using the `tokens` prop.
+ *
+ * All other styling such as borders, background colours, padding etc should be applied by wrapping
+ * the `StackView` in other components. For example, a `StackView` may be the child of a `Card`.
+ *
+ * ## Separator options
+ *
+ * By default, StackView inserts a `<Spacer>` component between each rendered child.
+ *
+ * With the `divider` prop, it instead renders a `Divider` instead of a `Spacer`. The gap between
+ * items will be double what it would be without this prop plus the width of the divider.
+ *
+ * ## Accessibility
+ *
+ * `StackView` may take any React Native accessibility props and applies them to the outer `View`.
+ * It applies no accessibility props of its own, unless `divider` prop is passed (`Divider` has a
+ * semantic role but only on web, not within native apps).
+ */
+
+const StackView = ({
+  space = 1,
+  divider,
+  direction = 'column',
+  inherit,
+  children,
+  variant,
+  tokens,
+  ...rest
+}) => {
+  const a11y = a11yProps.select({ ...rest
+  });
+  const content = getStackedContent(children, {
+    direction,
+    divider,
+    space
+  });
+  const themeTokens = useThemeTokens('StackView', tokens, variant);
+  const flexStyles = selectFlexStyles(themeTokens);
+  return inherit ? content : /*#__PURE__*/React.createElement(View, Object.assign({}, a11y, {
+    style: [flexStyles, staticStyles[direction]]
+  }), content);
+};
+
+StackView.propTypes = { ...a11yProps.propTypes,
+
+  /**
+   * Sets the `flexDirection` of the container and, if `divider` is used, gives the Divider the appropriate direction.
+   */
+  direction: PropTypes.oneOf(['column', 'row', 'column-reverse', 'row-reverse']),
+
+  /**
+   * If true, renders a UDS `Divider` component between each item. If an object is passed,
+   * this object is passes as props to each Divider.
+   */
+  divider: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape(Divider.propTypes)]),
+
+  /**
+   * If true, does not render any container and returns an array of spaced children, inheriting
+   * flex styles from the StackView's parent. That parent must have a `flexDirection` style corresponding
+   * to the StackView's `direction` prop for `divider` prop to behave correctly.
+   */
+  inherit: PropTypes.bool,
+
+  /**
+   * The size of the spacer according to the theme's spacing scale.
+   * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
+   * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
+   */
+  space: spacingProps.types.spacingValue,
+
+  /**
+   * A StackView may take any children, but will have no effect if it is only passed one child or is passed children
+   * wrapped in a component. If necessary, children may be wrapped in one React Fragment.
+   */
+  children: PropTypes.node
+};
+export default StackView;

package/lib/StackView/StackWrap.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import StackWrapBox from './StackWrapBox';
+import StackWrapGap from './StackWrapGap'; // CSS.supports needs an example of the type of value you intend to use.
+// Will be an integer appended `px` after hooks and JSX styles are resolved.
+
+const exampleGapValue = '1px';
+/**
+ * StackWrap is an alternative to StackView where the spaced items are allowed to wrap.
+ *
+ * As well as providing space between the items, StackWrap provides `gap` space between
+ * wrapped lines of items. By default, this `gap` is the same as the gap between spaced items.
+ * If a different spacing is desired between wrapped lines, pass a spacing value to the `gap` prop.
+ */
+
+const StackWrap = props => {
+  const {
+    space
+  } = props; // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
+  // eslint-disable-next-line react/destructuring-assignment
+
+  const gap = props.gap ?? space;
+  return gap === space && CSS?.supports('gap', exampleGapValue) ?
+  /*#__PURE__*/
+  // If possible, use the cleaner implementation that applies CSS `gap` styles to the container.
+  React.createElement(StackWrapGap, props) :
+  /*#__PURE__*/
+  // Else, use the fallback implementation which renders a `Box` component around each child.
+  React.createElement(StackWrapBox, props);
+};
+
+StackWrap.propTypes = StackWrapBox.propTypes;
+export default StackWrap;

package/lib/StackView/StackWrap.native.js

@@ -0,0 +1,3 @@
+import StackWrapBox from './StackWrapBox'; // No support for CSS `gap` on React Native, so always use the fallback "box" implementation.
+
+export default StackWrapBox;

package/lib/StackView/StackWrapBox.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View } from 'react-native';
+import { spacingProps, a11yProps, useSpacingScale } from '../utils';
+import { useThemeTokens } from '../ThemeProvider';
+import getStackedContent from './getStackedContent';
+import { staticStyles, selectFlexStyles } from './common';
+const offsetSides = {
+  row: 'marginBottom',
+  column: 'marginRight'
+};
+const gapSides = {
+  row: 'bottom',
+  column: 'right'
+};
+const spaceSides = {
+  row: 'right',
+  column: 'bottom'
+};
+/**
+ * An alternative fallback implementation of `StackWrap` that doesn't use CSS `gap`.
+ *
+ * This is not intended to be used directly. It will automatically be used instead of StackWrap in:
+ *
+ * - Native apps (no `gap` style prop in React Native).
+ * - Older (~<=2020) browsers which don't support CSS `gap`.
+ * - Cases where the `space` between items should be different to the `gap` between wrapped rows .
+ *
+ * Unlike the cleaner and more side-effect-free CSS gap StackWrap implementation, this renders a Box (View)
+ * between the container and the stacked children, and requires a negative margin on the container.
+ */
+
+const StackWrapBox = ({
+  space = 1,
+  gap = space,
+  direction = 'row',
+  children,
+  tokens,
+  variant,
+  ...rest
+}) => {
+  const themeTokens = useThemeTokens('StackView', tokens, variant);
+  const flexStyles = selectFlexStyles(themeTokens);
+  const a11y = a11yProps.select({ ...rest
+  }); // Mimic CSS `gap` using box spacing on the side after a wrapped row then offsetting it on the last row.
+
+  const gapSize = useSpacingScale(gap);
+  const offsetStyle = {
+    [offsetSides[direction]]: -1 * gapSize
+  };
+  const boxProps = {
+    [gapSides[direction]]: gap,
+    [spaceSides[direction]]: space
+  };
+  const content = getStackedContent(children, {
+    direction,
+    space: 0,
+    box: boxProps
+  });
+  return /*#__PURE__*/React.createElement(View, Object.assign({}, a11y, {
+    style: [flexStyles, staticStyles.wrap, staticStyles[direction], offsetStyle]
+  }), content);
+};
+
+StackWrapBox.propTypes = { ...a11yProps.propTypes,
+
+  /**
+   * Sets the `flexDirection` of the container, or if 'inherit' returns spaced children as an array.
+   */
+  direction: PropTypes.oneOf(['column', 'row']),
+
+  /**
+   * The size of the spacer according to the theme's spacing scale.
+   * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
+   * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
+   */
+  space: spacingProps.types.spacingValue,
+
+  /**
+   * A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children
+   * wrapped in a component. If necessary, children may be wrapped in one React Fragment.
+   */
+  children: PropTypes.node
+};
+export default StackWrapBox;