@nejcm/react-skeleton - npm Package Compare versions

Comparing version 3.0.6 to 3.1.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [3.1.0](https://github.com/nejcm/react-skeleton/compare/v3.0.6...v3.1.0) (2020-08-05)
+
+
+### Features
+
+* **ts:** refactored lib to typescript ([2fa0cfd](https://github.com/nejcm/react-skeleton/commit/2fa0cfdb19ce1a8061fc3f26561db7a87fff944d))
+
 ## [3.0.6](https://github.com/nejcm/react-skeleton/compare/v3.0.5...v3.0.6) (2020-07-08)
@@ -2,0 +9,0 @@

dist/@nejcm/react-skeleton.cjs.js

@@ -9,3 +9,2 @@ 'use strict';
 var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
-var PropTypes = _interopDefault(require('prop-types'));
 var React = require('react');
@@ -67,35 +66,2 @@ var React__default = _interopDefault(React);
 
-process.env.NODE_ENV !== "production" ? Circle.propTypes = {
-  /**
-   * Circle Width
-   */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Max width
-   */
-  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Min width
-   */
-  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Height
-   */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Max height
-   */
-  maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Min height
-   */
-  minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  className: PropTypes.string
-} : void 0;
-
 function _templateObject$1() {
@@ -121,35 +87,2 @@ var data = _taggedTemplateLiteral([""]);
 
-process.env.NODE_ENV !== "production" ? Rectangle.propTypes = {
-  /**
-   * Rectangle Width
-   */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Max width
-   */
-  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Min width
-   */
-  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Height
-   */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Max height
-   */
-  maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Min height
-   */
-  minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  className: PropTypes.string
-} : void 0;
-
 function _templateObject$2() {
@@ -178,18 +111,3 @@ var data = _taggedTemplateLiteral(["\n  .s-loader {\n    position: relative;\n    overflow: hidden;\n    background-color: rgba(0, 0, 0, 0.055);\n\n    &:after {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(\n        90deg,\n        rgba(0, 0, 0, 0),\n        rgba(0, 0, 0, 0.07),\n        rgba(0, 0, 0, 0)\n      );\n      transform: translateX(-100%);\n    }\n  }\n\n  &.s-active {\n    .s-loader {\n      &:after {\n        animation: loading 1.75s 0.5s infinite;\n      }\n    }\n  }\n\n  &.s-inactive {\n    .s-loader {\n      &:after {\n        animation: none;\n      }\n    }\n  }\n\n  &.s-dark {\n    .s-loader {\n      background-color: rgba(255, 255, 255, 0.175);\n      &:after {\n        background: linear-gradient(\n          90deg,\n          rgba(255, 255, 255, 0),\n          rgba(255, 255, 255, 0.12),\n          rgba(255, 255, 255, 0)\n        );\n      }\n    }\n  }\n\n  @keyframes loading {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  .s-rect {\n    border-radius: 2px;\n  }\n  .s-circ {\n    border-radius: 50%;\n  }\n"]);
 
-process.env.NODE_ENV !== "production" ? Skeleton.propTypes = {
-  /**
-   * Display skeleton for a dark theme.
-   */
-  darkTheme: PropTypes.bool,
-
-  /**
-   * Show animation effect. "true"
-   */
-  active: PropTypes.bool,
-  className: PropTypes.string
-} : void 0;
-/*Skeleton.defaultProps = {
-  active: true,
-};*/
-
+Skeleton.displayName = 'Skeleton';
 Skeleton.Rectangle = Rectangle;
@@ -234,30 +152,3 @@ Skeleton.Circle = Circle;
 };
-process.env.NODE_ENV !== "production" ? Paragraph.propTypes = {
-  /**
-   * Show header
-   */
-  header: PropTypes.bool,
 
-  /**
-   * Number of pragraph lines "3"
-   */
-  lines: PropTypes.number,
-
-  /**
-   * Array of rotating line widths. "['100%', '100%', '75%', '35%', '50%', '85%']"
-   */
-  widths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-
-  /**
-   * Skeleton component props
-   */
-  skeletonProps: PropTypes.object,
-  className: PropTypes.string,
-  children: PropTypes.node
-} : void 0;
-/*Paragraph.defaultProps = {
-  widths: ['100%', '100%', '75%', '35%', '50%', '85%'],
-  lines: 3,
-};*/
-
 function _templateObject$4() {
@@ -306,42 +197,3 @@ var data = _taggedTemplateLiteral(["\n  border: solid 1px rgba(0, 0, 0, 0.08);\n  border-radius: 3px;\n  padding: 1.25rem;\n\n  .s-image {\n    margin-bottom: 1rem;\n  }\n"]);
 };
-process.env.NODE_ENV !== "production" ? Card.propTypes = {
-  /**
-   * Card width
-   */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * Card max width
-   */
-  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Display image loader "false"
-   */
-  image: PropTypes.bool,
-
-  /**
-   * Display header loader "false"
-   */
-  header: PropTypes.bool,
-
-  /**
-   * Display paragraph loader "false"
-   */
-  paragraph: PropTypes.bool,
-
-  /**
-   * Skeleton component props
-   */
-  skeletonProps: PropTypes.object,
-  className: PropTypes.string,
-  children: PropTypes.node,
-  style: PropTypes.object
-} : void 0;
-/*Card.defaultProps = {
-  image: false,
-  header: false,
-  paragraph: false,
-};*/
-
 function _templateObject$5() {
@@ -386,26 +238,2 @@ var data = _taggedTemplateLiteral(["\n  display: table;\n  width: 100%;\n\n  > * {\n    display: table-cell;\n\n    &:first-of-type {\n      padding-right: 1.5rem;\n      vertical-align: top;\n    }\n\n    &:last-of-type {\n      width: 100%;\n      vertical-align: middle;\n    }\n  }\n"]);
 
-process.env.NODE_ENV !== "production" ? Comment.propTypes = {
-  /**
-   * Avatar size "45"
-   */
-  avatarSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Display avatar image as a circle "true"
-   */
-  avatarCircle: PropTypes.bool,
-
-  /**
-   * Number of comment lines "3"
-   */
-  lines: PropTypes.number,
-
-  /**
-   * Skeleton component props
-   */
-  skeletonProps: PropTypes.object,
-  className: PropTypes.string,
-  children: PropTypes.node
-} : void 0;
-
 function _templateObject$6() {
@@ -432,6 +260,6 @@ var data = _taggedTemplateLiteral(["\n  .s-label {\n    height: 1rem;\n    max-width: 150px;\n    margin-bottom: 0.3rem;\n  }\n  .s-input {\n    height: 2.5rem;\n    margin-bottom: 1.2rem;\n  }\n  .s-button {\n    height: 2.5rem;\n    max-width: 175px;\n  }\n"]);
       widths = _ref$widths === void 0 ? ['100%'] : _ref$widths,
+      skeletonProps = _ref.skeletonProps,
       className = _ref.className,
       children = _ref.children,
-      skeletonProps = _ref.skeletonProps,
-      rest = _objectWithoutProperties(_ref, ["inputs", "inputHeight", "button", "label", "widths", "className", "children", "skeletonProps"]);
+      rest = _objectWithoutProperties(_ref, ["inputs", "inputHeight", "button", "label", "widths", "skeletonProps", "className", "children"]);
 
@@ -460,42 +288,3 @@ var max = widths.length || 0;
 };
-process.env.NODE_ENV !== "production" ? Form.propTypes = {
-  /**
-   * Show input label loader "true"
-   */
-  label: PropTypes.bool,
 
-  /**
-   * Show button loader "true"
-   */
-  button: PropTypes.bool,
-
-  /**
-   * Number of inputs "3"
-   */
-  inputs: PropTypes.number,
-
-  /**
-   * Input height
-   */
-  inputHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Array of rotating input widths. "['100%']"
-   */
-  widths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-
-  /**
-   * Skeleton component props
-   */
-  skeletonProps: PropTypes.object,
-  className: PropTypes.string,
-  children: PropTypes.node
-} : void 0;
-/*Form.defaultProps = {
-  inputs: 3,
-  button: true,
-  label: true,
-  widths: ['100%'],
-};*/
-
 function _templateObject$7() {
@@ -512,9 +301,13 @@ var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: -1rem;\n  overflow: hidden;\n\n  > * {\n    flex: 1 1 auto;\n    padding: 1rem;\n  }\n"]);
 
+var isRenderPropFunction = function (value) {
+  return typeof value === 'function';
+};
+
 var Grid = function (_ref) {
   var _ref$cols = _ref.cols,
       cols = _ref$cols === void 0 ? 3 : _ref$cols,
+      skeletonProps = _ref.skeletonProps,
       className = _ref.className,
-      skeletonProps = _ref.skeletonProps,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["cols", "className", "skeletonProps", "children"]);
+      rest = _objectWithoutProperties(_ref, ["cols", "skeletonProps", "className", "children"]);
 
@@ -526,26 +319,6 @@ return /*#__PURE__*/React__default.createElement(Skeleton, skeletonProps, /*#__PURE__*/React__default.createElement(Wrapper$4, _extends({
       key: i
-    }, typeof children === 'function' ? children(i) : children);
+    }, isRenderPropFunction(children) ? children(i) : children);
   }) : null));
 };
-process.env.NODE_ENV !== "production" ? Grid.propTypes = {
-  /**
-   * Number of repeated columns "3"
-   */
-  cols: PropTypes.number,
 
-  /**
-   * Skeleton component props
-   */
-  skeletonProps: PropTypes.object,
-
-  /**
-   * Children to repeat or callback function with index argument
-   */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  className: PropTypes.string
-} : void 0;
-/*Grid.defaultProps = {
-  cols: 3,
-};*/
-
 function _templateObject$8() {
@@ -576,12 +349,9 @@ var data = _taggedTemplateLiteral(["\n  width: 100%;\n  border-collapse: collapse;\n\n  th,\n  td {\n    padding: 0.8rem;\n    border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n  }\n\n  th {\n    .s-cell {\n      display: flex;\n      height: 2rem;\n    }\n  }\n\n  td {\n    .s-cell {\n      display: flex;\n      height: 1.25rem;\n    }\n  }\n"]);
 
-  var isArray = Array.isArray(cols);
-
-  var rowIter = _toConsumableArray(Array(rows));
-
-  var colIter = isArray ? cols : _toConsumableArray(Array(cols));
+  var rowIter = Array(rows).fill(0);
+  var colIter = Array.isArray(cols) ? cols : Array(cols).fill(0);
   var max = widths.length;
-  var td = colIter.map(function (__, j) {
+  var td = colIter.map(function (_, j) {
     return /*#__PURE__*/React__default.createElement("td", {
       key: "c-".concat(j),
-      style: isArray ? undefined : {
+      style: {
         width: widths[j % max]
@@ -612,37 +382,3 @@ }
 };
-process.env.NODE_ENV !== "production" ? Table.propTypes = {
-  /**
-   * Show table head (th) "true"
-   */
-  head: PropTypes.bool,
 
-  /**
-   * Number of rows "3"
-   */
-  rows: PropTypes.number,
-
-  /**
-   * Number or columns or array of custom elements "4"
-   */
-  cols: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.node)]),
-
-  /**
-   * Array of rotating column widths. "['100%', '100%', '75%', '35%', '50%', '85%']"
-   */
-  widths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-
-  /**
-   * Skeleton component props
-   */
-  skeletonProps: PropTypes.object,
-  className: PropTypes.string,
-  children: PropTypes.node
-} : void 0;
-/*Table.defaultProps = {
-  head: true,
-  rows: 3,
-  cols: 4,
-  widths: ['100%', '100%', '75%', '35%', '50%', '85%'],
-};*/
-
 exports.Card = Card;
@@ -649,0 +385,0 @@ exports.Comment = Comment;

dist/@nejcm/react-skeleton.esm.js

 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import PropTypes from 'prop-types';
 import React, { Fragment } from 'react';
@@ -59,35 +58,2 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 
-process.env.NODE_ENV !== "production" ? Circle.propTypes = {
-  /**
-   * Circle Width
-   */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Max width
-   */
-  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Min width
-   */
-  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Height
-   */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Max height
-   */
-  maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Min height
-   */
-  minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  className: PropTypes.string
-} : void 0;
-
 function _templateObject$1() {
@@ -113,35 +79,2 @@ var data = _taggedTemplateLiteral([""]);
 
-process.env.NODE_ENV !== "production" ? Rectangle.propTypes = {
-  /**
-   * Rectangle Width
-   */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Max width
-   */
-  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Min width
-   */
-  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Height
-   */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Max height
-   */
-  maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Min height
-   */
-  minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  className: PropTypes.string
-} : void 0;
-
 function _templateObject$2() {
@@ -170,18 +103,3 @@ var data = _taggedTemplateLiteral(["\n  .s-loader {\n    position: relative;\n    overflow: hidden;\n    background-color: rgba(0, 0, 0, 0.055);\n\n    &:after {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(\n        90deg,\n        rgba(0, 0, 0, 0),\n        rgba(0, 0, 0, 0.07),\n        rgba(0, 0, 0, 0)\n      );\n      transform: translateX(-100%);\n    }\n  }\n\n  &.s-active {\n    .s-loader {\n      &:after {\n        animation: loading 1.75s 0.5s infinite;\n      }\n    }\n  }\n\n  &.s-inactive {\n    .s-loader {\n      &:after {\n        animation: none;\n      }\n    }\n  }\n\n  &.s-dark {\n    .s-loader {\n      background-color: rgba(255, 255, 255, 0.175);\n      &:after {\n        background: linear-gradient(\n          90deg,\n          rgba(255, 255, 255, 0),\n          rgba(255, 255, 255, 0.12),\n          rgba(255, 255, 255, 0)\n        );\n      }\n    }\n  }\n\n  @keyframes loading {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  .s-rect {\n    border-radius: 2px;\n  }\n  .s-circ {\n    border-radius: 50%;\n  }\n"]);
 
-process.env.NODE_ENV !== "production" ? Skeleton.propTypes = {
-  /**
-   * Display skeleton for a dark theme.
-   */
-  darkTheme: PropTypes.bool,
-
-  /**
-   * Show animation effect. "true"
-   */
-  active: PropTypes.bool,
-  className: PropTypes.string
-} : void 0;
-/*Skeleton.defaultProps = {
-  active: true,
-};*/
-
+Skeleton.displayName = 'Skeleton';
 Skeleton.Rectangle = Rectangle;
@@ -226,30 +144,3 @@ Skeleton.Circle = Circle;
 };
-process.env.NODE_ENV !== "production" ? Paragraph.propTypes = {
-  /**
-   * Show header
-   */
-  header: PropTypes.bool,
 
-  /**
-   * Number of pragraph lines "3"
-   */
-  lines: PropTypes.number,
-
-  /**
-   * Array of rotating line widths. "['100%', '100%', '75%', '35%', '50%', '85%']"
-   */
-  widths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-
-  /**
-   * Skeleton component props
-   */
-  skeletonProps: PropTypes.object,
-  className: PropTypes.string,
-  children: PropTypes.node
-} : void 0;
-/*Paragraph.defaultProps = {
-  widths: ['100%', '100%', '75%', '35%', '50%', '85%'],
-  lines: 3,
-};*/
-
 function _templateObject$4() {
@@ -298,42 +189,3 @@ var data = _taggedTemplateLiteral(["\n  border: solid 1px rgba(0, 0, 0, 0.08);\n  border-radius: 3px;\n  padding: 1.25rem;\n\n  .s-image {\n    margin-bottom: 1rem;\n  }\n"]);
 };
-process.env.NODE_ENV !== "production" ? Card.propTypes = {
-  /**
-   * Card width
-   */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * Card max width
-   */
-  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Display image loader "false"
-   */
-  image: PropTypes.bool,
-
-  /**
-   * Display header loader "false"
-   */
-  header: PropTypes.bool,
-
-  /**
-   * Display paragraph loader "false"
-   */
-  paragraph: PropTypes.bool,
-
-  /**
-   * Skeleton component props
-   */
-  skeletonProps: PropTypes.object,
-  className: PropTypes.string,
-  children: PropTypes.node,
-  style: PropTypes.object
-} : void 0;
-/*Card.defaultProps = {
-  image: false,
-  header: false,
-  paragraph: false,
-};*/
-
 function _templateObject$5() {
@@ -378,26 +230,2 @@ var data = _taggedTemplateLiteral(["\n  display: table;\n  width: 100%;\n\n  > * {\n    display: table-cell;\n\n    &:first-of-type {\n      padding-right: 1.5rem;\n      vertical-align: top;\n    }\n\n    &:last-of-type {\n      width: 100%;\n      vertical-align: middle;\n    }\n  }\n"]);
 
-process.env.NODE_ENV !== "production" ? Comment.propTypes = {
-  /**
-   * Avatar size "45"
-   */
-  avatarSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Display avatar image as a circle "true"
-   */
-  avatarCircle: PropTypes.bool,
-
-  /**
-   * Number of comment lines "3"
-   */
-  lines: PropTypes.number,
-
-  /**
-   * Skeleton component props
-   */
-  skeletonProps: PropTypes.object,
-  className: PropTypes.string,
-  children: PropTypes.node
-} : void 0;
-
 function _templateObject$6() {
@@ -424,6 +252,6 @@ var data = _taggedTemplateLiteral(["\n  .s-label {\n    height: 1rem;\n    max-width: 150px;\n    margin-bottom: 0.3rem;\n  }\n  .s-input {\n    height: 2.5rem;\n    margin-bottom: 1.2rem;\n  }\n  .s-button {\n    height: 2.5rem;\n    max-width: 175px;\n  }\n"]);
       widths = _ref$widths === void 0 ? ['100%'] : _ref$widths,
+      skeletonProps = _ref.skeletonProps,
       className = _ref.className,
       children = _ref.children,
-      skeletonProps = _ref.skeletonProps,
-      rest = _objectWithoutProperties(_ref, ["inputs", "inputHeight", "button", "label", "widths", "className", "children", "skeletonProps"]);
+      rest = _objectWithoutProperties(_ref, ["inputs", "inputHeight", "button", "label", "widths", "skeletonProps", "className", "children"]);
 
@@ -452,42 +280,3 @@ var max = widths.length || 0;
 };
-process.env.NODE_ENV !== "production" ? Form.propTypes = {
-  /**
-   * Show input label loader "true"
-   */
-  label: PropTypes.bool,
 
-  /**
-   * Show button loader "true"
-   */
-  button: PropTypes.bool,
-
-  /**
-   * Number of inputs "3"
-   */
-  inputs: PropTypes.number,
-
-  /**
-   * Input height
-   */
-  inputHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Array of rotating input widths. "['100%']"
-   */
-  widths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-
-  /**
-   * Skeleton component props
-   */
-  skeletonProps: PropTypes.object,
-  className: PropTypes.string,
-  children: PropTypes.node
-} : void 0;
-/*Form.defaultProps = {
-  inputs: 3,
-  button: true,
-  label: true,
-  widths: ['100%'],
-};*/
-
 function _templateObject$7() {
@@ -504,9 +293,13 @@ var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: -1rem;\n  overflow: hidden;\n\n  > * {\n    flex: 1 1 auto;\n    padding: 1rem;\n  }\n"]);
 
+var isRenderPropFunction = function (value) {
+  return typeof value === 'function';
+};
+
 var Grid = function (_ref) {
   var _ref$cols = _ref.cols,
       cols = _ref$cols === void 0 ? 3 : _ref$cols,
+      skeletonProps = _ref.skeletonProps,
       className = _ref.className,
-      skeletonProps = _ref.skeletonProps,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["cols", "className", "skeletonProps", "children"]);
+      rest = _objectWithoutProperties(_ref, ["cols", "skeletonProps", "className", "children"]);
 
@@ -518,26 +311,6 @@ return /*#__PURE__*/React.createElement(Skeleton, skeletonProps, /*#__PURE__*/React.createElement(Wrapper$4, _extends({
       key: i
-    }, typeof children === 'function' ? children(i) : children);
+    }, isRenderPropFunction(children) ? children(i) : children);
   }) : null));
 };
-process.env.NODE_ENV !== "production" ? Grid.propTypes = {
-  /**
-   * Number of repeated columns "3"
-   */
-  cols: PropTypes.number,
 
-  /**
-   * Skeleton component props
-   */
-  skeletonProps: PropTypes.object,
-
-  /**
-   * Children to repeat or callback function with index argument
-   */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  className: PropTypes.string
-} : void 0;
-/*Grid.defaultProps = {
-  cols: 3,
-};*/
-
 function _templateObject$8() {
@@ -568,12 +341,9 @@ var data = _taggedTemplateLiteral(["\n  width: 100%;\n  border-collapse: collapse;\n\n  th,\n  td {\n    padding: 0.8rem;\n    border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n  }\n\n  th {\n    .s-cell {\n      display: flex;\n      height: 2rem;\n    }\n  }\n\n  td {\n    .s-cell {\n      display: flex;\n      height: 1.25rem;\n    }\n  }\n"]);
 
-  var isArray = Array.isArray(cols);
-
-  var rowIter = _toConsumableArray(Array(rows));
-
-  var colIter = isArray ? cols : _toConsumableArray(Array(cols));
+  var rowIter = Array(rows).fill(0);
+  var colIter = Array.isArray(cols) ? cols : Array(cols).fill(0);
   var max = widths.length;
-  var td = colIter.map(function (__, j) {
+  var td = colIter.map(function (_, j) {
     return /*#__PURE__*/React.createElement("td", {
       key: "c-".concat(j),
-      style: isArray ? undefined : {
+      style: {
         width: widths[j % max]
@@ -604,38 +374,4 @@ }
 };
-process.env.NODE_ENV !== "production" ? Table.propTypes = {
-  /**
-   * Show table head (th) "true"
-   */
-  head: PropTypes.bool,
 
-  /**
-   * Number of rows "3"
-   */
-  rows: PropTypes.number,
-
-  /**
-   * Number or columns or array of custom elements "4"
-   */
-  cols: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.node)]),
-
-  /**
-   * Array of rotating column widths. "['100%', '100%', '75%', '35%', '50%', '85%']"
-   */
-  widths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-
-  /**
-   * Skeleton component props
-   */
-  skeletonProps: PropTypes.object,
-  className: PropTypes.string,
-  children: PropTypes.node
-} : void 0;
-/*Table.defaultProps = {
-  head: true,
-  rows: 3,
-  cols: 4,
-  widths: ['100%', '100%', '75%', '35%', '50%', '85%'],
-};*/
-
 export default Skeleton;
 export { Card, Comment, Form, Grid, Paragraph, Table };

dist/@nejcm/react-skeleton.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/objectWithoutProperties'), require('prop-types'), require('react'), require('@babel/runtime/helpers/defineProperty'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('styled-components'), require('@babel/runtime/helpers/toConsumableArray')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/objectWithoutProperties', 'prop-types', 'react', '@babel/runtime/helpers/defineProperty', '@babel/runtime/helpers/taggedTemplateLiteral', 'styled-components', '@babel/runtime/helpers/toConsumableArray'], factory) :
-  (global = global || self, factory(global.NejcmReactSkeleton = {}, global._extends, global._objectWithoutProperties, global.PropTypes, global.React, global._defineProperty, global._taggedTemplateLiteral, global.StyledComponents, global._toConsumableArray));
-}(this, (function (exports, _extends, _objectWithoutProperties, PropTypes, React, _defineProperty, _taggedTemplateLiteral, styled, _toConsumableArray) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/objectWithoutProperties'), require('react'), require('@babel/runtime/helpers/defineProperty'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('styled-components'), require('@babel/runtime/helpers/toConsumableArray')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/objectWithoutProperties', 'react', '@babel/runtime/helpers/defineProperty', '@babel/runtime/helpers/taggedTemplateLiteral', 'styled-components', '@babel/runtime/helpers/toConsumableArray'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.NejcmReactSkeleton = {}, global._extends, global._objectWithoutProperties, global.React, global._defineProperty, global._taggedTemplateLiteral, global.StyledComponents, global._toConsumableArray));
+}(this, (function (exports, _extends, _objectWithoutProperties, React, _defineProperty, _taggedTemplateLiteral, styled, _toConsumableArray) { 'use strict';
 
   _extends = _extends && Object.prototype.hasOwnProperty.call(_extends, 'default') ? _extends['default'] : _extends;
   _objectWithoutProperties = _objectWithoutProperties && Object.prototype.hasOwnProperty.call(_objectWithoutProperties, 'default') ? _objectWithoutProperties['default'] : _objectWithoutProperties;
-  PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
   var React__default = 'default' in React ? React['default'] : React;
@@ -65,35 +64,2 @@ _defineProperty = _defineProperty && Object.prototype.hasOwnProperty.call(_defineProperty, 'default') ? _defineProperty['default'] : _defineProperty;
 
-   Circle.propTypes = {
-    /**
-     * Circle Width
-     */
-    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Max width
-     */
-    maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Min width
-     */
-    minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Height
-     */
-    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Max height
-     */
-    maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Min height
-     */
-    minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    className: PropTypes.string
-  } ;
-
   function _templateObject$1() {
@@ -119,35 +85,2 @@ var data = _taggedTemplateLiteral([""]);
 
-   Rectangle.propTypes = {
-    /**
-     * Rectangle Width
-     */
-    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Max width
-     */
-    maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Min width
-     */
-    minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Height
-     */
-    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Max height
-     */
-    maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Min height
-     */
-    minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    className: PropTypes.string
-  } ;
-
   function _templateObject$2() {
@@ -176,18 +109,3 @@ var data = _taggedTemplateLiteral(["\n  .s-loader {\n    position: relative;\n    overflow: hidden;\n    background-color: rgba(0, 0, 0, 0.055);\n\n    &:after {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(\n        90deg,\n        rgba(0, 0, 0, 0),\n        rgba(0, 0, 0, 0.07),\n        rgba(0, 0, 0, 0)\n      );\n      transform: translateX(-100%);\n    }\n  }\n\n  &.s-active {\n    .s-loader {\n      &:after {\n        animation: loading 1.75s 0.5s infinite;\n      }\n    }\n  }\n\n  &.s-inactive {\n    .s-loader {\n      &:after {\n        animation: none;\n      }\n    }\n  }\n\n  &.s-dark {\n    .s-loader {\n      background-color: rgba(255, 255, 255, 0.175);\n      &:after {\n        background: linear-gradient(\n          90deg,\n          rgba(255, 255, 255, 0),\n          rgba(255, 255, 255, 0.12),\n          rgba(255, 255, 255, 0)\n        );\n      }\n    }\n  }\n\n  @keyframes loading {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  .s-rect {\n    border-radius: 2px;\n  }\n  .s-circ {\n    border-radius: 50%;\n  }\n"]);
 
-   Skeleton.propTypes = {
-    /**
-     * Display skeleton for a dark theme.
-     */
-    darkTheme: PropTypes.bool,
-
-    /**
-     * Show animation effect. "true"
-     */
-    active: PropTypes.bool,
-    className: PropTypes.string
-  } ;
-  /*Skeleton.defaultProps = {
-    active: true,
-  };*/
-
+  Skeleton.displayName = 'Skeleton';
   Skeleton.Rectangle = Rectangle;
@@ -232,30 +150,3 @@ Skeleton.Circle = Circle;
   };
-   Paragraph.propTypes = {
-    /**
-     * Show header
-     */
-    header: PropTypes.bool,
 
-    /**
-     * Number of pragraph lines "3"
-     */
-    lines: PropTypes.number,
-
-    /**
-     * Array of rotating line widths. "['100%', '100%', '75%', '35%', '50%', '85%']"
-     */
-    widths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-
-    /**
-     * Skeleton component props
-     */
-    skeletonProps: PropTypes.object,
-    className: PropTypes.string,
-    children: PropTypes.node
-  } ;
-  /*Paragraph.defaultProps = {
-    widths: ['100%', '100%', '75%', '35%', '50%', '85%'],
-    lines: 3,
-  };*/
-
   function _templateObject$4() {
@@ -304,42 +195,3 @@ var data = _taggedTemplateLiteral(["\n  border: solid 1px rgba(0, 0, 0, 0.08);\n  border-radius: 3px;\n  padding: 1.25rem;\n\n  .s-image {\n    margin-bottom: 1rem;\n  }\n"]);
   };
-   Card.propTypes = {
-    /**
-     * Card width
-     */
-    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-    /**
-     * Card max width
-     */
-    maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Display image loader "false"
-     */
-    image: PropTypes.bool,
-
-    /**
-     * Display header loader "false"
-     */
-    header: PropTypes.bool,
-
-    /**
-     * Display paragraph loader "false"
-     */
-    paragraph: PropTypes.bool,
-
-    /**
-     * Skeleton component props
-     */
-    skeletonProps: PropTypes.object,
-    className: PropTypes.string,
-    children: PropTypes.node,
-    style: PropTypes.object
-  } ;
-  /*Card.defaultProps = {
-    image: false,
-    header: false,
-    paragraph: false,
-  };*/
-
   function _templateObject$5() {
@@ -384,26 +236,2 @@ var data = _taggedTemplateLiteral(["\n  display: table;\n  width: 100%;\n\n  > * {\n    display: table-cell;\n\n    &:first-of-type {\n      padding-right: 1.5rem;\n      vertical-align: top;\n    }\n\n    &:last-of-type {\n      width: 100%;\n      vertical-align: middle;\n    }\n  }\n"]);
 
-   Comment.propTypes = {
-    /**
-     * Avatar size "45"
-     */
-    avatarSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Display avatar image as a circle "true"
-     */
-    avatarCircle: PropTypes.bool,
-
-    /**
-     * Number of comment lines "3"
-     */
-    lines: PropTypes.number,
-
-    /**
-     * Skeleton component props
-     */
-    skeletonProps: PropTypes.object,
-    className: PropTypes.string,
-    children: PropTypes.node
-  } ;
-
   function _templateObject$6() {
@@ -430,6 +258,6 @@ var data = _taggedTemplateLiteral(["\n  .s-label {\n    height: 1rem;\n    max-width: 150px;\n    margin-bottom: 0.3rem;\n  }\n  .s-input {\n    height: 2.5rem;\n    margin-bottom: 1.2rem;\n  }\n  .s-button {\n    height: 2.5rem;\n    max-width: 175px;\n  }\n"]);
         widths = _ref$widths === void 0 ? ['100%'] : _ref$widths,
+        skeletonProps = _ref.skeletonProps,
         className = _ref.className,
         children = _ref.children,
-        skeletonProps = _ref.skeletonProps,
-        rest = _objectWithoutProperties(_ref, ["inputs", "inputHeight", "button", "label", "widths", "className", "children", "skeletonProps"]);
+        rest = _objectWithoutProperties(_ref, ["inputs", "inputHeight", "button", "label", "widths", "skeletonProps", "className", "children"]);
 
@@ -458,42 +286,3 @@ var max = widths.length || 0;
   };
-   Form.propTypes = {
-    /**
-     * Show input label loader "true"
-     */
-    label: PropTypes.bool,
 
-    /**
-     * Show button loader "true"
-     */
-    button: PropTypes.bool,
-
-    /**
-     * Number of inputs "3"
-     */
-    inputs: PropTypes.number,
-
-    /**
-     * Input height
-     */
-    inputHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Array of rotating input widths. "['100%']"
-     */
-    widths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-
-    /**
-     * Skeleton component props
-     */
-    skeletonProps: PropTypes.object,
-    className: PropTypes.string,
-    children: PropTypes.node
-  } ;
-  /*Form.defaultProps = {
-    inputs: 3,
-    button: true,
-    label: true,
-    widths: ['100%'],
-  };*/
-
   function _templateObject$7() {
@@ -510,9 +299,13 @@ var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: -1rem;\n  overflow: hidden;\n\n  > * {\n    flex: 1 1 auto;\n    padding: 1rem;\n  }\n"]);
 
+  var isRenderPropFunction = function (value) {
+    return typeof value === 'function';
+  };
+
   var Grid = function (_ref) {
     var _ref$cols = _ref.cols,
         cols = _ref$cols === void 0 ? 3 : _ref$cols,
+        skeletonProps = _ref.skeletonProps,
         className = _ref.className,
-        skeletonProps = _ref.skeletonProps,
         children = _ref.children,
-        rest = _objectWithoutProperties(_ref, ["cols", "className", "skeletonProps", "children"]);
+        rest = _objectWithoutProperties(_ref, ["cols", "skeletonProps", "className", "children"]);
 
@@ -524,26 +317,6 @@ return /*#__PURE__*/React__default.createElement(Skeleton, skeletonProps, /*#__PURE__*/React__default.createElement(Wrapper$4, _extends({
         key: i
-      }, typeof children === 'function' ? children(i) : children);
+      }, isRenderPropFunction(children) ? children(i) : children);
     }) : null));
   };
-   Grid.propTypes = {
-    /**
-     * Number of repeated columns "3"
-     */
-    cols: PropTypes.number,
 
-    /**
-     * Skeleton component props
-     */
-    skeletonProps: PropTypes.object,
-
-    /**
-     * Children to repeat or callback function with index argument
-     */
-    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-    className: PropTypes.string
-  } ;
-  /*Grid.defaultProps = {
-    cols: 3,
-  };*/
-
   function _templateObject$8() {
@@ -574,12 +347,9 @@ var data = _taggedTemplateLiteral(["\n  width: 100%;\n  border-collapse: collapse;\n\n  th,\n  td {\n    padding: 0.8rem;\n    border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n  }\n\n  th {\n    .s-cell {\n      display: flex;\n      height: 2rem;\n    }\n  }\n\n  td {\n    .s-cell {\n      display: flex;\n      height: 1.25rem;\n    }\n  }\n"]);
 
-    var isArray = Array.isArray(cols);
-
-    var rowIter = _toConsumableArray(Array(rows));
-
-    var colIter = isArray ? cols : _toConsumableArray(Array(cols));
+    var rowIter = Array(rows).fill(0);
+    var colIter = Array.isArray(cols) ? cols : Array(cols).fill(0);
     var max = widths.length;
-    var td = colIter.map(function (__, j) {
+    var td = colIter.map(function (_, j) {
       return /*#__PURE__*/React__default.createElement("td", {
         key: "c-".concat(j),
-        style: isArray ? undefined : {
+        style: {
           width: widths[j % max]
@@ -610,37 +380,3 @@ }
   };
-   Table.propTypes = {
-    /**
-     * Show table head (th) "true"
-     */
-    head: PropTypes.bool,
 
-    /**
-     * Number of rows "3"
-     */
-    rows: PropTypes.number,
-
-    /**
-     * Number or columns or array of custom elements "4"
-     */
-    cols: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.node)]),
-
-    /**
-     * Array of rotating column widths. "['100%', '100%', '75%', '35%', '50%', '85%']"
-     */
-    widths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-
-    /**
-     * Skeleton component props
-     */
-    skeletonProps: PropTypes.object,
-    className: PropTypes.string,
-    children: PropTypes.node
-  } ;
-  /*Table.defaultProps = {
-    head: true,
-    rows: 3,
-    cols: 4,
-    widths: ['100%', '100%', '75%', '35%', '50%', '85%'],
-  };*/
-
   exports.Card = Card;
@@ -647,0 +383,0 @@ exports.Comment = Comment;

dist/@nejcm/react-skeleton.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@babel/runtime/helpers/extends"),require("@babel/runtime/helpers/objectWithoutProperties"),require("prop-types"),require("react"),require("@babel/runtime/helpers/defineProperty"),require("@babel/runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@babel/runtime/helpers/toConsumableArray")):"function"==typeof define&&define.amd?define(["exports","@babel/runtime/helpers/extends","@babel/runtime/helpers/objectWithoutProperties","prop-types","react","@babel/runtime/helpers/defineProperty","@babel/runtime/helpers/taggedTemplateLiteral","styled-components","@babel/runtime/helpers/toConsumableArray"],t):t((e=e||self).NejcmReactSkeleton={},e._extends,e._objectWithoutProperties,e.PropTypes,e.React,e._defineProperty,e._taggedTemplateLiteral,e.StyledComponents,e._toConsumableArray)}(this,(function(e,t,n,r,a,l,i,o,c){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t,n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n,r=r&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r;var s="default"in a?a.default:a;function d(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function m(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?d(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):d(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}l=l&&Object.prototype.hasOwnProperty.call(l,"default")?l.default:l,i=i&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i,o=o&&Object.prototype.hasOwnProperty.call(o,"default")?o.default:o,c=c&&Object.prototype.hasOwnProperty.call(c,"default")?c.default:c;var u=function(e){return e?"string"==typeof e?e:"".concat(e,"px"):void 0},p=function(e){var t=e.width,r=e.maxWidth,a=e.minWidth,l=e.height,i=e.maxHeight,o=e.minHeight,c=e.style,s=n(e,["width","maxWidth","minWidth","height","maxHeight","minHeight","style"]);return m({style:m({width:u(t),maxWidth:u(r),minWidth:u(a),height:u(l),maxHeight:u(i),minHeight:u(o)},c)},s)};function h(){var e=i([""]);return h=function(){return e},e}var f=o.div(h());function b(){var e=i([""]);return b=function(){return e},e}var g=o.div(b());function y(){var e=i(["\n  .s-loader {\n    position: relative;\n    overflow: hidden;\n    background-color: rgba(0, 0, 0, 0.055);\n\n    &:after {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(\n        90deg,\n        rgba(0, 0, 0, 0),\n        rgba(0, 0, 0, 0.07),\n        rgba(0, 0, 0, 0)\n      );\n      transform: translateX(-100%);\n    }\n  }\n\n  &.s-active {\n    .s-loader {\n      &:after {\n        animation: loading 1.75s 0.5s infinite;\n      }\n    }\n  }\n\n  &.s-inactive {\n    .s-loader {\n      &:after {\n        animation: none;\n      }\n    }\n  }\n\n  &.s-dark {\n    .s-loader {\n      background-color: rgba(255, 255, 255, 0.175);\n      &:after {\n        background: linear-gradient(\n          90deg,\n          rgba(255, 255, 255, 0),\n          rgba(255, 255, 255, 0.12),\n          rgba(255, 255, 255, 0)\n        );\n      }\n    }\n  }\n\n  @keyframes loading {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  .s-rect {\n    border-radius: 2px;\n  }\n  .s-circ {\n    border-radius: 50%;\n  }\n"]);return y=function(){return e},e}var v=o.div(y()),w=function(e){var r=e.active,a=void 0===r||r,l=e.darkTheme,i=e.className,o=n(e,["active","darkTheme","className"]);return s.createElement(v,t({className:"skeleton ".concat(i||"").concat(a?" s-active":" s-inactive").concat(l?" s-dark":"")},o))};function O(){var e=i(["\n  .s-header {\n    height: 2rem;\n    margin-bottom: 1.25rem;\n  }\n\n  .s-line {\n    height: 1.25rem;\n    margin-bottom: 0.75rem;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n"]);return O=function(){return e},e}w.Rectangle=function(e){var r=e.className,a=n(e,["className"]);return s.createElement(g,t({className:"s-rect s-loader ".concat(r||"")},p(a)))},w.Circle=function(e){var r=e.className,a=n(e,["className"]);return s.createElement(f,t({className:"s-circ s-loader ".concat(r||"")},p(a)))};var P=o.div(O()),E=function(e){var r=e.header,a=e.lines,l=void 0===a?3:a,i=e.widths,o=void 0===i?["100%","100%","75%","35%","50%","85%"]:i,d=e.skeletonProps,m=e.className,u=e.children,p=n(e,["header","lines","widths","skeletonProps","className","children"]),h=o.length||0;return s.createElement(w,d,s.createElement(P,t({className:"s-paragraph ".concat(m||"")},p),r&&s.createElement(w.Rectangle,{className:"s-header",width:"50%"}),l>0?c(Array(l)).map((function(e,t){return s.createElement(w.Rectangle,{key:t,className:"s-line",width:o[t%h]||"100%"})})):null,u))};function N(){var e=i(["\n  border: solid 1px rgba(0, 0, 0, 0.08);\n  border-radius: 3px;\n  padding: 1.25rem;\n\n  .s-image {\n    margin-bottom: 1rem;\n  }\n"]);return N=function(){return e},e}var j=o.div(N());function k(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function x(){var e=i(["\n  display: table;\n  width: 100%;\n\n  > * {\n    display: table-cell;\n\n    &:first-of-type {\n      padding-right: 1.5rem;\n      vertical-align: top;\n    }\n\n    &:last-of-type {\n      width: 100%;\n      vertical-align: middle;\n    }\n  }\n"]);return x=function(){return e},e}var R=o.div(x());function W(){var e=i(["\n  .s-label {\n    height: 1rem;\n    max-width: 150px;\n    margin-bottom: 0.3rem;\n  }\n  .s-input {\n    height: 2.5rem;\n    margin-bottom: 1.2rem;\n  }\n  .s-button {\n    height: 2.5rem;\n    max-width: 175px;\n  }\n"]);return W=function(){return e},e}var A=o.div(W());function C(){var e=i(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: -1rem;\n  overflow: hidden;\n\n  > * {\n    flex: 1 1 auto;\n    padding: 1rem;\n  }\n"]);return C=function(){return e},e}var q=o.div(C());function D(){var e=i(["\n  width: 100%;\n  border-collapse: collapse;\n\n  th,\n  td {\n    padding: 0.8rem;\n    border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n  }\n\n  th {\n    .s-cell {\n      display: flex;\n      height: 2rem;\n    }\n  }\n\n  td {\n    .s-cell {\n      display: flex;\n      height: 1.25rem;\n    }\n  }\n"]);return D=function(){return e},e}var H=o.table(D());e.Card=function(e){var r=e.width,a=e.maxWidth,i=e.image,o=e.header,c=e.paragraph,d=e.skeletonProps,m=e.className,p=e.children,h=e.style,f=n(e,["width","maxWidth","image","header","paragraph","skeletonProps","className","children","style"]),b=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?k(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):k(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({width:u(r),maxWidth:u(a)},h);return s.createElement(w,d,s.createElement(j,t({className:"s-card ".concat(m||""),style:b},f),i?s.createElement(w.Rectangle,{className:"s-image",height:200}):null,o||c?s.createElement(E,{header:o,lines:c?3:0,skeletonProps:d}):null,p))},e.Comment=function(e){var r=e.avatarSize,a=void 0===r?45:r,l=e.avatarCircle,i=void 0===l||l,o=e.lines,c=void 0===o?3:o,d=e.skeletonProps,m=e.className,u=e.children,p=n(e,["avatarSize","avatarCircle","lines","skeletonProps","className","children"]);return s.createElement(w,d,s.createElement(R,t({className:"s-comment ".concat(m||"")},p),s.createElement("div",null,i?s.createElement(w.Circle,{className:"s-avatar",width:a,height:a}):s.createElement(w.Rectangle,{className:"s-avatar",width:a,height:a})),s.createElement("div",null,s.createElement(E,{header:!1,lines:c}),u)))},e.Form=function(e){var r=e.inputs,l=void 0===r?3:r,i=e.inputHeight,o=e.button,d=void 0===o||o,m=e.label,p=void 0===m||m,h=e.widths,f=void 0===h?["100%"]:h,b=e.className,g=e.children,y=e.skeletonProps,v=n(e,["inputs","inputHeight","button","label","widths","className","children","skeletonProps"]),O=f.length||0,P=i?{height:u(i)}:void 0;return s.createElement(w,y,s.createElement(A,t({className:"s-form ".concat(b||"")},v),c(Array(l)).map((function(e,t){return s.createElement(a.Fragment,{key:t},p?s.createElement(w.Rectangle,{className:"s-label"}):null,s.createElement(w.Rectangle,{key:t,className:"s-input",width:f[t%O]||"100%",style:P}))})),d?s.createElement(w.Rectangle,{className:"s-button",style:P}):null,g))},e.Grid=function(e){var r=e.cols,a=void 0===r?3:r,l=e.className,i=e.skeletonProps,o=e.children,d=n(e,["cols","className","skeletonProps","children"]);return s.createElement(w,i,s.createElement(q,t({className:"s-grid ".concat(l||"")},d),a>0?c(Array(a)).map((function(e,t){return s.createElement("div",{key:t},"function"==typeof o?o(t):o)})):null))},e.Paragraph=E,e.Table=function(e){var r=e.head,a=void 0===r||r,l=e.rows,i=void 0===l?3:l,o=e.cols,d=void 0===o?4:o,m=e.widths,u=void 0===m?["100%","100%","75%","35%","50%","85%"]:m,p=e.skeletonProps,h=e.className,f=e.children,b=n(e,["head","rows","cols","widths","skeletonProps","className","children"]),g=Array.isArray(d),y=c(Array(i)),v=g?d:c(Array(d)),O=u.length,P=v.map((function(e,t){return s.createElement("td",{key:"c-".concat(t),style:g?void 0:{width:u[t%O]}},s.createElement(w.Rectangle,{as:"span",width:"100%",className:"s-cell"}))}));return s.createElement(w,p,s.createElement(H,t({className:"s-table ".concat(h||"")},b),a?s.createElement("thead",null,s.createElement("tr",null,v.map((function(e,t){return s.createElement("th",{key:t,align:"left"},e||s.createElement(w.Rectangle,{as:"span",width:"100%",className:"s-cell"}))})))):null,s.createElement("tbody",null,y.map((function(e,t){return s.createElement("tr",{key:t},P)})),f)))},e.default=w,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@babel/runtime/helpers/extends"),require("@babel/runtime/helpers/objectWithoutProperties"),require("react"),require("@babel/runtime/helpers/defineProperty"),require("@babel/runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@babel/runtime/helpers/toConsumableArray")):"function"==typeof define&&define.amd?define(["exports","@babel/runtime/helpers/extends","@babel/runtime/helpers/objectWithoutProperties","react","@babel/runtime/helpers/defineProperty","@babel/runtime/helpers/taggedTemplateLiteral","styled-components","@babel/runtime/helpers/toConsumableArray"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).NejcmReactSkeleton={},e._extends,e._objectWithoutProperties,e.React,e._defineProperty,e._taggedTemplateLiteral,e.StyledComponents,e._toConsumableArray)}(this,(function(e,t,n,r,a,l,i,o){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t,n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n;var c="default"in r?r.default:r;function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function d(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?s(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}a=a&&Object.prototype.hasOwnProperty.call(a,"default")?a.default:a,l=l&&Object.prototype.hasOwnProperty.call(l,"default")?l.default:l,i=i&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i,o=o&&Object.prototype.hasOwnProperty.call(o,"default")?o.default:o;var m=function(e){return e?"string"==typeof e?e:"".concat(e,"px"):void 0},u=function(e){var t=e.width,r=e.maxWidth,a=e.minWidth,l=e.height,i=e.maxHeight,o=e.minHeight,c=e.style,s=n(e,["width","maxWidth","minWidth","height","maxHeight","minHeight","style"]);return d({style:d({width:m(t),maxWidth:m(r),minWidth:m(a),height:m(l),maxHeight:m(i),minHeight:m(o)},c)},s)};function h(){var e=l([""]);return h=function(){return e},e}var p=i.div(h());function f(){var e=l([""]);return f=function(){return e},e}var b=i.div(f());function g(){var e=l(["\n  .s-loader {\n    position: relative;\n    overflow: hidden;\n    background-color: rgba(0, 0, 0, 0.055);\n\n    &:after {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(\n        90deg,\n        rgba(0, 0, 0, 0),\n        rgba(0, 0, 0, 0.07),\n        rgba(0, 0, 0, 0)\n      );\n      transform: translateX(-100%);\n    }\n  }\n\n  &.s-active {\n    .s-loader {\n      &:after {\n        animation: loading 1.75s 0.5s infinite;\n      }\n    }\n  }\n\n  &.s-inactive {\n    .s-loader {\n      &:after {\n        animation: none;\n      }\n    }\n  }\n\n  &.s-dark {\n    .s-loader {\n      background-color: rgba(255, 255, 255, 0.175);\n      &:after {\n        background: linear-gradient(\n          90deg,\n          rgba(255, 255, 255, 0),\n          rgba(255, 255, 255, 0.12),\n          rgba(255, 255, 255, 0)\n        );\n      }\n    }\n  }\n\n  @keyframes loading {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  .s-rect {\n    border-radius: 2px;\n  }\n  .s-circ {\n    border-radius: 50%;\n  }\n"]);return g=function(){return e},e}var v=i.div(g()),y=function(e){var r=e.active,a=void 0===r||r,l=e.darkTheme,i=e.className,o=n(e,["active","darkTheme","className"]);return c.createElement(v,t({className:"skeleton ".concat(i||"").concat(a?" s-active":" s-inactive").concat(l?" s-dark":"")},o))};function w(){var e=l(["\n  .s-header {\n    height: 2rem;\n    margin-bottom: 1.25rem;\n  }\n\n  .s-line {\n    height: 1.25rem;\n    margin-bottom: 0.75rem;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n"]);return w=function(){return e},e}y.displayName="Skeleton",y.Rectangle=function(e){var r=e.className,a=n(e,["className"]);return c.createElement(b,t({className:"s-rect s-loader ".concat(r||"")},u(a)))},y.Circle=function(e){var r=e.className,a=n(e,["className"]);return c.createElement(p,t({className:"s-circ s-loader ".concat(r||"")},u(a)))};var O=i.div(w()),P=function(e){var r=e.header,a=e.lines,l=void 0===a?3:a,i=e.widths,s=void 0===i?["100%","100%","75%","35%","50%","85%"]:i,d=e.skeletonProps,m=e.className,u=e.children,h=n(e,["header","lines","widths","skeletonProps","className","children"]),p=s.length||0;return c.createElement(y,d,c.createElement(O,t({className:"s-paragraph ".concat(m||"")},h),r&&c.createElement(y.Rectangle,{className:"s-header",width:"50%"}),l>0?o(Array(l)).map((function(e,t){return c.createElement(y.Rectangle,{key:t,className:"s-line",width:s[t%p]||"100%"})})):null,u))};function E(){var e=l(["\n  border: solid 1px rgba(0, 0, 0, 0.08);\n  border-radius: 3px;\n  padding: 1.25rem;\n\n  .s-image {\n    margin-bottom: 1rem;\n  }\n"]);return E=function(){return e},e}var N=i.div(E());function j(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function k(){var e=l(["\n  display: table;\n  width: 100%;\n\n  > * {\n    display: table-cell;\n\n    &:first-of-type {\n      padding-right: 1.5rem;\n      vertical-align: top;\n    }\n\n    &:last-of-type {\n      width: 100%;\n      vertical-align: middle;\n    }\n  }\n"]);return k=function(){return e},e}var x=i.div(k());function R(){var e=l(["\n  .s-label {\n    height: 1rem;\n    max-width: 150px;\n    margin-bottom: 0.3rem;\n  }\n  .s-input {\n    height: 2.5rem;\n    margin-bottom: 1.2rem;\n  }\n  .s-button {\n    height: 2.5rem;\n    max-width: 175px;\n  }\n"]);return R=function(){return e},e}var W=i.div(R());function A(){var e=l(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: -1rem;\n  overflow: hidden;\n\n  > * {\n    flex: 1 1 auto;\n    padding: 1rem;\n  }\n"]);return A=function(){return e},e}var C=i.div(A());function S(){var e=l(["\n  width: 100%;\n  border-collapse: collapse;\n\n  th,\n  td {\n    padding: 0.8rem;\n    border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n  }\n\n  th {\n    .s-cell {\n      display: flex;\n      height: 2rem;\n    }\n  }\n\n  td {\n    .s-cell {\n      display: flex;\n      height: 1.25rem;\n    }\n  }\n"]);return S=function(){return e},e}var D=i.table(S());e.Card=function(e){var r=e.width,l=e.maxWidth,i=e.image,o=e.header,s=e.paragraph,d=e.skeletonProps,u=e.className,h=e.children,p=e.style,f=n(e,["width","maxWidth","image","header","paragraph","skeletonProps","className","children","style"]),b=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?j(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):j(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({width:m(r),maxWidth:m(l)},p);return c.createElement(y,d,c.createElement(N,t({className:"s-card ".concat(u||""),style:b},f),i?c.createElement(y.Rectangle,{className:"s-image",height:200}):null,o||s?c.createElement(P,{header:o,lines:s?3:0,skeletonProps:d}):null,h))},e.Comment=function(e){var r=e.avatarSize,a=void 0===r?45:r,l=e.avatarCircle,i=void 0===l||l,o=e.lines,s=void 0===o?3:o,d=e.skeletonProps,m=e.className,u=e.children,h=n(e,["avatarSize","avatarCircle","lines","skeletonProps","className","children"]);return c.createElement(y,d,c.createElement(x,t({className:"s-comment ".concat(m||"")},h),c.createElement("div",null,i?c.createElement(y.Circle,{className:"s-avatar",width:a,height:a}):c.createElement(y.Rectangle,{className:"s-avatar",width:a,height:a})),c.createElement("div",null,c.createElement(P,{header:!1,lines:s}),u)))},e.Form=function(e){var a=e.inputs,l=void 0===a?3:a,i=e.inputHeight,s=e.button,d=void 0===s||s,u=e.label,h=void 0===u||u,p=e.widths,f=void 0===p?["100%"]:p,b=e.skeletonProps,g=e.className,v=e.children,w=n(e,["inputs","inputHeight","button","label","widths","skeletonProps","className","children"]),O=f.length||0,P=i?{height:m(i)}:void 0;return c.createElement(y,b,c.createElement(W,t({className:"s-form ".concat(g||"")},w),o(Array(l)).map((function(e,t){return c.createElement(r.Fragment,{key:t},h?c.createElement(y.Rectangle,{className:"s-label"}):null,c.createElement(y.Rectangle,{key:t,className:"s-input",width:f[t%O]||"100%",style:P}))})),d?c.createElement(y.Rectangle,{className:"s-button",style:P}):null,v))},e.Grid=function(e){var r=e.cols,a=void 0===r?3:r,l=e.skeletonProps,i=e.className,s=e.children,d=n(e,["cols","skeletonProps","className","children"]);return c.createElement(y,l,c.createElement(C,t({className:"s-grid ".concat(i||"")},d),a>0?o(Array(a)).map((function(e,t){return c.createElement("div",{key:t},"function"==typeof s?s(t):s)})):null))},e.Paragraph=P,e.Table=function(e){var r=e.head,a=void 0===r||r,l=e.rows,i=void 0===l?3:l,o=e.cols,s=void 0===o?4:o,d=e.widths,m=void 0===d?["100%","100%","75%","35%","50%","85%"]:d,u=e.skeletonProps,h=e.className,p=e.children,f=n(e,["head","rows","cols","widths","skeletonProps","className","children"]),b=Array(i).fill(0),g=Array.isArray(s)?s:Array(s).fill(0),v=m.length,w=g.map((function(e,t){return c.createElement("td",{key:"c-".concat(t),style:{width:m[t%v]}},c.createElement(y.Rectangle,{as:"span",width:"100%",className:"s-cell"}))}));return c.createElement(y,u,c.createElement(D,t({className:"s-table ".concat(h||"")},f),a?c.createElement("thead",null,c.createElement("tr",null,g.map((function(e,t){return c.createElement("th",{key:t,align:"left"},e||c.createElement(y.Rectangle,{as:"span",width:"100%",className:"s-cell"}))})))):null,c.createElement("tbody",null,b.map((function(e,t){return c.createElement("tr",{key:t},w)})),p)))},e.default=y,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=react-skeleton.umd.min.js.map

package.json

 {
   "name": "@nejcm/react-skeleton",
-  "version": "3.0.6",
+  "version": "3.1.0",
   "author": "Nejc Mursic <[e-mail]> (https://github.com/nejcm)",
@@ -39,6 +39,6 @@ "description": "React skeleton loader that allows customization with some predefined templates.",
   "scripts": {
-    "format": "prettier ./src/**/*.js --write",
+    "format": "prettier ./src/**/*.{js,jsx,ts,tsx} --write",
     "clean": "rimraf dist coverage",
-    "lint": "eslint ./src",
-    "lint:fix": "eslint ./src --fix",
+    "lint": "eslint ./src/**/*.{js,jsx,ts,tsx}",
+    "lint:fix": "eslint ./src/**/*.{js,jsx,ts,tsx} --fix",
     "test": "npm run lint && jest",
@@ -48,3 +48,6 @@ "test:cov": "jest --coverage --colors && jest-coverage-badges",
     "test:watch": "jest --watch",
-    "build": "npm run clean && kcd-scripts build --bundle --no-clean --size-snapshot",
+    "tsc": "tsc",
+    "tsc:watch": "tsc --watch",
+    "tsc:declaration": "tsc -p tsconfig.json --emitDeclarationOnly",
+    "build": "npm run clean && kcd-scripts build --bundle --no-clean --size-snapshot && npm run tsc:declaration",
     "validate": "npm run format && npm run lint && npm run test:build",
@@ -61,9 +64,10 @@ "semantic-release": "semantic-release"
   "dependencies": {
-    "@babel/runtime": "^7.10.4"
+    "@babel/runtime": "^7.11.2"
   },
   "devDependencies": {
-    "@babel/compat-data": "^7.10.4",
+    "@babel/compat-data": "^7.11.0",
     "@babel/helpers": "^7.10.4",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.11.0",
+    "@babel/plugin-transform-typescript": "^7.11.0",
     "@babel/preset-typescript": "^7.10.4",
@@ -76,8 +80,13 @@ "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/release-notes-generator": "^9.0.1",
-    "@testing-library/jest-dom": "^5.11.0",
-    "@testing-library/react": "^10.4.4",
-    "@testing-library/react-hooks": "^3.3.0",
-    "@testing-library/user-event": "^12.0.11",
-    "@types/jest": "^26.0.4",
-    "@types/react": "^16.9.41",
+    "@testing-library/jest-dom": "^5.11.2",
+    "@testing-library/react": "^10.4.8",
+    "@testing-library/react-hooks": "^3.4.1",
+    "@testing-library/user-event": "^12.1.0",
+    "@types/jest": "^26.0.8",
+    "@types/node": "^14.0.27",
+    "@types/react": "^16.9.44",
+    "@types/react-dom": "16.9.8",
+    "@types/testing-library__jest-dom": "^5.9.2",
+    "@typescript-eslint/eslint-plugin": "^3.8.0",
+    "@typescript-eslint/parser": "^3.8.0",
     "babel-loader": "^8.1.0",
@@ -88,8 +97,8 @@ "babel-plugin-minify-dead-code-elimination": "^0.5.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "codecov": "^3.7.0",
+    "codecov": "^3.7.2",
     "cpy-cli": "^3.1.1",
     "cross-env": "^7.0.2",
     "dotenv": "^8.2.0",
-    "eslint": "^7.4.0",
-    "eslint-config-kentcdodds": "^14.14.1",
+    "eslint": "^7.6.0",
+    "eslint-config-kentcdodds": "^14.14.2",
     "eslint-config-react-app": "^5.2.1",
@@ -101,13 +110,13 @@ "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jest": "^23.18.0",
+    "eslint-plugin-jest": "^23.20.0",
     "eslint-plugin-jsx-a11y": "6.3.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.6",
+    "eslint-plugin-react": "^7.20.5",
+    "eslint-plugin-react-hooks": "^4.0.8",
     "eslint-plugin-standard": "^4.0.1",
-    "jest": "^26.1.0",
+    "jest": "^26.2.2",
     "jest-coverage-badges": "^1.1.2",
     "jest-environment-jsdom-fourteen": "^1.0.1",
-    "jest-resolve": "^26.1.0",
+    "jest-resolve": "^26.2.2",
     "jest-watch-typeahead": "^0.6.0",
@@ -123,3 +132,3 @@ "kcd-scripts": "^6.2.4",
     "rimraf": "^3.0.2",
-    "rollup": "^2.21.0",
+    "rollup": "^2.23.0",
     "rollup-plugin-babel": "^4.4.0",
@@ -129,6 +138,9 @@ "rollup-plugin-commonjs": "^10.1.0",
     "serve": "^11.3.2",
-    "start-server-and-test": "^1.11.0",
+    "start-server-and-test": "^1.11.2",
     "style-loader": "^1.2.1",
     "styled-components": "5.1.1",
-    "typescript": "^3.9.6"
+    "ts-jest": "^26.1.4",
+    "ts-loader": "^8.0.2",
+    "tslib": "^2.0.0",
+    "typescript": "^3.9.7"
   },
@@ -135,0 +147,0 @@ "browserslist": [

types/index.d.ts

@@ -1,81 +0,8 @@
-import * as React from 'react';
-
-export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-  darkTheme?: boolean;
-  active?: boolean;
-}
-
-export interface ChildProps {
-  width?: string | number;
-  minWidth?: string | number;
-  maxWidth?: string | number;
-  height?: string | number;
-  minHeight?: string | number;
-  maxHeight?: string | number;
-}
-
-export interface SkeletonRectangleProps
-  extends ChildProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-export interface SkeletonCircleProps
-  extends ChildProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-export interface SkeletonSFC extends React.SFC<SkeletonProps> {
-  Rectangle: React.SFC<SkeletonRectangleProps>;
-  Circle: React.SFC<SkeletonCircleProps>;
-}
-
-declare const Skeleton: SkeletonSFC;
+import Skeleton from './components/Skeleton';
 export default Skeleton;
-
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  width?: string | number;
-  maxWidth?: string | number;
-  image?: boolean;
-  header?: boolean;
-  paragraph?: boolean;
-  skeletonProps?: SkeletonProps;
-}
-export const Card: React.SFC<CardProps>;
-
-export interface CommentProps extends React.HTMLAttributes<HTMLDivElement> {
-  avatarSize?: number;
-  avatarCircle?: boolean;
-  lines?: number;
-  skeletonProps?: SkeletonProps;
-}
-export const Comment: React.SFC<CommentProps>;
-
-export interface FormProps extends React.HTMLAttributes<HTMLDivElement> {
-  label?: boolean;
-  button?: boolean;
-  inputs?: number;
-  inputHeight?: string | number;
-  widths?: Array<string | number>;
-  skeletonProps?: SkeletonProps;
-}
-export const Form: React.SFC<FormProps>;
-
-export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
-  cols?: number;
-  skeletonProps?: SkeletonProps;
-}
-export const Grid: React.SFC<GridProps>;
-
-export interface ParagraphProps extends React.HTMLAttributes<HTMLDivElement> {
-  header?: boolean;
-  lines?: number;
-  widths?: Array<string | number>;
-  skeletonProps?: SkeletonProps;
-}
-export const Paragraph: React.SFC<ParagraphProps>;
-
-export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
-  head?: boolean;
-  rows?: number;
-  cols?: number | Array<React.ReactNode>;
-  skeletonProps?: SkeletonProps;
-}
-export const Table: React.SFC<TableProps>;
+export { Card } from './components/Templates/Card';
+export { Comment } from './components/Templates/Comment';
+export { Form } from './components/Templates/Form';
+export { Grid } from './components/Templates/Grid';
+export { Paragraph } from './components/Templates/Paragraph';
+export { Table } from './components/Templates/Table';

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Number of package files

36

increased by260%

Number of low supply chain risk alerts

4

decreased by-81.82%

Worsened metrics

Total package byte prevSize

126079

decreased by-13.1%

Dev dependency count

73

increased by14.06%

Lines of code

1249

decreased by-29.28%

Dependency changes

• Updated@babel/runtime@^7.11.2