powr-sdk-web 1.3.0 → 1.4.0

package/dist/activity/index.js

@@ -0,0 +1,118 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var PowrBaseActivity = function PowrBaseActivity(_ref) {
+  var tasks = _ref.tasks,
+    onTaskUpdate = _ref.onTaskUpdate,
+    onAddTask = _ref.onAddTask;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    editingTaskId = _useState2[0],
+    setEditingTaskId = _useState2[1];
+  var _useState3 = (0, _react.useState)(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    editedTaskText = _useState4[0],
+    setEditedTaskText = _useState4[1];
+  var handleEdit = function handleEdit(task) {
+    setEditingTaskId(task.id);
+    setEditedTaskText(task.task);
+  };
+  var handleSave = function handleSave(taskId) {
+    if (onTaskUpdate) {
+      onTaskUpdate(taskId, {
+        task: editedTaskText
+      });
+    }
+    setEditingTaskId(null);
+  };
+  var getStatusDot = function getStatusDot(status) {
+    return status === "Completed" ? "bg-cyan-500" : "bg-yellow-400";
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "bg-white p-6 rounded-xl shadow-md"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "flex justify-between items-center mb-4"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h2", {
+    className: "text-xl font-semibold"
+  }, "Project Tasks"), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text-sm text-gray-500"
+  }, "Manage and track project tasks")), /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: onAddTask,
+    className: "bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md text-sm"
+  }, "+ Add Task")), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "overflow-x-auto"
+  }, /*#__PURE__*/_react["default"].createElement("table", {
+    className: "min-w-full text-sm"
+  }, /*#__PURE__*/_react["default"].createElement("thead", {
+    className: "text-left text-gray-500 border-b"
+  }, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("th", {
+    className: "py-2"
+  }, "Status"), /*#__PURE__*/_react["default"].createElement("th", {
+    className: "py-2"
+  }, "Task"), /*#__PURE__*/_react["default"].createElement("th", {
+    className: "py-2"
+  }, "Assignee"), /*#__PURE__*/_react["default"].createElement("th", {
+    className: "py-2"
+  }, "Created"), /*#__PURE__*/_react["default"].createElement("th", {
+    className: "py-2"
+  }, "Priority"))), /*#__PURE__*/_react["default"].createElement("tbody", null, tasks.map(function (task) {
+    return /*#__PURE__*/_react["default"].createElement("tr", {
+      key: task.id,
+      className: "border-b last:border-b-0"
+    }, /*#__PURE__*/_react["default"].createElement("td", {
+      className: "py-3 align-middle"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "flex items-center gap-2"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "w-2.5 h-2.5 rounded-full ".concat(getStatusDot(task.status))
+    }), /*#__PURE__*/_react["default"].createElement("span", null, task.status))), /*#__PURE__*/_react["default"].createElement("td", {
+      className: "py-3 align-middle"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "flex items-center"
+    }, editingTaskId === task.id ? /*#__PURE__*/_react["default"].createElement("input", {
+      className: "border px-2 py-1 rounded w-full",
+      value: editedTaskText,
+      onChange: function onChange(e) {
+        return setEditedTaskText(e.target.value);
+      },
+      onBlur: function onBlur() {
+        return handleSave(task.id);
+      },
+      autoFocus: true
+    }) : /*#__PURE__*/_react["default"].createElement("span", {
+      className: "cursor-pointer font-medium",
+      onClick: function onClick() {
+        return handleEdit(task);
+      }
+    }, task.task))), /*#__PURE__*/_react["default"].createElement("td", {
+      className: "py-3 align-middle"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "flex items-center gap-2"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "w-6 h-6 rounded-full bg-orange-100 flex items-center justify-center text-xs text-orange-700"
+    }, task.assignee.charAt(0).toUpperCase()), /*#__PURE__*/_react["default"].createElement("span", null, task.assignee))), /*#__PURE__*/_react["default"].createElement("td", {
+      className: "py-3 align-middle"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "flex items-center h-full"
+    }, task.created)), /*#__PURE__*/_react["default"].createElement("td", {
+      className: "py-3 align-middle"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "flex items-center h-full"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "px-2 py-1 rounded-full bg-blue-100 text-blue-700 text-xs"
+    }, task.priority))));
+  })))));
+};
+var _default = exports["default"] = PowrBaseActivity;

