@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/react';
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 '@emotion/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 jsx(Box, _objectSpread({
    ref: forwardedRef,
    css: 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 };