Update the lib directory

lib/Alert.js

@@ -18,25 +18,25 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var colors = {
-  blueGray: "bg-blue-gray-500",
-  gray: "bg-gray-500",
-  brown: "bg-brown-500",
-  deepOrange: "bg-deep-orange-500",
-  orange: "bg-orange-500",
-  amber: "bg-amber-500",
-  yellow: "bg-yellow-600",
-  lime: "bg-lime-500",
-  lightGreen: "bg-light-green-500",
-  green: "bg-green-500",
-  teal: "bg-teal-500",
-  cyan: "bg-cyan-500",
-  lightBlue: "bg-light-blue-500",
-  blue: "bg-blue-500",
-  indigo: "bg-indigo-500",
-  deepPurple: "bg-deep-purple-500",
-  purple: "bg-purple-500",
-  pink: "bg-pink-500",
-  red: "bg-red-500"
+  blueGray: 'bg-blue-gray-500',
+  gray: 'bg-gray-500',
+  brown: 'bg-brown-500',
+  deepOrange: 'bg-deep-orange-500',
+  orange: 'bg-orange-500',
+  amber: 'bg-amber-500',
+  yellow: 'bg-yellow-600',
+  lime: 'bg-lime-500',
+  lightGreen: 'bg-light-green-500',
+  green: 'bg-green-500',
+  teal: 'bg-teal-500',
+  cyan: 'bg-cyan-500',
+  lightBlue: 'bg-light-blue-500',
+  blue: 'bg-blue-500',
+  indigo: 'bg-indigo-500',
+  deepPurple: 'bg-deep-purple-500',
+  purple: 'bg-purple-500',
+  pink: 'bg-pink-500',
+  red: 'bg-red-500'
 };
 
 function Alert(_ref) {
@@ -49,6 +49,9 @@ function Alert(_ref) {
   }), children));
 }
 
+Alert.defaultProps = {
+  color: 'lightBlue'
+};
 Alert.propTypes = {
   color: _propTypes["default"].string.isRequired,
   children: _propTypes["default"].node.isRequired

lib/Button.js

@@ -293,13 +293,13 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
       color = _ref.color,
       buttonType = _ref.buttonType,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'regular' : _ref$size,
+      size = _ref.size,
       rounded = _ref.rounded,
       iconOnly = _ref.iconOnly,
       block = _ref.block,
       ripple = _ref.ripple,
-      rest = _objectWithoutProperties(_ref, ["children", "color", "buttonType", "size", "rounded", "iconOnly", "block", "ripple"]);
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, ["children", "color", "buttonType", "size", "rounded", "iconOnly", "block", "ripple", "className"]);
 
   var rippleEffect = new _materialRippleEffects["default"]();
   var classes = [];
@@ -342,20 +342,28 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   classes = classes.join(' ');
   return /*#__PURE__*/_react["default"].createElement("button", _extends({}, rest, {
-    className: classes,
+    className: "".concat(classes, " ").concat(className),
     ref: ref,
     onMouseUp: function onMouseUp(e) {
       ripple === 'dark' && rippleEffect.create(e, 'dark');
       ripple === 'light' && rippleEffect.create(e, 'light');
     }
   }), children);
 });
+Button.defaultProps = {
+  color: 'lightBlue',
+  buttonType: 'filled',
+  size: 'regular',
+  rounded: false,
+  block: false
+};
 Button.propTypes = {
   children: _propTypes["default"].node.isRequired,
   color: _propTypes["default"].string.isRequired,
-  buttonType: _propTypes["default"].string,
-  size: _propTypes["default"].string,
-  rounded: _propTypes["default"].bool,
+  buttonType: _propTypes["default"].string.isRequired,
+  size: _propTypes["default"].string.isRequired,
+  rounded: _propTypes["default"].bool.isRequired,
+  block: _propTypes["default"].bool.isRequired,
   ripple: _propTypes["default"].string
 };
 var _default = Button;

lib/Card.js

@@ -12,9 +12,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function Card(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      className = _ref.className;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "w-full bg-white rounded-xl overflow-hdden shadow-md p-4"
+    className: "w-full bg-white rounded-xl overflow-hdden shadow-md p-4 ".concat(className)
   }, children);
 }
 

lib/CardBody.js

@@ -12,9 +12,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function CardBody(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      className = _ref.className;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "p-4"
+    className: "p-4 ".concat(className)
   }, children);
 }
 

