@spark-web/columns/dist/spark-web-columns.cjs.dev.js

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var css = require('@emotion/css');
var box = require('@spark-web/box');
var theme = require('@spark-web/theme');
var ts = require('@spark-web/utils/ts');
var react = require('react');
var jsxRuntime = require('react/jsx-runtime');

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

var _excluded = ["alignY", "collapseBelow", "data", "gap", "template"];
var Columns = ts.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$1 = theme.useTheme();
  var alignItems = alignYToAlignItems(alignY);
  var count = react.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$1.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__*/jsxRuntime.jsx(box.Box, _objectSpread({
    ref: forwardedRef,
    className: css.css(theme$1.utils.resolveResponsiveProps({
      alignItems: alignItems,
      display: 'grid',
      gap: theme$1.utils.mapResponsiveScale(gap, theme$1.spacing),
      gridTemplateColumns: collapseBelow ? theme$1.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));
});

exports.Columns = Columns;