@spark-web/stack/dist/spark-web-stack.esm.js

--- title: Stack storybookPath: page-layout-stack--default isExperimentalPackage: false ---

import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
import { Box } from '@spark-web/box';
import { Divider } from '@spark-web/divider';
import { forwardRefWithAs } from '@spark-web/utils/ts';
import { Children, Fragment } from 'react';
import { createResponsiveMapFn } from '@spark-web/theme';
import { jsx, jsxs } from '@emotion/react/jsx-runtime';

var alignLookup = {
  left: 'start',
  center: 'center',
  right: 'end',
  stretch: 'stretch'
};
var alignToAlignItems = createResponsiveMapFn(alignLookup);

var _excluded = ["align", "children", "data", "dividers"];
var Stack = forwardRefWithAs(function (_ref, forwardedRef) {
  var _ref$align = _ref.align,
    align = _ref$align === void 0 ? 'stretch' : _ref$align,
    children = _ref.children,
    data = _ref.data,
    dividers = _ref.dividers,
    props = _objectWithoutProperties(_ref, _excluded);
  var alignItems = alignToAlignItems(align);
  var rootProps = _objectSpread({
    ref: forwardedRef,
    alignItems: alignItems,
    data: data,
    display: 'flex',
    flexDirection: 'column'
  }, props);

  // bail early w/o dividers to avoid unnecessary map
  if (!dividers) {
    return jsx(Box, _objectSpread(_objectSpread({}, rootProps), {}, {
      children: children
    }));
  }

  // map over children to insert dividers
  // remove falsy values before mapping, keeps the index in sync
  var childArray = Children.toArray(children);
  return jsx(Box, _objectSpread(_objectSpread({}, rootProps), {}, {
    children: childArray.map(function (child, idx) {
      return jsxs(Fragment, {
        children: [dividers && idx ? jsx(Divider, {}) : null, child]
      }, child.key || idx);
    })
  }));
});

export { Stack };