lib/CardFooter.js

@@ -12,9 +12,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function CardFooter(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      className = _ref.className;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "p-4"
+    className: "p-4 ".concat(className)
   }, children);
 }
 

lib/CardHeader.js

@@ -83,11 +83,10 @@ var positions = {
 function CardHeader(_ref) {
   var children = _ref.children,
       color = _ref.color,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'regular' : _ref$size,
-      _ref$contentPosition = _ref.contentPosition,
-      contentPosition = _ref$contentPosition === void 0 ? 'center' : _ref$contentPosition,
-      iconOnly = _ref.iconOnly;
+      size = _ref.size,
+      contentPosition = _ref.contentPosition,
+      iconOnly = _ref.iconOnly,
+      className = _ref.className;
   var headerSize = [];
   var smallHeader = [iconOnly ? 'w-20' : 'w-full', 'h-20', 'py-4', iconOnly ? 'px-4' : 'px-8', positions[contentPosition]];
   var regularHeader = [iconOnly ? 'w-24' : 'w-full', 'h-24', 'py-4', iconOnly ? 'px-4' : 'px-8', positions[contentPosition]];
@@ -109,12 +108,19 @@ function CardHeader(_ref) {
 
   headerSize = headerSize.join(' ');
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "bg-gradient-to-tr ".concat(fromColors[color], " ").concat(toColors[color], " -mt-10 mb-6 rounded-xl text-white grid items-center ").concat(headerSize, " ").concat(shadowColors[color])
+    className: "bg-gradient-to-tr ".concat(fromColors[color], " ").concat(toColors[color], " -mt-10 mb-6 rounded-xl text-white grid items-center ").concat(headerSize, " ").concat(shadowColors[color], " ").concat(className)
   }, children);
 }
 
+CardHeader.defaultProps = {
+  color: 'lightBlue',
+  size: 'regular',
+  contentPosition: 'center',
+  iconOnly: false
+};
 CardHeader.propTypes = {
   children: _propTypes["default"].node.isRequired,
   color: _propTypes["default"].string.isRequired,
-  contentPositin: _propTypes["default"].string
+  contentPosition: _propTypes["default"].string.isRequired,
+  iconOnly: _propTypes["default"].bool.isRequired
 };

lib/CardImage.js

@@ -19,10 +19,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function CardImage(_ref) {
   var src = _ref.src,
-      rest = _objectWithoutProperties(_ref, ["src"]);
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, ["src", "className"]);
 
   return /*#__PURE__*/_react["default"].createElement("img", _extends({}, rest, {
-    className: "w-full rounded-lg -mt-9 shadow-lg",
+    className: "w-full rounded-lg -mt-9 shadow-lg ".concat(className),
     src: src
   }));
 }

lib/CardRow.js

@@ -12,9 +12,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function CardRow(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      className = _ref.className;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "flex flex-wrap border-b border-gray-200"
+    className: "flex flex-wrap border-b border-gray-200 ".concat(className)
   }, children);
 }
 

lib/CardStatus.js

@@ -13,9 +13,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function CardStatus(_ref) {
   var title = _ref.title,
-      amount = _ref.amount;
+      amount = _ref.amount,
+      className = _ref.className;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "w-full pl-4 max-w-full flex-grow flex-1 mb-2 text-right"
+    className: "w-full pl-4 max-w-full flex-grow flex-1 mb-2 text-right ".concat(className)
   }, /*#__PURE__*/_react["default"].createElement("h5", {
     className: "text-gray-500 font-light tracking-wide text-base mb-1"
   }, title), /*#__PURE__*/_react["default"].createElement("span", {

lib/CardStatusFooter.js

@@ -37,16 +37,20 @@ function CardStatusFooter(_ref) {
   var children = _ref.children,
       color = _ref.color,
       amount = _ref.amount,
-      date = _ref.date;
+      date = _ref.date,
+      className = _ref.className;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "text-sm text-gray-700 pt-4"
+    className: "text-sm text-gray-700 pt-4 flex items-center ".concat(className)
   }, children, /*#__PURE__*/_react["default"].createElement("span", {
     className: "".concat(Colors[color], " ml-1 mr-2")
   }, amount), /*#__PURE__*/_react["default"].createElement("span", {
     className: "font-light whitespace-nowrap"
   }, date));
 }
 