package/dist/comments/components/CommentForm.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Loader = _interopRequireDefault(require("./Loader"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CommentForm = function CommentForm(_ref) {
+  var newComment = _ref.newComment,
+    setNewComment = _ref.setNewComment,
+    handlePostComment = _ref.handlePostComment,
+    isPosting = _ref.isPosting,
+    isUploading = _ref.isUploading,
+    selectedFiles = _ref.selectedFiles,
+    setShowUploadModal = _ref.setShowUploadModal,
+    handleRemoveUploadedFile = _ref.handleRemoveUploadedFile;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, selectedFiles.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "powrbase-attachment-preview",
+    style: {
+      marginTop: '15px',
+      padding: '10px',
+      border: '1px solid #eee',
+      borderRadius: '8px',
+      backgroundColor: '#f9f9f9',
+      marginBottom: '15px'
+    }
+  }, selectedFiles.map(function (file, index) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index,
+      style: {
+        marginBottom: '10px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '10px'
+      }
+    }, file.type && file.type.startsWith('image/') ? /*#__PURE__*/_react["default"].createElement("img", {
+      src: file.url,
+      alt: file.name,
+      style: {
+        width: '50px',
+        height: '50px',
+        objectFit: 'cover',
+        borderRadius: '4px'
+      }
+    }) : /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        fontSize: '24px'
+      }
+    }, "\uD83D\uDCCE"), /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        fontSize: '14px',
+        flexGrow: 1
+      }
+    }, file.name), /*#__PURE__*/_react["default"].createElement("button", {
+      onClick: function onClick() {
+        return handleRemoveUploadedFile(index);
+      },
+      style: {
+        border: 'none',
+        background: 'none',
+        cursor: 'pointer',
+        fontSize: '18px',
+        color: '#888'
+      }
+    }, "\xD7"));
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "powrbase-comment-form",
+    style: {
+      display: 'flex',
+      alignItems: 'flex-end',
+      marginTop: selectedFiles.length > 0 ? '0' : '15px',
+      padding: '8px 15px',
+      backgroundColor: selectedFiles.length > 0 ? 'transparent' : '#ffffff',
+      borderRadius: '25px',
+      gap: '8px',
+      boxShadow: selectedFiles.length > 0 ? 'none' : '0 2px 8px rgba(0,0,0,0.05)'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    style: {
+      borderRadius: '50%',
+      width: '35px',
+      height: '35px',
+      border: 'none',
+      backgroundColor: 'transparent',
+      color: isUploading ? '#cccccc' : '#555',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      cursor: isUploading ? 'not-allowed' : 'pointer',
+      fontSize: '20px',
+      flexShrink: 0
+    },
+    onClick: function onClick() {
+      return setShowUploadModal(true);
+    },
+    disabled: isUploading || isPosting
+  }, "+"), /*#__PURE__*/_react["default"].createElement("textarea", {
+    className: "powrbase-comment-input",
+    placeholder: selectedFiles.length > 0 ? 'Add a caption...' : 'Write a comment...',
+    value: newComment,
+    onChange: function onChange(e) {
+      return setNewComment(e.target.value);
+    },
+    rows: 1,
+    style: {
+      flexGrow: 1,
+      border: 'none',
+      outline: 'none',
+      padding: '8px 0',
+      fontSize: '16px',
+      resize: 'none',
+      backgroundColor: 'transparent',
+      minHeight: '20px',
+      maxHeight: '100px',
+      overflowY: 'auto'
+    }
+  }), /*#__PURE__*/_react["default"].createElement("button", {
+    className: "powrbase-comment-submit",
+    onClick: handlePostComment,
+    disabled: isPosting || isUploading || !newComment.trim() && selectedFiles.length === 0,
+    style: {
+      borderRadius: '50%',
+      width: '35px',
+      height: '35px',
+      border: 'none',
+      backgroundColor: isPosting || isUploading || !newComment.trim() && selectedFiles.length === 0 ? '#cccccc' : '#28a745',
+      color: 'white',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      cursor: isPosting || isUploading || !newComment.trim() && selectedFiles.length === 0 ? 'not-allowed' : 'pointer',
+      fontSize: '18px',
+      flexShrink: 0,
+      transition: 'background-color 0.2s ease-in-out'
+    }
+  }, isPosting || isUploading ? /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
+    size: "small",
+    color: "white"
+  }) : "\u25BA")));
+};
+CommentForm.propTypes = {
+  newComment: _propTypes["default"].string.isRequired,
+  setNewComment: _propTypes["default"].func.isRequired,
+  handlePostComment: _propTypes["default"].func.isRequired,
+  isPosting: _propTypes["default"].bool,
+  isUploading: _propTypes["default"].bool,
+  selectedFiles: _propTypes["default"].array.isRequired,
+  setShowUploadModal: _propTypes["default"].func.isRequired,
+  handleRemoveUploadedFile: _propTypes["default"].func.isRequired
+};
+var _default = exports["default"] = CommentForm;

