@telus-uds/components-base 2.5.0 → 3.0.0

package/lib/cjs/Spacer/Spacer.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
+ * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
+ */const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+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 = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    space = 1,
+    direction = 'column',
+    ...rest
+  } = _ref;
+  const size = (0, _utils.useSpacingScale)(space);
+  const sizeStyle = selectSizeStyle(size, direction);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    style: [staticStyles.stretch, sizeStyle],
+    ...selectProps(rest)
+  });
+});
+Spacer.displayName = 'Spacer';
+Spacer.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * 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: _utils.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.default.oneOf(['column', 'row'])
+};
+const staticStyles = _StyleSheet.default.create({
+  stretch: {
+    alignSelf: 'stretch'
+  }
+});
+var _default = exports.default = Spacer;

package/lib/cjs/Spacer/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Spacer = _interopRequireDefault(require("./Spacer"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Spacer.default;

package/lib/cjs/StackView/StackView.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Divider = _interopRequireDefault(require("../Divider"));
+var _utils = require("../utils");
+var _ThemeProvider = require("../ThemeProvider");
+var _ViewportProvider = require("../ViewportProvider");
+var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
+var _common = require("./common");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
+/**
+ * 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.
+ *
+ * `direction` is an optionally responsive prop and may be an object keyed by viewports. For example,
+ * `{ xs: 'column', md: 'row' } stacks as a column on `xs` and `sm` viewports and a row at 'md' and above.
+ *
+ * ## 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. If the
+ * tokens prop is a function it will recieve the current viewport.
+ *
+ * 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 = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    space = 0,
+    divider,
+    direction: directionProp = 'column',
+    children,
+    variant,
+    tokens,
+    tag,
+    accessibilityRole,
+    ...rest
+  } = _ref;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const direction = (0, _utils.useResponsiveProp)(directionProp, 'column');
+  const selectedProps = selectProps({
+    accessibilityRole,
+    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...rest
+  });
+  const content = (0, _getStackedContent.default)(children, {
+    direction,
+    divider,
+    space
+  });
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
+    viewport
+  });
+  const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
+  const size = {
+    width: themeTokens.width
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...selectedProps,
+    style: [flexStyles, _common.staticStyles[direction], size],
+    children: content
+  });
+});
+StackView.displayName = 'StackView';
+StackView.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('StackView'),
+  variant: _utils.variantProp.propType,
+  /**
+   * Sets the `flexDirection` of the container and, if `divider` is used, gives the Divider the appropriate direction.
+   */
+  direction: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.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.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape(_Divider.default.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: _utils.spacingProps.types.spacingValue,
+  /**
+   * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
+   *
+   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
+   */
+  tag: _propTypes.default.oneOf(_utils.layoutTags),
+  /**
+   * 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.default.node
+};
+var _default = exports.default = StackView;

package/lib/cjs/StackView/StackWrap.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _useSafeLayoutEffect = _interopRequireDefault(require("../utils/useSafeLayoutEffect"));
+var _StackWrapBox = _interopRequireDefault(require("./StackWrapBox"));
+var _StackWrapGap = _interopRequireDefault(require("./StackWrapGap"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
+const cssSupports = (property, value) => _Platform.default.OS === 'web' && typeof window !== 'undefined' && typeof window.CSS?.supports === 'function' && window.CSS.supports(property, value);
+
+// 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 = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [canUseCSSGap, setCanUseCSSGap] = _react.default.useState(false);
+  const {
+    space
+  } = props;
+  // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
+  const gap = props.gap ?? space;
+  const gapEqualsSpace = gap === space;
+
+  // If possible, use the cleaner implementation that applies CSS `gap` styles to the container,
+  // preserving direct parent-child relationships between the container and each item, which
+  // can result in clearer descriptions on some screen readers (e.g. radio "X of Y" on MacOS).
+  // Else, use the fallback implementation which renders a `Box` component around each child.
+  const Component = canUseCSSGap ? _StackWrapGap.default : _StackWrapBox.default;
+  // In SSR, the type of implementation must match the server during hydration, but
+  // the server can't know if gap is supported, so never use it until after hydration.
+  (0, _useSafeLayoutEffect.default)(() => {
+    setCanUseCSSGap(gapEqualsSpace && cssSupports('gap', exampleGapValue));
+  }, [gapEqualsSpace]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+    ref: ref,
+    ...props
+  });
+});
+StackWrap.displayName = 'StackWrap';
+StackWrap.propTypes = _StackWrapBox.default.propTypes;
+var _default = exports.default = StackWrap;

package/lib/cjs/StackView/StackWrap.native.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _StackWrapBox = _interopRequireDefault(require("./StackWrapBox"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// No support for CSS `gap` on React Native, so always use the fallback "box" implementation.
+var _default = exports.default = _StackWrapBox.default;

package/lib/cjs/StackView/StackWrapBox.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _utils = require("../utils");
+var _ThemeProvider = require("../ThemeProvider");
+var _ViewportProvider = require("../ViewportProvider");
+var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
+var _common = require("./common");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+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 = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    space = 1,
+    gap = space,
+    direction: directionProp = 'row',
+    children,
+    tokens,
+    variant,
+    tag,
+    accessibilityRole,
+    ...rest
+  } = _ref;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const direction = (0, _utils.useResponsiveProp)(directionProp, 'row');
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
+    viewport
+  });
+  const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
+  const selectedProps = selectProps({
+    accessibilityRole,
+    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...rest
+  });
+
+  // Mimic CSS `gap` using box spacing on the side after a wrapped row then offsetting it on the last row.
+  const gapSize = (0, _utils.useSpacingScale)(gap);
+  const offsetStyle = {
+    [offsetSides[direction]]: -1 * gapSize
+  };
+  const boxProps = {
+    [gapSides[direction]]: gap,
+    [spaceSides[direction]]: space
+  };
+  const content = (0, _getStackedContent.default)(children, {
+    direction,
+    space: 0,
+    box: boxProps
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...selectedProps,
+    style: [flexStyles, _common.staticStyles.wrap, _common.staticStyles[direction], offsetStyle],
+    children: content
+  });
+});
+StackWrapBox.displayName = 'StackWrapBox';
+StackWrapBox.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('StackView'),
+  /**
+   * Sets the `flexDirection` of the container
+   */
+  direction: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['column', 'row', 'row-reverse', 'column-reverse'])),
+  /**
+   * The size of the space between items 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: _utils.spacingProps.types.spacingValue,
+  /**
+   * The size of the space between lines of content, according to the theme's spacing scale. By default, matches `space`.
+   * 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).
+   */
+  gap: _utils.spacingProps.types.spacingValue,
+  /**
+   * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
+   *
+   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
+   */
+  tag: _propTypes.default.oneOf(_utils.layoutTags),
+  /**
+   * 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.default.node
+};
+var _default = exports.default = StackWrapBox;

package/lib/cjs/StackView/StackWrapGap.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StackWrapBox = _interopRequireDefault(require("./StackWrapBox"));
+var _utils = require("../utils");
+var _ThemeProvider = require("../ThemeProvider");
+var _ViewportProvider = require("../ViewportProvider");
+var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
+var _common = require("./common");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
+/**
+ * The primary implementation of StackWrap.
+ *
+ * This is not intended to be used directly. It will automatically be used instead of StackWrap if:
+ *
+ * - On web, and,
+ * - On a browser that supports CSS `gap` (most browser versions from 2020 onwards), and,
+ * - The `space` between items is the same as the `gap` between wrapped rows (this is the
+ *   default if `gap` prop is undefined)
+ */
+const StackWrapGap = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    space = 1,
+    tokens,
+    variant,
+    direction: directionProp = 'row',
+    children,
+    tag,
+    accessibilityRole,
+    ...rest
+  } = _ref;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const direction = (0, _utils.useResponsiveProp)(directionProp, 'row');
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
+    viewport
+  });
+  const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
+  const selectedProps = selectProps({
+    accessibilityRole,
+    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...rest
+  });
+  const size = (0, _utils.useSpacingScale)(space);
+  const gapStyle = {
+    gap: size
+  };
+  const content = (0, _getStackedContent.default)(children, {
+    direction,
+    space: 0
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...selectedProps,
+    style: [flexStyles, _common.staticStyles.wrap, _common.staticStyles[direction], gapStyle],
+    children: content
+  });
+});
+StackWrapGap.displayName = 'StackWrapGap';
+StackWrapGap.propTypes = _StackWrapBox.default.propTypes;
+var _default = exports.default = StackWrapGap;

