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

--- title: Columns storybookPath: page-layout-columns--default isExperimentalPackage: false ---

import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
import { css } from '@emotion/css';
import { Box } from '@spark-web/box';
import { createResponsiveMapFn, useTheme } from '@spark-web/theme';
import { forwardRefWithAs } from '@spark-web/utils/ts';
import { Children } from 'react';
import { jsx } from 'react/jsx-runtime';

var alignYLookup = {
  top: 'start',
  center: 'center',
  bottom: 'end',
  stretch: 'stretch'
};
var alignYToAlignItems = createResponsiveMapFn(alignYLookup);

var _excluded = ["alignY", "collapseBelow", "data", "gap", "template"];
var Columns = forwardRefWithAs(function (_ref, forwardedRef) {
  var _ref$alignY = _ref.alignY,
      alignY = _ref$alignY === void 0 ? 'top' : _ref$alignY,
      collapseBelow = _ref.collapseBelow,
      data = _ref.data,
      gap = _ref.gap,
      template = _ref.template,
      props = _objectWithoutProperties(_ref, _excluded);

  var theme = useTheme();
  var alignItems = alignYToAlignItems(alignY);
  var count = Children.count(props.children);
  var gridTemplateColumns = template ? template.map(function (c) {
    return "".concat(c, "fr");
  }).join(' ') : "repeat(".concat(count, ", 1fr)");

  var _theme$utils$responsi = theme.utils.responsiveRange({
    below: collapseBelow
  }),
      _theme$utils$responsi2 = _slicedToArray(_theme$utils$responsi, 4),
      collapseOnMobile = _theme$utils$responsi2[0],
      collapseOnTablet = _theme$utils$responsi2[1],
      collapseOnDesktop = _theme$utils$responsi2[2],
      collapseOnWide = _theme$utils$responsi2[3];

  return /*#__PURE__*/jsx(Box, _objectSpread({
    ref: forwardedRef,
    className: css(theme.utils.resolveResponsiveProps({
      alignItems: alignItems,
      display: 'grid',
      gap: theme.utils.mapResponsiveScale(gap, theme.spacing),
      gridTemplateColumns: collapseBelow ? theme.utils.optimizeResponsiveArray([collapseOnMobile ? null : gridTemplateColumns, collapseOnTablet ? null : gridTemplateColumns, collapseOnDesktop ? null : gridTemplateColumns, collapseOnWide ? null : gridTemplateColumns]) : gridTemplateColumns,
      // fix flex overflow bug that prevents text truncation
      '> *': {
        minWidth: 0
      }
    })),
    data: data
  }, props));
});

export { Columns };