package/dist/comments/components/CommentItem.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CommentItem = function CommentItem(_ref) {
+  var comment = _ref.comment,
+    showTimestamp = _ref.showTimestamp,
+    onImageClick = _ref.onImageClick;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "powrbase-comment",
+    style: {
+      marginBottom: '12px',
+      padding: '8px 75px 8px 12px',
+      borderRadius: '18px 18px 5px 18px',
+      backgroundColor: '#ffffff',
+      wordBreak: 'break-word',
+      maxWidth: '80%',
+      marginRight: 'auto',
+      boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'relative',
+      alignSelf: 'flex-start',
+      width: 'fit-content',
+      minWidth: '0'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "powrbase-comment-content"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "powrbase-comment-header"
+  }, comment.comment && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "powrbase-comment-text",
+    style: {
+      fontSize: '15px',
+      lineHeight: '1.4',
+      marginTop: '5px'
+    }
+  }, comment.comment), comment.files && Array.isArray(comment.files) && comment.files.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "powrbase-comment-attachments",
+    style: {
+      marginTop: '10px'
+    }
+  }, comment.files.map(function (file, index) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index,
+      style: {
+        marginBottom: '5px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      onClick: function onClick() {
+        return file.type && file.type.startsWith('image/') ? onImageClick(file.url) : window.open(file.url, '_blank');
+      },
+      style: {
+        cursor: 'pointer'
+      }
+    }, file.type && file.type.startsWith('image/') ? /*#__PURE__*/_react["default"].createElement("img", {
+      src: file.url,
+      alt: file.name,
+      style: {
+        maxWidth: '200px',
+        maxHeight: '200px',
+        height: 'auto',
+        borderRadius: '8px',
+        cursor: 'pointer'
+      }
+    }) : /*#__PURE__*/_react["default"].createElement("a", {
+      href: file.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: {
+        textDecoration: 'none',
+        color: '#007bff',
+        fontSize: '14px'
+      }
+    }, "\uD83D\uDCCE ", file.name, " (", file.size ? (file.size / 1024).toFixed(2) + ' KB' : 'N/A', ")")));
+  })))), showTimestamp && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "powrbase-comment-time",
+    style: {
+      fontSize: '11px',
+      color: '#888',
+      position: 'absolute',
+      bottom: '2px',
+      right: '10px'
+    }
+  }, comment.formattedTime || 'Time unavailable'));
+};
+CommentItem.propTypes = {
+  comment: _propTypes["default"].shape({
+    comment: _propTypes["default"].string,
+    files: _propTypes["default"].array,
+    formattedTime: _propTypes["default"].string
+  }).isRequired,
+  showTimestamp: _propTypes["default"].bool,
+  onImageClick: _propTypes["default"].func.isRequired
+};
+var _default = exports["default"] = CommentItem;

