@mohamed-karawia/library 0.1.0

package/dist/stories/Forms/NewProfile/NewProfile.js

@@ -0,0 +1,450 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _formik = require("formik");
+
+var _DropZone = _interopRequireDefault(require("../../Common Inputs/DropZone"));
+
+var _presets = _interopRequireDefault(require("./presets.json"));
+
+var _reset = _interopRequireDefault(require("../../assets/images/reset.png"));
+
+var _util = require("../../helpers/util");
+
+var _themeItem, _preset;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var backgroundColors = ["red", "blue", "green", "white", "yellow", "gray"];
+var customStyles = [{
+  name: "fontColor",
+  placeholder: "Font Color"
+}, {
+  name: "serverFontColor",
+  placeholder: "Server Font Color"
+}, {
+  name: "fontSize",
+  placeholder: "Font Size"
+}, {
+  name: "serverFontSize",
+  placeholder: "Server Font Size"
+}, {
+  name: "borderRadius",
+  placeholder: "Border Radius"
+}, {
+  name: "backgroundColor",
+  placeholder: "Background Color"
+}];
+
+var NewProfile = function NewProfile() {
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      profileUrl = _useState2[0],
+      setUrl = _useState2[1];
+
+  var setProfilePic = function setProfilePic(event) {
+    var reader = new FileReader();
+    reader.readAsDataURL(event.target.files[0]);
+
+    reader.onload = function (_event) {
+      setUrl(reader.result);
+    };
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "container",
+    style: style.container
+  }, /*#__PURE__*/_react.default.createElement("h2", {
+    className: "page-title"
+  }, "Create Profile"), /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+    initialValues: {
+      profilePicture: "",
+      name: "",
+      serverName: "",
+      fontColor: "",
+      fontSize: "",
+      serverFontColor: "",
+      serverFontSize: "",
+      borderRadius: "",
+      preset: "",
+      presets: _presets.default,
+      backgroundColor: "",
+      backgroundColors: backgroundColors
+    },
+    onSubmit: function onSubmit(values, actions) {
+      setTimeout(function () {
+        alert(JSON.stringify(values, null, 2));
+        actions.setSubmitting(false);
+      }, 1000);
+    }
+  }, function (props) {
+    return /*#__PURE__*/_react.default.createElement("form", {
+      onSubmit: props.handleSubmit
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: style.headerSection
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flex: "1"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: style.profilePicture
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      style: {
+        height: 70,
+        width: 70,
+        borderRadius: "50%",
+        objectFit: 'contain',
+        backgroundColor: 'grey'
+      },
+      src: profileUrl || "https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png"
+    })), /*#__PURE__*/_react.default.createElement("input", {
+      style: {
+        marginTop: "3px"
+      },
+      type: "file",
+      onChange: function onChange(e) {
+        return setProfilePic(e);
+      }
+    })), /*#__PURE__*/_react.default.createElement(_formik.Field, {
+      type: "text",
+      onChange: props.handleChange,
+      onBlur: props.handleBlur,
+      value: props.values.name,
+      name: "name",
+      placeholder: "username",
+      style: style.usernameSection
+    })), props.errors.name && /*#__PURE__*/_react.default.createElement("div", {
+      id: "feedback"
+    }, props.errors.name), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+      style: style.resetRow
+    }, /*#__PURE__*/_react.default.createElement("h2", {
+      className: "page-title"
+    }, "Create Server"), /*#__PURE__*/_react.default.createElement("img", {
+      onClick: function onClick() {
+        return props.setFieldValue("serverName", "");
+      },
+      style: style.resetButton,
+      src: _reset.default
+    })), /*#__PURE__*/_react.default.createElement(_formik.Field, {
+      type: "text",
+      onChange: props.handleChange,
+      onBlur: props.handleBlur,
+      value: props.values.serverName,
+      name: "serverName",
+      placeholder: "serverName",
+      style: style.serverSection
+    }), props.errors.serverName && /*#__PURE__*/_react.default.createElement("div", {
+      id: "feedback"
+    }, props.errors.serverName)), /*#__PURE__*/_react.default.createElement("div", {
+      style: style.resetRow
+    }, /*#__PURE__*/_react.default.createElement("h2", {
+      className: "page-title"
+    }, "Upload Logo")), /*#__PURE__*/_react.default.createElement(_DropZone.default, null), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+      style: style.resetRow
+    }, /*#__PURE__*/_react.default.createElement("h2", {
+      className: "page-title"
+    }, "Presets"), /*#__PURE__*/_react.default.createElement("img", {
+      onClick: function onClick() {
+        props.setFieldValue("preset", "");
+      },
+      style: style.resetButton,
+      src: _reset.default
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      style: style.presets
+    }, props.values.presets.map(function (item, index) {
+      var preset = props.values.preset;
+      var borderColor = (preset === null || preset === void 0 ? void 0 : preset.serverName) === item.serverName ? {
+        border: "3px solid blue"
+      } : {};
+      return /*#__PURE__*/_react.default.createElement("div", {
+        onClick: function onClick() {
+          props.setFieldValue("preset", item);
+        },
+        key: item.id,
+        style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, style.preset), borderColor), {}, {
+          cursor: "pointer",
+          marginRight: (index + 1) % 3 ? 8 : 2
+        })
+      }, /*#__PURE__*/_react.default.createElement("h5", {
+        style: style.presetHeading
+      }, item.serverName), /*#__PURE__*/_react.default.createElement("img", {
+        style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style.presetImage), {}, {
+          cursor: "pointer"
+        }),
+        src: item.imageUrl,
+        alt: item.serverName
+      }), /*#__PURE__*/_react.default.createElement("h5", {
+        style: {
+          textAlign: "center"
+        }
+      }, "Description will be shown here"));
+    }))), /*#__PURE__*/_react.default.createElement("div", {
+      style: style.resetRow
+    }, /*#__PURE__*/_react.default.createElement("h2", {
+      className: "page-title"
+    }, "Theme"), /*#__PURE__*/_react.default.createElement("img", {
+      onClick: function onClick() {
+        return props.setFieldValue("backgroundColor", "");
+      },
+      style: style.resetButton,
+      src: _reset.default
+    })), /*#__PURE__*/_react.default.createElement(_formik.Field, {
+      type: "text",
+      name: "search",
+      placeholder: "Search...",
+      onChange: function onChange(e) {
+        var allValue = [].concat(backgroundColors);
+
+        if (e.target.value.trim()) {
+          allValue = backgroundColors.find(function (item) {
+            return (0, _util.stringSearch)(e.target.value, item);
+          });
+
+          if (allValue) {
+            allValue = [allValue];
+          } else {
+            allValue = [];
+          }
+        }
+
+        props.setFieldValue("backgroundColors", allValue);
+      },
+      style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style.serverSection), {}, {
+        marginBottom: 12
+      })
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: style.theme
+    }, props.values.backgroundColors.map(function (item, index) {
+      var border = props.values.backgroundColor === item ? {
+        border: "3px solid black"
+      } : {};
+      return /*#__PURE__*/_react.default.createElement("div", {
+        onClick: function onClick() {
+          return props.setFieldValue("backgroundColor", item);
+        },
+        key: "".concat(index, "Colors"),
+        style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, style.themeItem), {}, {
+          backgroundColor: item
+        }, border), {}, {
+          marginRight: (index + 1) % 3 ? 8 : 2
+        })
+      }, /*#__PURE__*/_react.default.createElement("h5", {
+        style: style.themeHeading
+      }, item));
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      style: style.resetRow
+    }, /*#__PURE__*/_react.default.createElement("h2", {
+      className: "page-title"
+    }, "Styles"), /*#__PURE__*/_react.default.createElement("img", {
+      onClick: function onClick() {
+        props.setFieldValue("backgroundColor", "");
+        props.setFieldValue("fontColor", "");
+        props.setFieldValue("fontSize", "");
+        props.setFieldValue("serverFontSize", "");
+        props.setFieldValue("serverFontColor", "");
+        props.setFieldValue("borderRadius", "");
+      },
+      style: style.resetButton,
+      src: _reset.default
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      style: style.theme
+    }, customStyles.map(function (item, index) {
+      return /*#__PURE__*/_react.default.createElement(_formik.Field, {
+        key: "".concat(index, "styles"),
+        placeholder: item.placeholder,
+        onChange: function onChange(e) {
+          return props.setFieldValue(e.target.name, e.target.value);
+        },
+        name: item.name,
+        style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style.themeItem), {}, {
+          paddingLeft: 12
+        })
+      });
+    })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h2", {
+      className: "page-title"
+    }, "Preview"), /*#__PURE__*/_react.default.createElement("div", {
+      style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style.preview), {}, {
+        backgroundColor: props.values.backgroundColor
+      })
+    }, props.values.name && /*#__PURE__*/_react.default.createElement("h3", {
+      style: {
+        fontSize: props.values.fontSize,
+        color: props.values.fontColor
+      }
+    }, props.values.name), props.values.serverName && /*#__PURE__*/_react.default.createElement("h3", {
+      style: {
+        fontSize: props.values.serverFontSize,
+        color: props.values.serverFontColor
+      }
+    }, props.values.serverName), (props.values.imageUrl || props.values.preset) && /*#__PURE__*/_react.default.createElement("img", {
+      style: {
+        height: "auto",
+        width: "80%",
+        marginTop: '8px',
+        borderRadius: props.values.borderRadius
+      },
+      src: props.values.preset.imageUrl || props.values.imageUrl
+    }))), /*#__PURE__*/_react.default.createElement("button", {
+      style: style.buttonSubmit,
+      type: "submit"
+    }, "Submit"));
+  }));
+};
+
+var style = {
+  profilePicture: {
+    borderRadius: "50%",
+    height: 70,
+    marginLeft: 10,
+    width: 70,
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "16px 18px",
+    backgroundPosition: "98% 50%",
+    cursor: "auto"
+  },
+  resetRow: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  theme: {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "space-between",
+    width: "100%",
+    marginLeft: "auto",
+    marginRight: "auto"
+  },
+  resetButton: {
+    width: 30,
+    height: 30,
+    float: "right"
+  },
+  preview: {
+    width: "99%",
+    minHeight: 400,
+    border: "1px solid rgb(144, 144, 144)",
+    boxSizing: "border-box",
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "16px 18px",
+    backgroundPosition: "98% 50%",
+    cursor: "auto",
+    textAlign: "center"
+  },
+  buttonSubmit: {
+    marginRight: "10px",
+    border: "none",
+    height: 40,
+    width: 80,
+    marginTop: 24,
+    color: "white",
+    fontSize: 14,
+    fontWeight: 600,
+    float: "right",
+    backgroundColor: "#20bf55",
+    backgroundImage: "linear-gradient(315deg, #20bf55 0%, #01baef 74%)",
+    borderRadius: "4px",
+    boxShadow: "2px 2px #20bf55"
+  },
+  themeItem: (_themeItem = {
+    marginRight: 8,
+    marginTop: 8,
+    border: "2px solid black",
+    width: "14rem",
+    height: "3rem",
+    borderRadius: "5px"
+  }, (0, _defineProperty2.default)(_themeItem, "border", "1px solid rgb(144, 144, 144)"), (0, _defineProperty2.default)(_themeItem, "boxSizing", "border-box"), (0, _defineProperty2.default)(_themeItem, "backgroundRepeat", "no-repeat"), (0, _defineProperty2.default)(_themeItem, "backgroundSize", "16px 18px"), (0, _defineProperty2.default)(_themeItem, "alignItems", "center"), _themeItem),
+  themeHeading: {
+    position: "relative",
+    left: "46%",
+    bottom: "4px"
+  },
+  presets: {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    width: "100%",
+    justifyContent: "space-around"
+  },
+  presetImage: {
+    height: "10rem",
+    width: "100%",
+    cursor: "auto"
+  },
+  preset: (_preset = {
+    marginRight: 9,
+    marginTop: 8,
+    border: "2px solid black",
+    width: "14rem",
+    height: "17rem",
+    borderRadius: "5px"
+  }, (0, _defineProperty2.default)(_preset, "border", "1px solid rgb(144, 144, 144)"), (0, _defineProperty2.default)(_preset, "boxSizing", "border-box"), (0, _defineProperty2.default)(_preset, "backgroundRepeat", "no-repeat"), (0, _defineProperty2.default)(_preset, "backgroundSize", "16px 18px"), (0, _defineProperty2.default)(_preset, "backgroundPosition", "98% 50%"), (0, _defineProperty2.default)(_preset, "display", "flex"), (0, _defineProperty2.default)(_preset, "flexDirection", "column"), (0, _defineProperty2.default)(_preset, "justifyContent", "space-evenly"), (0, _defineProperty2.default)(_preset, "alignItems", "left"), _preset),
+  presetHeading: {
+    paddingLeft: "5.5rem"
+  },
+  serverSection: {
+    borderRadius: "5px",
+    border: "1px solid rgb(144, 144, 144)",
+    padding: "7px 14px",
+    boxSizing: "border-box",
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "16px 18px",
+    backgroundPosition: "98% 50%",
+    cursor: "auto",
+    width: "43.5rem"
+  },
+  usernameSection: {
+    flex: "1",
+    position: "relative",
+    bottom: 6,
+    borderRadius: "5px",
+    minWidth: "200px",
+    width: 100,
+    border: "1px solid rgb(144, 144, 144)",
+    padding: "7px 14px",
+    boxSizing: "border-box",
+    backgroundSize: "16px 18px",
+    backgroundPosition: "98% 50%",
+    cursor: "auto"
+  },
+  headerSection: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  resets: {
+    fontFamily: "arial",
+    boxSizing: "border-box"
+  },
+  container: {
+    maxWidth: "700px",
+    margin: "0 auto",
+    marginBottom: "100px"
+  },
+  profilePic: {
+    border: "1px solid #909090",
+    borderRadius: "4px",
+    padding: "5px 16px"
+  }
+};
+var _default = NewProfile;
+exports.default = _default;

