import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import React__default, { useContext } from 'react';
import _pt from 'prop-types';

var PlaceholderContext = React__default.createContext({
  space: "",
  animation: ""
});
var Placeholder = function Placeholder(_ref) {
  var children = _ref.children,
      Left = _ref.Left,
      Right = _ref.Right,
      _ref$space = _ref.space,
      space = _ref$space === void 0 ? "0.5rem" : _ref$space,
      _ref$animation = _ref.animation,
      animation = _ref$animation === void 0 ? "" : _ref$animation,
      props = _objectWithoutProperties(_ref, ["children", "Left", "Right", "space", "animation"]);

  return jsx(PlaceholderContext.Provider, {
    value: {
      space: space,
      animation: animation
    }
  }, jsx("div", _extends({
    css: {
      display: "flex",
      flexDirection: "row"
    }
  }, props), Left && jsx("div", {
    css: {
      marginRight: space,
      display: "block"
    }
  }, jsx(Left, null)), jsx("div", {
    css: {
      flex: 1
    }
  }, children), Right && jsx("div", {
    css: {
      marginLeft: space,
      display: "block"
    }
  }, jsx(Right, null))));
};
Placeholder.propTypes = {
  Left: _pt.elementType,
  Right: _pt.elementType,
  space: _pt.string,
  animation: _pt.string
};

var placeholderLineCss = function placeholderLineCss(theme) {
  return {
    background: theme.colors.grey[30],
    height: theme.fontSizes[3]
  };
};

var PlaceholderBox = function PlaceholderBox(_ref2) {
  var _ref2$height = _ref2.height,
      height = _ref2$height === void 0 ? "14px" : _ref2$height,
      _ref2$width = _ref2.width,
      width = _ref2$width === void 0 ? "100%" : _ref2$width,
      noSpace = _ref2.noSpace,
      radii = _ref2.radii,
      props = _objectWithoutProperties(_ref2, ["height", "width", "noSpace", "radii"]);

  var _useContext = useContext(PlaceholderContext),
      space = _useContext.space,
      animation = _useContext.animation;

  var marginBottom = noSpace ? 0 : space;
  return jsx("div", _extends({
    css: function css(theme) {
      return [placeholderLineCss(theme), {
        width: width,
        height: height,
        marginBottom: marginBottom,
        borderRadius: radii || theme.radii[2],
        animation: animation
      }];
    }
  }, props));
};
PlaceholderBox.propTypes = {
  width: _pt.string,
  height: _pt.string,
  noSpace: _pt.bool,
  radii: _pt.string
};
Placeholder.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Placeholder",
  "props": {
    "space": {
      "defaultValue": {
        "value": "\"0.5rem\"",
        "computed": false
      },
      "required": false
    },
    "animation": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "required": false
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Placeholder/Placeholder.tsx"] = {
    name: "Placeholder",
    docgenInfo: Placeholder.__docgenInfo,
    path: "src/components/Placeholder/Placeholder.tsx"
  };
}

PlaceholderBox.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "PlaceholderBox",
  "props": {
    "height": {
      "defaultValue": {
        "value": "\"14px\"",
        "computed": false
      },
      "required": false
    },
    "width": {
      "defaultValue": {
        "value": "\"100%\"",
        "computed": false
      },
      "required": false
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Placeholder/Placeholder.tsx"] = {
    name: "PlaceholderBox",
    docgenInfo: PlaceholderBox.__docgenInfo,
    path: "src/components/Placeholder/Placeholder.tsx"
  };
}

export { Placeholder, PlaceholderBox };
//# sourceMappingURL=Placeholder.esm.js.map
