function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
import _omit from "ramda/src/omit";
import _isNil from "ramda/src/isNil";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import styled, { css } from 'styled-components';
import { isUndefined } from '../../common/utils';
var isNumber = function isNumber(x) {
  return x === parseInt(x, 10);
};
var getSizeStyles = function getSizeStyles(size) {
  var oneCol = 100 / 12;
  if (isUndefined(size)) {
    return null;
  }
  if (size === 'unset') {
    return "\n      max-width: none;\n      flex-basis: auto;\n    ";
  }
  if (isNumber(size)) {
    var percentage = "".concat(oneCol * size, "%");
    return "\n      max-width: ".concat(percentage, ";\n      flex-basis: ").concat(percentage, ";\n    ");
  }
  return "\n    max-width: ".concat(size, ";\n    flex-basis: ").concat(size, ";\n  ");
};
var getGutterStyles = function getGutterStyles(theme, gutter, direction) {
  if (direction === 'column' || direction === 'column-reverse') {
    return "\n      & > *:not(:first-child) {\n        padding-top: ".concat(theme.spacing.unit(gutter), "px;\n      }\n    ");
  }
  return "\n    margin-left: -".concat(theme.spacing.unit(gutter / 2), "px;\n    margin-right: -").concat(theme.spacing.unit(gutter / 2), "px;\n\n    & > * {\n      padding-left: ").concat(theme.spacing.unit(gutter / 2), "px;\n      padding-right: ").concat(theme.spacing.unit(gutter / 2), "px;\n\n      &:not(:first-child) {\n        padding-top: 0;\n      }\n    }\n  ");
};
var getGapStyles = function getGapStyles(theme, gap) {
  var gapStyle;
  if (!gap) {
    return '';
  }
  if (typeof gap === 'number') {
    gapStyle = "".concat(theme.spacing.unit(gap), "px;");
  } else if (typeof gap === 'string') {
    gapStyle = gap;
  } else {
    gapStyle = "".concat(theme.spacing.unit(gap.row), "px ").concat(theme.spacing.unit(gap.column), "px;");
  }
  return ":not(:empty) { gap: ".concat(gapStyle, "; }");
};
var getContainerStyles = function getContainerStyles(p) {
  return "\n  display: ".concat(p.hidden ? 'none' : 'flex', ";\n  ").concat(p.width ? "width: ".concat(isNumber(p.width) ? "".concat(p.theme.spacing.unit(p.width), "px") : p.width) : '', ";\n  ").concat(p.height ? "height: ".concat(isNumber(p.height) ? "".concat(p.theme.spacing.unit(p.height), "px") : p.height) : '', ";\n  ").concat(p.direction ? "flex-direction: ".concat(p.direction, ";") : '', "\n  ").concat(p.wrap ? "flex-wrap: ".concat(p.wrap, ";") : '', "\n  ").concat(p.justifyContent ? "justify-content: ".concat(p.justifyContent, ";") : '', "\n  ").concat(p.alignItems ? "align-items: ".concat(p.alignItems, ";") : '', "\n  ").concat(p.alignContent ? "align-content: ".concat(p.alignContent, ";") : '', "\n  ").concat(p.gutter ? getGutterStyles(p.theme, p.gutter, p.direction) : '', "\n  ").concat(getGapStyles(p.theme, p.gap), "\n");
};
var getItemStyles = function getItemStyles(p) {
  return "\n  ".concat(p.size ? getSizeStyles(p.size) : '', "\n  ").concat(p.width ? "width: ".concat(isNumber(p.width) ? "".concat(p.theme.spacing.unit(p.width), "px") : p.width) : '', ";\n  ").concat(p.height ? "height: ".concat(isNumber(p.height) ? "".concat(p.theme.spacing.unit(p.height), "px") : p.height) : '', ";\n  ").concat(p.alignSelf ? "align-self: ".concat(p.alignSelf, ";") : '', "\n  ").concat(!_isNil(p.order) ? "order: ".concat(p.order, ";") : '', "\n  ").concat(!_isNil(p.grow) ? "flex-grow: ".concat(p.grow, ";") : '', "\n  ").concat(!_isNil(p.shrink) ? "flex-shrink: ".concat(p.shrink, ";") : '', "\n  ").concat(p.basis ? "flex-basis: ".concat(p.basis, ";") : '', "\n  ").concat(p.flex ? "flex: ".concat(p.flex, ";") : '', "\n  ").concat(p.align ? "align-self: ".concat(p.align, ";") : '', "\n  ").concat(p.hidden ? 'display: none;' : '', "\n");
};
var sanitizeProps = _omit(['align', 'size', 'height', 'direction', 'wrap', 'contain', 'container', 'item', 'gap', 'gutter', 'alignContent', 'alignItems', 'alignSelf', 'grow', 'shrink', 'sm', 'md', 'lg', 'xl', 'basis', 'order', 'justifyContent', 'width', 'flex', 'hidden']);
var SanitizedDiv = React.forwardRef(function (props, ref) {
  return React.createElement("div", _extends({}, sanitizeProps(props), {
    ref: ref
  }));
});
var getStylesForSize = function getStylesForSize(size) {
  return css(["", "{", " ", "}"], function (p) {
    return p.theme.media.greaterThan(p.theme.breakpoints[size]);
  }, function (p) {
    return p.container ? getContainerStyles(_objectSpread(_objectSpread({}, p), p[size])) : '';
  }, function (p) {
    return p.item ? getItemStyles(_objectSpread(_objectSpread({}, p), p[size])) : '';
  });
};
var StyledFlexbox = styled(SanitizedDiv).withConfig({
  displayName: "Flexbox__StyledFlexbox",
  componentId: "sc-1ob4g1e-0"
})(["box-sizing:border-box;", " ", " ", " ", " ", " ", ""], function (p) {
  return p.container ? getContainerStyles(p) : '';
}, function (p) {
  return p.item ? getItemStyles(p) : '';
}, function (p) {
  return p.sm ? getStylesForSize('sm') : '';
}, function (p) {
  return p.md ? getStylesForSize('md') : '';
}, function (p) {
  return p.lg ? getStylesForSize('lg') : '';
}, function (p) {
  return p.xl ? getStylesForSize('xl') : '';
});
export var Flexbox = React.forwardRef(function (props, ref) {
  return React.createElement(StyledFlexbox, _extends({}, props, {
    ref: ref
  }));
});
Flexbox.displayName = 'Flexbox';