package/dist/stories/Forms/NewProfile/NewProfile.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Profile = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _NewProfile = _interopRequireDefault(require("./NewProfile"));
+
+var _default = {
+  title: 'Forms/New Profile',
+  component: _NewProfile.default
+};
+exports.default = _default;
+
+var Profile = function Profile(args) {
+  return /*#__PURE__*/_react.default.createElement(_NewProfile.default, args);
+};
+
+exports.Profile = Profile;

package/dist/stories/Layout/Body/Body.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Left = _interopRequireDefault(require("../Left/Left"));
+
+var _Center = _interopRequireDefault(require("../Center/Center"));
+
+var _Right = _interopRequireDefault(require("../Right/Right"));
+
+var Body = function Body(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(StyledBody, null, children);
+};
+
+var StyledBody = (0, _styledComponents.default)('div')({
+  display: 'flex',
+  'align-items': 'flex-start'
+});
+var _default = Body;
+exports.default = _default;

package/dist/stories/Layout/Body/Body.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Body = _interopRequireDefault(require("./Body"));
+
+var _Left = _interopRequireDefault(require("../Left/Left"));
+
+var _Center = _interopRequireDefault(require("../Center/Center"));
+
+var _Right = _interopRequireDefault(require("../Right/Right"));
+
+var _default = {
+  title: "Layout/Body",
+  component: _Body.default
+};
+exports.default = _default;
+
+var Default = function Default(props) {
+  return /*#__PURE__*/_react.default.createElement(_Body.default, props, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Left")), /*#__PURE__*/_react.default.createElement(_Center.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Center")), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Right")));
+};
+
+exports.Default = Default;