package/dist/comments/components/CommentList.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _CommentItem = _interopRequireDefault(require("./CommentItem"));
+var _Loader = _interopRequireDefault(require("./Loader"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CommentList = function CommentList(_ref) {
+  var comments = _ref.comments,
+    isLoading = _ref.isLoading,
+    showTimestamp = _ref.showTimestamp,
+    onImageClick = _ref.onImageClick;
+  if (isLoading) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "powrbase-loading",
+      style: {
+        textAlign: 'center',
+        color: '#555',
+        marginTop: '20px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '10px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
+      size: "medium",
+      color: "#28a745"
+    }));
+  }
+  if (comments.length === 0) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "powrbase-no-comments",
+      style: {
+        textAlign: 'center',
+        color: '#555',
+        marginTop: '20px'
+      }
+    }, "No comments yet. Be the first to comment!");
+  }
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "powrbase-comments-list",
+    style: {
+      flexGrow: 1,
+      overflowY: 'auto',
+      paddingRight: '10px',
+      paddingLeft: '5px',
+      scrollbarWidth: 'none',
+      msOverflowStyle: 'none',
+      '&::-webkit-scrollbar': {
+        display: 'none'
+      },
+      minHeight: '400px'
+    }
+  }, comments.map(function (dateGroup, groupIndex) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: dateGroup.date || groupIndex
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        textAlign: 'center',
+        margin: '15px 0',
+        position: 'sticky',
+        top: '0',
+        zIndex: 1
+      }
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        backgroundColor: '#e0e0e0',
+        padding: '4px 12px',
+        borderRadius: '15px',
+        fontSize: '12px',
+        color: '#555',
+        fontWeight: '500'
+      }
+    }, dateGroup.date)), dateGroup.comments.map(function (comment) {
+      return /*#__PURE__*/_react["default"].createElement(_CommentItem["default"], {
+        key: comment._id,
+        comment: comment,
+        showTimestamp: showTimestamp,
+        onImageClick: onImageClick
+      });
+    }));
+  }));
+};
+CommentList.propTypes = {
+  comments: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    date: _propTypes["default"].string,
+    comments: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+      _id: _propTypes["default"].string.isRequired,
+      comment: _propTypes["default"].string,
+      files: _propTypes["default"].array,
+      formattedTime: _propTypes["default"].string
+    }))
+  })).isRequired,
+  isLoading: _propTypes["default"].bool,
+  showTimestamp: _propTypes["default"].bool,
+  onImageClick: _propTypes["default"].func.isRequired
+};
+var _default = exports["default"] = CommentList;

package/dist/comments/components/ImageModal.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var ImageModal = function ImageModal(_ref) {
+  var selectedImageUrl = _ref.selectedImageUrl,
+    onClose = _ref.onClose;
+  if (!selectedImageUrl) return null;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      zIndex: 1000
+    },
+    onClick: onClose
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: selectedImageUrl,
+    alt: "Enlarged view",
+    style: {
+      maxWidth: '90%',
+      maxHeight: '90%',
+      objectFit: 'contain',
+      borderRadius: '8px'
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }));
+};
+ImageModal.propTypes = {
+  selectedImageUrl: _propTypes["default"].string,
+  onClose: _propTypes["default"].func.isRequired
+};
+var _default = exports["default"] = ImageModal;

package/dist/comments/components/Loader.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Loader = function Loader(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#28a745' : _ref$color;
+  var sizeMap = {
+    small: '20px',
+    medium: '30px',
+    large: '40px'
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: '10px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: sizeMap[size],
+      height: sizeMap[size],
+      border: "3px solid ".concat(color, "20"),
+      borderTop: "3px solid ".concat(color),
+      borderRadius: '50%',
+      animation: 'spin 1s linear infinite',
+      '@keyframes spin': {
+        '0%': {
+          transform: 'rotate(0deg)'
+        },
+        '100%': {
+          transform: 'rotate(360deg)'
+        }
+      }
+    }
+  }));
+};
+Loader.propTypes = {
+  size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
+  color: _propTypes["default"].string
+};
+var _default = exports["default"] = Loader;