@ntragas/pouncejstest/dist/cjs/components/Flex/Flex.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.Flex = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

var _Box = _interopRequireDefault(require("../Box"));

var _utils = require("./utils");

/**
 * Extends <a href="/#/Box">Box</a>
 *
 * Responsive flexbox layout component. You should use this anytime you want a flex container or
 * wrapper around a certain layout
 */
var Flex = /*#__PURE__*/_react.default.forwardRef(function Flex(props, ref) {
  var direction = props.direction,
      justify = props.justify,
      align = props.align,
      inline = props.inline,
      wrap = props.wrap,
      spacing = props.spacing,
      shrink = props.shrink,
      grow = props.grow,
      basis = props.basis,
      sx = props.sx,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["direction", "justify", "align", "inline", "wrap", "spacing", "shrink", "grow", "basis", "sx"]);
  var itemSpacingProps = (0, _utils.useItemSpacingProps)(spacing, direction || rest.flexDirection, sx);
  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
    display: inline ? 'inline-flex' : 'flex',
    ref: ref,
    flexDirection: direction,
    justifyContent: justify,
    alignItems: align,
    flexWrap: wrap,
    flexShrink: shrink,
    flexGrow: grow,
    flexBasis: basis
  }, itemSpacingProps, rest));
});

exports.Flex = Flex;
var _default = Flex;
exports.default = _default;