package/dist/stories/Layout/Center/Center.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var Center = function Center(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(StyledCenter, null, children);
+};
+
+var _default = Center;
+exports.default = _default;
+var StyledCenter = (0, _styledComponents.default)('div')({
+  display: 'flex',
+  flex: '5',
+  'align-items': 'flex-start',
+  'flex-direction': 'column'
+});

package/dist/stories/Layout/Center/Center.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Center = _interopRequireDefault(require("./Center"));
+
+var _default = {
+  title: "Layout/Center",
+  component: _Center.default
+};
+exports.default = _default;
+
+var Default = function Default(props) {
+  return /*#__PURE__*/_react.default.createElement(_Center.default, props, /*#__PURE__*/_react.default.createElement("p", null, "Center"));
+};
+
+exports.Default = Default;

package/dist/stories/Layout/Head/Head.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var Head = function Head() {
+  return /*#__PURE__*/_react.default.createElement(StyledHead, null);
+};
+
+var _default = Head;
+exports.default = _default;
+var StyledHead = (0, _styledComponents.default)('div')({
+  height: '75px',
+  display: 'flex',
+  'align-items': 'flex-start'
+});

package/dist/stories/Layout/Head/Head.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Head = _interopRequireDefault(require("./Head"));
+
+var _default = {
+  title: 'Layout/Head',
+  component: _Head.default
+};
+exports.default = _default;
+
+var Default = function Default(props) {
+  return /*#__PURE__*/_react.default.createElement(_Head.default, props);
+};
+
+exports.Default = Default;

package/dist/stories/Layout/Left/Left.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _BaseMaterial = _interopRequireDefault(require("../../Containers/BaseMaterial"));
+
+var _templateObject;
+
+var Left = function Left(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(StyledLeft, null, children);
+};
+
+var _default = Left;
+exports.default = _default;
+
+var StyledLeft = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 2;\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  padding-left: 10px;\n  padding-right: 10px;\n  overflow: hidden;\n"])));