@desynova-digital/components 9.0.20 → 9.0.22

package/_helpers/pagination.js

@@ -11,10 +11,10 @@ exports.getPaginationSlice = getPaginationSlice;
 
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
-/**
- * Calculates the page input width based on the characters
- * it contains.
- * @param {number} page
+/**
+ * Calculates the page input width based on the characters
+ * it contains.
+ * @param {number} page
  */
 function pageInputWidth(page) {
   var charWidth = 8;
@@ -26,24 +26,24 @@ function pageInputWidth(page) {
   return pageCharLength * charWidth + baseWidth;
 }
 
-/**
- * Calculates the number of pages required given
- * the total number of items and the desired items
- * per page.
- * @param {number} items
- * @param {number} perPage
+/**
+ * Calculates the number of pages required given
+ * the total number of items and the desired items
+ * per page.
+ * @param {number} items
+ * @param {number} perPage
  */
 function pagesFromItems(items, perPage) {
   return Math.ceil(items / perPage);
 }
 
-/**
- * Determines if the page should change based on the
- * expected next page and the number of pages.
- * @param {number | string} rawNextPage
- * @param {number} total
- * @param {number} perPage
- * @param {function} handlerFn
+/**
+ * Determines if the page should change based on the
+ * expected next page and the number of pages.
+ * @param {number | string} rawNextPage
+ * @param {number} total
+ * @param {number} perPage
+ * @param {function} handlerFn
  */
 function changePageIfAppropiate(rawNextPage, total, perPage, handlerFn) {
   var nextPage = parseInt(rawNextPage);
@@ -53,11 +53,11 @@ function changePageIfAppropiate(rawNextPage, total, perPage, handlerFn) {
   if (nextPageExists) handlerFn(nextPage);
 }
 
-/**
- * Calculates the totals for the current page
- * @param {number} page
- * @param {number} perPage
- * @param {number} items
+/**
+ * Calculates the totals for the current page
+ * @param {number} page
+ * @param {number} perPage
+ * @param {number} items
  */
 function totals(page, perPage, items) {
   var toRecord = page * perPage;
@@ -66,22 +66,22 @@ function totals(page, perPage, items) {
   return "Showing " + fromRecord + " - " + toRecord + " of " + items;
 }
 
-/**
- * Calculates the pagintion slice range for a given page.
- *
- * Example:
- *  Given the page 77 with a pages-per-slice value of 10,
- *  we would obtain the following range:
- *
- *    70, 71, 72, [[73]], 74, 75, 76, 77, 78, 79, ..., 310
- *
- *  with the format:
- *    { label: number | string, selected: boolean, clickable: boolean }.
- *
- * @param {number} page
- * @param {number} items
- * @param {number} itemsPerPage
- * @param {number} pagesPerSlice
+/**
+ * Calculates the pagintion slice range for a given page.
+ *
+ * Example:
+ *  Given the page 77 with a pages-per-slice value of 10,
+ *  we would obtain the following range:
+ *
+ *    70, 71, 72, [[73]], 74, 75, 76, 77, 78, 79, ..., 310
+ *
+ *  with the format:
+ *    { label: number | string, selected: boolean, clickable: boolean }.
+ *
+ * @param {number} page
+ * @param {number} items
+ * @param {number} itemsPerPage
+ * @param {number} pagesPerSlice
  */
 function getPaginationSlice(page, items, itemsPerPage) {
   var pagesPerSlice = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 10;

package/_helpers/story-helpers.js

@@ -1,15 +1,15 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Stack = exports.Example = undefined;
 
-var _storyExample = require('./story-example');
+var _storyExample = require("./story-example");
 
 var _storyExample2 = _interopRequireDefault(_storyExample);
 
-var _storyStack = require('./story-stack');
+var _storyStack = require("./story-stack");
 
 var _storyStack2 = _interopRequireDefault(_storyStack);
 

package/_helpers/uniqueId.js

@@ -1,16 +1,16 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var id = function id() {
-  var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
 
-  prefix = prefix.toLowerCase().replace(/ /g, '_');
+  prefix = prefix.toLowerCase().replace(/ /g, "_");
 
   var hash = Math.random().toString(36).substring(5);
 
-  return prefix + '-' + hash;
+  return prefix + "-" + hash;
 };
 
 exports.default = id;

package/atoms/badge/index.js

@@ -1,11 +1,11 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledBadge = undefined;
 
-var _badge = require('./badge');
+var _badge = require("./badge");
 
 var _badge2 = _interopRequireDefault(_badge);
 

package/atoms/card/index.js

@@ -1,11 +1,11 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledCard = undefined;
 
-var _card = require('./card');
+var _card = require("./card");
 
 var _card2 = _interopRequireDefault(_card);
 

package/atoms/cardStack/index.js

@@ -1,11 +1,11 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CardStackBox = undefined;
 
-var _cardStack = require('./cardStack');
+var _cardStack = require("./cardStack");
 
 var _cardStack2 = _interopRequireDefault(_cardStack);
 

package/atoms/cardV2/thumbnail.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
 var _templateObject = _taggedTemplateLiteral(['\n  background: rgba(0, 0, 0, 0.5);\n'], ['\n  background: rgba(0, 0, 0, 0.5);\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  position: relative;\n  background: ', ';\n  background-size: cover;\n  width: ', ';\n  height: ', ';\n\n  .iframe-image-block {\n    cursor: ', ';\n    background: #000;\n    opacity: 0;\n    &:hover {\n      opacity: 1;\n    }\n    .hover-pointer {\n      position: absolute;\n      width: 1px;\n      height: 100%;\n      top: 0;\n      background: #fff;\n      pointer-events: none;\n      z-index: 1;\n    }\n  }\n  .background-block {\n    position: absolute;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n    .circle {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      background-color: #15212f;\n    }\n    i {\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n    }\n    img {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: auto;\n    }\n  }\n  .thumbnail-image-block {\n    cursor: pointer;\n    background: #182738;\n  }\n'], ['\n  position: relative;\n  background: ', ';\n  background-size: cover;\n  width: ', ';\n  height: ', ';\n\n  .iframe-image-block {\n    cursor: ', ';\n    background: #000;\n    opacity: 0;\n    &:hover {\n      opacity: 1;\n    }\n    .hover-pointer {\n      position: absolute;\n      width: 1px;\n      height: 100%;\n      top: 0;\n      background: #fff;\n      pointer-events: none;\n      z-index: 1;\n    }\n  }\n  .background-block {\n    position: absolute;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n    .circle {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      background-color: #15212f;\n    }\n    i {\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n    }\n    img {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: auto;\n    }\n  }\n  .thumbnail-image-block {\n    cursor: pointer;\n    background: #182738;\n  }\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  position: relative;\n  background: ', ';\n  background-color:', ';\n  background-size: ', ';\n  width: ', ';\n  height: ', ';\n\n  .iframe-image-block {\n    cursor: ', ';\n    background: #000;\n    opacity: 0;\n    &:hover {\n      opacity: 1;\n    }\n    .hover-pointer {\n      position: absolute;\n      width: 1px;\n      height: 100%;\n      top: 0;\n      background: #fff;\n      pointer-events: none;\n      z-index: 1;\n    }\n  }\n  .background-block {\n    position: absolute;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n    .circle {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      background-color: #15212f;\n    }\n    i {\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n    }\n    img {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: auto;\n    }\n  }\n  .thumbnail-image-block {\n    cursor: pointer;\n    background: #182738;\n  }\n'], ['\n  position: relative;\n  background: ', ';\n  background-color:', ';\n  background-size: ', ';\n  width: ', ';\n  height: ', ';\n\n  .iframe-image-block {\n    cursor: ', ';\n    background: #000;\n    opacity: 0;\n    &:hover {\n      opacity: 1;\n    }\n    .hover-pointer {\n      position: absolute;\n      width: 1px;\n      height: 100%;\n      top: 0;\n      background: #fff;\n      pointer-events: none;\n      z-index: 1;\n    }\n  }\n  .background-block {\n    position: absolute;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n    .circle {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      background-color: #15212f;\n    }\n    i {\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n    }\n    img {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: auto;\n    }\n  }\n  .thumbnail-image-block {\n    cursor: pointer;\n    background: #182738;\n  }\n']),
     _templateObject3 = _taggedTemplateLiteral(['\n  z-index: 2;\n  .uploadWrapper {\n    border-radius: 50%;\n    background: ', ';\n\n    color: ', ';\n    width: 25px;\n    height: 25px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    .wrapper {\n      font-size: 10px;\n      font-family: \'SFUIText-Regular\';\n      line-height: 1.1;\n      text-transform: uppercase;\n    }\n  }\n'], ['\n  z-index: 2;\n  .uploadWrapper {\n    border-radius: 50%;\n    background: ', ';\n\n    color: ', ';\n    width: 25px;\n    height: 25px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    .wrapper {\n      font-size: 10px;\n      font-family: \'SFUIText-Regular\';\n      line-height: 1.1;\n      text-transform: uppercase;\n    }\n  }\n']),
     _templateObject4 = _taggedTemplateLiteral(['\n  position: relative;\n  padding: 5px 8px;\n  width: fit-content;\n  border-radius: 15px;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n  ', ';\n\n  .status-color {\n    height: 6px;\n    width: 6px;\n    border-radius: 100%;\n    background-color: ', ';\n    margin-right: 5px;\n  }\n\n  .status-text {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-line-clamp: 1;\n    height: 10px;\n  }\n'], ['\n  position: relative;\n  padding: 5px 8px;\n  width: fit-content;\n  border-radius: 15px;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n  ', ';\n\n  .status-color {\n    height: 6px;\n    width: 6px;\n    border-radius: 100%;\n    background-color: ', ';\n    margin-right: 5px;\n  }\n\n  .status-text {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-line-clamp: 1;\n    height: 10px;\n  }\n']),
     _templateObject5 = _taggedTemplateLiteral(['\n  ', ';\n\n  .tooltip {\n    position: absolute;\n    bottom: 130%;\n    left: 30%;\n    transform: translateX(-50%);\n    padding: 5px 9px;\n    box-sizing: border-box;\n    background: #000000;\n    color: #fff;\n    border-radius: 10px;\n    visibility: hidden;\n    opacity: 0;\n    z-index: 10;\n    transition: all 350ms ease-in-out 0s;\n    &:after {\n      content: \'\';\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top: 5px solid #000;\n      bottom: -5px;\n      left: 50%;\n    }\n    .details-header {\n      color: #666666;\n      font-family: \'SFUIText-Regular\';\n      text-transform: none;\n      margin-bottom: 8px;\n    }\n    .details-value {\n      color: #999999;\n      font-family: \'SFUIText-Light\';\n      text-transform: none;\n      font-size: 10px;\n    }\n  }\n\n  &:hover {\n    background-color: ', ';\n    .tooltip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n  &:active,\n  &:focus {\n    outline: none;\n  }\n'], ['\n  ', ';\n\n  .tooltip {\n    position: absolute;\n    bottom: 130%;\n    left: 30%;\n    transform: translateX(-50%);\n    padding: 5px 9px;\n    box-sizing: border-box;\n    background: #000000;\n    color: #fff;\n    border-radius: 10px;\n    visibility: hidden;\n    opacity: 0;\n    z-index: 10;\n    transition: all 350ms ease-in-out 0s;\n    &:after {\n      content: \'\';\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top: 5px solid #000;\n      bottom: -5px;\n      left: 50%;\n    }\n    .details-header {\n      color: #666666;\n      font-family: \'SFUIText-Regular\';\n      text-transform: none;\n      margin-bottom: 8px;\n    }\n    .details-value {\n      color: #999999;\n      font-family: \'SFUIText-Light\';\n      text-transform: none;\n      font-size: 10px;\n    }\n  }\n\n  &:hover {\n    background-color: ', ';\n    .tooltip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n  &:active,\n  &:focus {\n    outline: none;\n  }\n']),
@@ -49,17 +49,33 @@ function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defi
 
 var OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject);
 
+var assetStyles = {
+  "folder": {
+    backgroundColor: '#121D29',
+    backgroundSize: 'inherit'
+  },
+  "asset": {
+    backgroundColor: 'inherit',
+    backgroundSize: 'cover' }
+};
+
 var ThumbnailStyles = _styledComponents2.default.div(_templateObject2, function (_ref) {
   var thumbnail = _ref.thumbnail;
   return 'url(' + thumbnail + ') no-repeat 50%';
 }, function (_ref2) {
-  var width = _ref2.width;
-  return width === 'sm' ? '90px' : width === 'md' ? '125px' : '222px';
+  var data_type = _ref2.data_type;
+  return assetStyles[data_type].backgroundColor || 'inherit';
 }, function (_ref3) {
-  var width = _ref3.width;
-  return width === 'sm' ? '50px' : width === 'md' ? '70px' : '126px';
+  var data_type = _ref3.data_type;
+  return assetStyles[data_type].backgroundSize || 'cover';
 }, function (_ref4) {
-  var isClickPrevented = _ref4.isClickPrevented;
+  var width = _ref4.width;
+  return width === 'sm' ? '90px' : width === 'md' ? '125px' : '222px';
+}, function (_ref5) {
+  var width = _ref5.width;
+  return width === 'sm' ? '50px' : width === 'md' ? '70px' : '126px';
+}, function (_ref6) {
+  var isClickPrevented = _ref6.isClickPrevented;
   return !isClickPrevented ? 'pointer' : 'default';
 });
 
@@ -69,8 +85,8 @@ var UploadTypeContainer = _styledComponents2.default.div(_templateObject3, funct
   return props.upload_type === 'rc' ? '#FFFFFF' : '#0C141D';
 });
 
-var StatusBoxStyles = _styledComponents2.default.div(_templateObject4, OverlayBackgroundStyles, function (_ref5) {
-  var hex = _ref5.hex;
+var StatusBoxStyles = _styledComponents2.default.div(_templateObject4, OverlayBackgroundStyles, function (_ref7) {
+  var hex = _ref7.hex;
   return hex.background;
 });
 
@@ -93,7 +109,8 @@ var Thumbnail = function Thumbnail(props) {
       actionClick = props.actionClick,
       upload_status = props.upload_status,
       upload_type = props.upload_type,
-      file_type = props.file_type;
+      file_type = props.file_type,
+      data_type = props.data_type;
 
   var _useState = (0, _react.useState)(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -171,7 +188,8 @@ var Thumbnail = function Thumbnail(props) {
       thumbnail: thumbnail,
       isClickPrevented: isClickPrevented,
       onClick: handleThumbnailClick,
-      theme: props.theme
+      theme: props.theme,
+      data_type: data_type
     },
     _react2.default.createElement(
       CardHeader,

package/atoms/checkbox/index.js

@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _checkbox = require('./checkbox');
+var _checkbox = require("./checkbox");
 
 var _checkbox2 = _interopRequireDefault(_checkbox);
 

package/atoms/customSelect/index.js

@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _customSelect = require('./customSelect');
+var _customSelect = require("./customSelect");
 
 var _customSelect2 = _interopRequireDefault(_customSelect);
 

package/atoms/datePicker/index.js

@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _datePicker = require('./datePicker');
+var _datePicker = require("./datePicker");
 
 var _datePicker2 = _interopRequireDefault(_datePicker);
 

package/atoms/dropdown/index.js

@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _dropdown = require('./dropdown');
+var _dropdown = require("./dropdown");
 
 var _dropdown2 = _interopRequireDefault(_dropdown);
 

package/atoms/dropdownList/index.js

@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _dropdownList = require('./dropdownList');
+var _dropdownList = require("./dropdownList");
 
 var _dropdownList2 = _interopRequireDefault(_dropdownList);
 

package/atoms/graphs/barGraph/index.js

@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _barGraph = require('./barGraph');
+var _barGraph = require("./barGraph");
 
 var _barGraph2 = _interopRequireDefault(_barGraph);
 

package/atoms/graphs/circleGraph/index.js

@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _circleGraph = require('./circleGraph');
+var _circleGraph = require("./circleGraph");
 
 var _circleGraph2 = _interopRequireDefault(_circleGraph);
 

package/atoms/graphs/pieChart/index.js

@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _pieChart = require('./pieChart');
+var _pieChart = require("./pieChart");
 
 var _pieChart2 = _interopRequireDefault(_pieChart);
 

package/atoms/image/image.js

@@ -1,22 +1,22 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _templateObject = _taggedTemplateLiteral(['\n    user-select: none;\n    pointer-events: none;\n    width: ', ';\n    height: ', ';\n    top: 50%;\n    left: 50%;\n    position: relative;\n    transform: translate(-50%, -50%);\n    -webkit-transform: translate(-50%, -50%);\n    -moz-transform: translate(-50%, -50%);\n    -ms-transform: translate(-50%, -50%);\n    -o-transform: translate(-50%, -50%);\n'], ['\n    user-select: none;\n    pointer-events: none;\n    width: ', ';\n    height: ', ';\n    top: 50%;\n    left: 50%;\n    position: relative;\n    transform: translate(-50%, -50%);\n    -webkit-transform: translate(-50%, -50%);\n    -moz-transform: translate(-50%, -50%);\n    -ms-transform: translate(-50%, -50%);\n    -o-transform: translate(-50%, -50%);\n']);
+var _templateObject = _taggedTemplateLiteral(["\n  user-select: none;\n  pointer-events: none;\n  width: ", ";\n  height: ", ";\n  top: 50%;\n  left: 50%;\n  position: relative;\n  transform: translate(-50%, -50%);\n  -webkit-transform: translate(-50%, -50%);\n  -moz-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  -o-transform: translate(-50%, -50%);\n"], ["\n  user-select: none;\n  pointer-events: none;\n  width: ", ";\n  height: ", ";\n  top: 50%;\n  left: 50%;\n  position: relative;\n  transform: translate(-50%, -50%);\n  -webkit-transform: translate(-50%, -50%);\n  -moz-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  -o-transform: translate(-50%, -50%);\n"]);
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _styledComponents = require('styled-components');
+var _styledComponents = require("styled-components");
 
 var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
@@ -25,27 +25,27 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var StyledImage = _styledComponents2.default.img(_templateObject, function (props) {
-    return props.width;
+  return props.width;
 }, function (props) {
-    return props.height;
+  return props.height;
 });
 
 var Image = function Image(props) {
-    return _react2.default.createElement(StyledImage, _extends({ src: props.source, alt: props.alt }, props));
+  return _react2.default.createElement(StyledImage, _extends({ src: props.source, alt: props.alt }, props));
 };
 
 Image.propTypes = {
-    source: _propTypes2.default.string.isRequired,
-    alt: _propTypes2.default.string,
-    width: _propTypes2.default.string,
-    height: _propTypes2.default.string
+  source: _propTypes2.default.string.isRequired,
+  alt: _propTypes2.default.string,
+  width: _propTypes2.default.string,
+  height: _propTypes2.default.string
 };
 
 Image.defaultProps = {
-    source: null,
-    alt: null,
-    width: '100%',
-    height: 'auto'
+  source: null,
+  alt: null,
+  width: "100%",
+  height: "auto"
 };
 
 exports.default = Image;

package/atoms/image/image.story.js

@@ -1,24 +1,24 @@
-'use strict';
+"use strict";
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _react3 = require('@storybook/react');
+var _react3 = require("@storybook/react");
 
-var _storyHelpers = require('../../_helpers/story-helpers');
+var _storyHelpers = require("../../_helpers/story-helpers");
 
-var _components = require('../../components');
+var _components = require("../../components");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-(0, _react3.storiesOf)('Image').add('url', function () {
-    return _react2.default.createElement(
-        _storyHelpers.Example,
-        { title: 'Icons' },
-        _react2.default.createElement(_components.Image, {
-            source: 'https://tassets.desynova.com/img/topaz-logo.png',
-            alt: 'topaz logo'
-        })
-    );
+(0, _react3.storiesOf)("Image").add("url", function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: "Icons" },
+    _react2.default.createElement(_components.Image, {
+      source: "https://tassets.desynova.com/img/topaz-logo.png",
+      alt: "topaz logo"
+    })
+  );
 });

package/atoms/image/index.js

@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _image = require('./image');
+var _image = require("./image");
 
 var _image2 = _interopRequireDefault(_image);
 

package/atoms/inputText/index.js

@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _inputText = require('./inputText');
+var _inputText = require("./inputText");
 
 var _inputText2 = _interopRequireDefault(_inputText);
 

package/atoms/loader/ShimmerComponent/Shimmer.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 var _templateObject = _taggedTemplateLiteral(['\n    0% {\n      transform: translateX(-100%);\n    }   \n    \n    100% {\n      transform: translateX(100%);\n    }\n'], ['\n    0% {\n      transform: translateX(-100%);\n    }   \n    \n    100% {\n      transform: translateX(100%);\n    }\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  position: relative;\n  background-color: linear-gradient(\n    85deg,\n    rgba(48, 63, 81, 0.5) 0%,\n    rgba(48, 63, 81, 0.24) 50.76%,\n    rgba(48, 63, 81, 0.11) 68.68%,\n    rgba(48, 63, 81, 0) 100%\n  );\n  width: ', ';\n  height: ', ';\n  border-radius: 38px;\n  overflow: hidden;\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.11);\n  &::after {\n    display: block;\n    content: \'\';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    transform: translateX(-100%);\n    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);\n    animation: ', ' 1s infinite;\n  }\n'], ['\n  position: relative;\n  background-color: linear-gradient(\n    85deg,\n    rgba(48, 63, 81, 0.5) 0%,\n    rgba(48, 63, 81, 0.24) 50.76%,\n    rgba(48, 63, 81, 0.11) 68.68%,\n    rgba(48, 63, 81, 0) 100%\n  );\n  width: ', ';\n  height: ', ';\n  border-radius: 38px;\n  overflow: hidden;\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.11);\n  &::after {\n    display: block;\n    content: \'\';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    transform: translateX(-100%);\n    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);\n    animation: ', ' 1s infinite;\n  }\n']);
+    _templateObject2 = _taggedTemplateLiteral(['\n  position: relative;\n  background-color: linear-gradient(\n    85deg,\n    rgba(48, 63, 81, 0.5) 0%,\n    rgba(48, 63, 81, 0.24) 50.76%,\n    rgba(48, 63, 81, 0.11) 68.68%,\n    rgba(48, 63, 81, 0) 100%\n  );\n  width: ', ';\n  height: ', ';\n  border-radius: ', ';\n  overflow: hidden;\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.11);\n  &::after {\n    display: block;\n    content: \'\';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    transform: translateX(-100%);\n    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);\n    animation: ', ' 1s infinite;\n  }\n'], ['\n  position: relative;\n  background-color: linear-gradient(\n    85deg,\n    rgba(48, 63, 81, 0.5) 0%,\n    rgba(48, 63, 81, 0.24) 50.76%,\n    rgba(48, 63, 81, 0.11) 68.68%,\n    rgba(48, 63, 81, 0) 100%\n  );\n  width: ', ';\n  height: ', ';\n  border-radius: ', ';\n  overflow: hidden;\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.11);\n  &::after {\n    display: block;\n    content: \'\';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    transform: translateX(-100%);\n    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);\n    animation: ', ' 1s infinite;\n  }\n']);
 
 var _react = require('react');
 
@@ -25,16 +25,19 @@ var ShimmerContainer = _styledComponents2.default.div(_templateObject2, function
   return props.width;
 }, function (props) {
   return props.height;
+}, function (props) {
+  return props.borderRadius || '38px';
 }, shimmerAnimation);
 
 var Shimmer = function Shimmer(_ref) {
   var height = _ref.height,
-      width = _ref.width;
+      width = _ref.width,
+      borderRadius = _ref.borderRadius;
 
   return _react2.default.createElement(
     'div',
     { style: { marginRight: '2px' } },
-    _react2.default.createElement(ShimmerContainer, { width: width, height: height }),
+    _react2.default.createElement(ShimmerContainer, { width: width, height: height, borderRadius: borderRadius }),
     ' '
   );
 };

package/atoms/loader/ShimmerComponent/Shimmer.jsx

@@ -22,7 +22,7 @@ const ShimmerContainer = styled.div`
   );
   width: ${(props) => props.width};
   height: ${(props) => props.height};
-  border-radius: 38px;
+  border-radius: ${(props) => props.borderRadius || '38px'};
   overflow: hidden;
   box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.11);
   &::after {
@@ -37,10 +37,10 @@ const ShimmerContainer = styled.div`
   }
 `;
 
-const Shimmer = ({ height, width }) => {
+const Shimmer = ({ height, width, borderRadius }) => {
   return (
     <div style={{ marginRight: '2px' }}>
-      <ShimmerContainer width={width} height={height} />{' '}
+      <ShimmerContainer width={width} height={height} borderRadius={borderRadius} />{' '}
     </div>
   );
 };

package/atoms/radio/index.js

@@ -1,11 +1,11 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledRadioOption = exports.StyledRadio = undefined;
 
-var _radio = require('./radio');
+var _radio = require("./radio");
 
 var _radio2 = _interopRequireDefault(_radio);
 

package/atoms/select/index.js

@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _select = require('./select');
+var _select = require("./select");
 
 var _select2 = _interopRequireDefault(_select);
 

package/atoms/switch/index.js

@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _switch = require('./switch');
+var _switch = require("./switch");
 
 var _switch2 = _interopRequireDefault(_switch);