+CardStatusFooter.defaultProps = {
+  color: 'lightBlue'
+};
 CardStatusFooter.propTypes = {
   children: _propTypes["default"].node,
   color: _propTypes["default"].string.isRequired,

lib/Checkbox.js

@@ -46,19 +46,22 @@ function Checkbox(_ref) {
       rest = _objectWithoutProperties(_ref, ["color", "text", "id"]);
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    "class": "flex items-center"
+    className: "flex items-center"
   }, /*#__PURE__*/_react["default"].createElement("input", _extends({}, rest, {
     id: id,
     type: "checkbox",
-    "class": "mt-checkbox ".concat(colors[color], " hidden overflow-hidden")
+    className: "mt-checkbox ".concat(colors[color], " hidden overflow-hidden")
   })), /*#__PURE__*/_react["default"].createElement("label", {
-    "for": id,
-    "class": "flex items-center cursor-pointer text-gray-400 select-none transition-all duration-300"
+    htmlFor: id,
+    className: "flex items-center cursor-pointer text-gray-400 select-none transition-all duration-300"
   }, /*#__PURE__*/_react["default"].createElement("span", {
-    "class": "relative w-5 h-5 inline-block mr-2 rounded border border-gray-500 transition-all duration-300"
+    className: "relative w-5 h-5 inline-block mr-2 rounded border border-gray-500 transition-all duration-300"
   }), text));
 }
 
+Checkbox.defaultProps = {
+  color: 'lightBlue'
+};
 Checkbox.propTypes = {
   color: _propTypes["default"].string.isRequired,
   text: _propTypes["default"].string.isRequired,

lib/ClosingAlert.js

@@ -30,25 +30,25 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var colors = {
-  blueGray: "bg-blue-gray-500",
-  gray: "bg-gray-500",
-  brown: "bg-brown-500",
-  deepOrange: "bg-deep-orange-500",
-  orange: "bg-orange-500",
-  amber: "bg-amber-500",
-  yellow: "bg-yellow-600",
-  lime: "bg-lime-500",
-  lightGreen: "bg-light-green-500",
-  green: "bg-green-500",
-  teal: "bg-teal-500",
-  cyan: "bg-cyan-500",
-  lightBlue: "bg-light-blue-500",
-  blue: "bg-blue-500",
-  indigo: "bg-indigo-500",
-  deepPurple: "bg-deep-purple-500",
-  purple: "bg-purple-500",
-  pink: "bg-pink-500",
-  red: "bg-red-500"
+  blueGray: 'bg-blue-gray-500',
+  gray: 'bg-gray-500',
+  brown: 'bg-brown-500',
+  deepOrange: 'bg-deep-orange-500',
+  orange: 'bg-orange-500',
+  amber: 'bg-amber-500',
+  yellow: 'bg-yellow-600',
+  lime: 'bg-lime-500',
+  lightGreen: 'bg-light-green-500',
+  green: 'bg-green-500',
+  teal: 'bg-teal-500',
+  cyan: 'bg-cyan-500',
+  lightBlue: 'bg-light-blue-500',
+  blue: 'bg-blue-500',
+  indigo: 'bg-indigo-500',
+  deepPurple: 'bg-deep-purple-500',
+  purple: 'bg-purple-500',
+  pink: 'bg-pink-500',
+  red: 'bg-red-500'
 };
 
 function ClosingAlert(_ref) {
@@ -64,9 +64,9 @@ function ClosingAlert(_ref) {
   var closeAlert = function closeAlert(e) {
     var delay;
     var parentClassName = e.target.parentNode.parentNode;
-    parentClassName.classList.add("opacity-0");
+    parentClassName.classList.add('opacity-0');
     Array.from(parentClassName.classList).map(function (el) {
-      return el.includes("duration") ? delay = el.split("-")[1] : null;
+      return el.includes('duration') ? delay = el.split('-')[1] : null;
     });
     setTimeout(function () {
       return setShowAlert(false);
@@ -83,6 +83,9 @@ function ClosingAlert(_ref) {
   }, "\xD7"))) : null);
 }
 
+ClosingAlert.defaultProps = {
+  color: 'lightBlue'
+};
 ClosingAlert.propTypes = {
   color: _propTypes["default"].string.isRequired,
   children: _propTypes["default"].node.isRequired