package/lib/cjs/StackView/common.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.staticStyles = exports.selectFlexStyles = void 0;
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const selectFlexStyles = _ref => {
+  let {
+    alignItems,
+    justifyContent,
+    flexGrow,
+    flexShrink
+  } = _ref;
+  return {
+    alignItems,
+    justifyContent,
+    flexGrow,
+    flexShrink
+  };
+};
+exports.selectFlexStyles = selectFlexStyles;
+const staticStyles = exports.staticStyles = _StyleSheet.default.create({
+  wrap: {
+    flexShrink: 1,
+    flexWrap: 'wrap'
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  'row-reverse': {
+    flexDirection: 'row-reverse'
+  },
+  column: {
+    // This is the React Native View default, but also it's very fundamental to the behaviour,
+    // so make it explicit and allow it to be tested for.
+    flexDirection: 'column'
+  },
+  'column-reverse': {
+    flexDirection: 'column-reverse'
+  }
+});

package/lib/cjs/StackView/getStackedContent.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("../Box"));
+var _Divider = _interopRequireDefault(require("../Divider"));
+var _Spacer = _interopRequireDefault(require("../Spacer"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * @typedef {import('react').ReactChildren} ReactChildren
+ * @typedef {import('react').ReactElement} ReactElement
+ * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
+ */
+
+/**
+ * Takes valid React Children and inserts a specified amount of space between each valid (not nullish) top
+ * level element, according to the provided `options`.
+ *
+ * Returns an array of the original elements plus inserted spacing elements.
+ * This array of elements is keyed and may be used as a component's `children` without mapping.
+ *
+ * @param {ReactChildren} children
+ * @param {object} [options] -
+ *  - `space`: amount of space to insert using the theme spacing scale (see `useSpacingScale`)
+ *  - `direction`: if 'row' or 'row-reverse', applies space horizontally, if 'column' or 'column-reverse', applies space vertically
+ *  - `box`: if truthy, wraps each valid child in a Box component; if an object, passes it to Box as props
+ *  - `divider`: if truthy, inserts Divider components; if an object, passes it to Divider as props
+ *  - `preserveFragments`: if true, adds no space between top-level elements that were passed inside a nested fragment
+ * @param {SpacingValue} [options.space]
+ * @param {boolean | object} [options.divider]
+ * @param {"row" | "column" | "row-reverse" | "column-reverse"} [options.direction]
+ * @param {boolean} [options.preserveFragments]
+ * @returns {ReactElement[]}
+ */const getStackedContent = (children, _ref) => {
+  let {
+    divider,
+    space,
+    direction = 'column',
+    box,
+    preserveFragments = false
+  } = _ref;
+  const boxProps = box && typeof box === 'object' ? box : {
+    space
+  };
+  const dividerProps = divider && typeof divider === 'object' ? divider : {};
+
+  // Avoid surprises if children contains comments, nulls, or is a variable wrapped as a fragment
+  const topLevelChildren = preserveFragments ? children : unpackFragment(children);
+  const validChildren = _react.default.Children.toArray(topLevelChildren).filter(Boolean);
+  const content = validChildren.reduce((newChildren, child, index) => {
+    const boxID = `Stack-Box-${index}`;
+    const item = box ?
+    /*#__PURE__*/
+    // If wrapped in Box, that Box needs a key.
+    // If possible, use an existing content key; use an index-based key only if necessary.
+    (0, _react.createElement)(_Box.default, {
+      ...boxProps,
+      key: child.key || boxID,
+      testID: boxID
+    }, child) : child;
+    if (!index || !space && !divider) return [...newChildren, item];
+    const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
+    const commonProps = {
+      testID,
+      space
+    };
+    const separator = divider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+      vertical: direction.startsWith('row'),
+      ...dividerProps,
+      ...commonProps
+    }, testID) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      direction: direction.startsWith('row') ? 'row' : 'column',
+      ...commonProps
+    }, testID);
+    return [...newChildren, separator, item];
+  }, []);
+  return content;
+};
+
+/**
+ * Unpacks top-level fragments, so that common compositional patterns such as the following examples
+ * can be iterated as flat siblings (as if they were `<Child1 /><Child2 /><Child3 />`):
+ *
+ * - Setting `children` as a property wrapped in a fragment:
+ *
+ * ```jsx
+ * args.children = <><Child1 /><Child2 /><Child3 /></>
+ * ```
+ *
+ * - Defining `children` as a variable wrapped in a fragment:
+ *
+ * ```jsx
+ * const content = <><Child1 /><Child2 /><Child3 /></>
+ * if (someCondition) return <SomeWrapper>{content}</SomeWrapper>
+ * ```
+ *
+ * - Using fragments at the top level of a JSX block for conditional rendering:
+ *
+ * ```jsx
+ * <Child1 />
+ * {someCondition && (
+ *   <>
+ *     <Child2 />
+ *     <Child3 />
+ *   </>
+ * )}
+ * ```
+ *
+ * @param {ReactChildren} child
+ * @returns {ReactChildren}
+ */
+const unpackFragment = child => {
+  // If this level is a set of top-level siblings rather than one child, check each in turn
+  if (_react.default.Children.count(child) > 1) return _react.default.Children.map(child, unpackFragment);
+
+  // When a fragment is found, unpack its children to the top level and check them
+  if (child?.type === _react.default.Fragment) return unpackFragment(child.props?.children);
+
+  // Stop unpacking as soon as any non-fragment child is found
+  return child;
+};
+var _default = exports.default = getStackedContent;