@desynova-digital/components 8.19.49 → 8.19.50

package/atoms/button/button.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 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  position: relative;\n  &:hover {\n    .tooltip-block {\n      display: block;\n    }\n  }\n  .tooltip-block {\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    background: #000;\n    padding: 10px 8px;\n    border-radius: 5px;\n    font-size: 12px;\n    text-transform: initial;\n    display: none;\n    color: #fff;\n    font-family: SFUIText-Regular;\n    left: 50%;\n    transform: translateX(-50%);\n    &:after {\n      content: \"\";\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n\n      ", "\n      left: 50%;\n      transform: translateX(-50%);\n    }\n  }\n"], ["\n  position: relative;\n  &:hover {\n    .tooltip-block {\n      display: block;\n    }\n  }\n  .tooltip-block {\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    background: #000;\n    padding: 10px 8px;\n    border-radius: 5px;\n    font-size: 12px;\n    text-transform: initial;\n    display: none;\n    color: #fff;\n    font-family: SFUIText-Regular;\n    left: 50%;\n    transform: translateX(-50%);\n    &:after {\n      content: \"\";\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n\n      ", "\n      left: 50%;\n      transform: translateX(-50%);\n    }\n  }\n"]),
-    _templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  text-transform: uppercase;\n  text-align: center;\n  font-size: 14px;\n  position: relative;\n  align-items: center;\n  font-weight: 600;\n  top: 0;\n  margin: 0 auto;\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  background: ", ";\n  border-color: ", ";\n\n  color: ", ";\n\n  padding: ", ";\n\n  opacity: ", ";\n  cursor: ", ";\n  pointer-events: ", ";\n\n  border-radius: ", ";\n\n  /* box-shadow: ", ";\n  transition: ", "; */\n\n  ", " {\n    position: relative;\n    top: 0px;\n    width: ", ";\n    height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    background: ", ";\n    border-radius: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &:hover {\n    transition: all 0.4s;\n    color: ", ";\n    box-shadow: ", ";\n    /* top: ", "; */\n    background: ", ";\n    border-color: ", ";\n    transition: ", ";\n    box-shadow: ", ";\n    \n    ", " {\n\n      path{\n       \n      ", "\n      ", "\n       \n      }\n    }\n  }\n\n  &:focus {\n    background: ", ";\n    border-color: ", ";\n    outline: none;\n  }\n\n  &:active {\n    background: ", ";\n    border-color: ", ";\n    outline: none;\n  }\n"], ["\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  text-transform: uppercase;\n  text-align: center;\n  font-size: 14px;\n  position: relative;\n  align-items: center;\n  font-weight: 600;\n  top: 0;\n  margin: 0 auto;\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  background: ", ";\n  border-color: ", ";\n\n  color: ", ";\n\n  padding: ", ";\n\n  opacity: ", ";\n  cursor: ", ";\n  pointer-events: ", ";\n\n  border-radius: ", ";\n\n  /* box-shadow: ", ";\n  transition: ", "; */\n\n  ", " {\n    position: relative;\n    top: 0px;\n    width: ", ";\n    height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    background: ", ";\n    border-radius: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &:hover {\n    transition: all 0.4s;\n    color: ", ";\n    box-shadow: ", ";\n    /* top: ", "; */\n    background: ", ";\n    border-color: ", ";\n    transition: ", ";\n    box-shadow: ", ";\n    \n    ", " {\n\n      path{\n       \n      ", "\n      ", "\n       \n      }\n    }\n  }\n\n  &:focus {\n    background: ", ";\n    border-color: ", ";\n    outline: none;\n  }\n\n  &:active {\n    background: ", ";\n    border-color: ", ";\n    outline: none;\n  }\n"]),
+    _templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  text-transform: uppercase;\n  text-align: center;\n  font-size: 14px;\n  position: relative;\n  align-items: center;\n  font-weight: 600;\n  top: 0;\n  margin: 0 auto;\n  width:  ", ";\n  /* width: ", "; */\n  height: ", ";\n  border: ", ";\n  background: ", ";\n  border-color: ", ";\n\n  color: ", ";\n\n  padding: ", ";\n\n  opacity: ", ";\n  cursor: ", ";\n  pointer-events: ", ";\n\n  border-radius: ", ";\n\n  /* box-shadow: ", ";\n  transition: ", "; */\n\n  ", " {\n    position: relative;\n    top: 0px;\n    width: ", ";\n    height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    background: ", ";\n    border-radius: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &:hover {\n    transition: all 0.4s;\n    color: ", ";\n    box-shadow: ", ";\n    /* top: ", "; */\n    background: ", ";\n    border-color: ", ";\n    transition: ", ";\n    box-shadow: ", ";\n    \n    ", " {\n\n      path{\n       \n      ", "\n      ", "\n       \n      }\n    }\n  }\n\n  &:focus {\n    background: ", ";\n    border-color: ", ";\n    outline: none;\n  }\n\n  &:active {\n    background: ", ";\n    border-color: ", ";\n    outline: none;\n  }\n  .loader-wrapper{\n    position: absolute;\n    top:50%;\n    left:50%;\n    transform: translate(-50%, -50%);\n  }\n"], ["\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  text-transform: uppercase;\n  text-align: center;\n  font-size: 14px;\n  position: relative;\n  align-items: center;\n  font-weight: 600;\n  top: 0;\n  margin: 0 auto;\n  width:  ", ";\n  /* width: ", "; */\n  height: ", ";\n  border: ", ";\n  background: ", ";\n  border-color: ", ";\n\n  color: ", ";\n\n  padding: ", ";\n\n  opacity: ", ";\n  cursor: ", ";\n  pointer-events: ", ";\n\n  border-radius: ", ";\n\n  /* box-shadow: ", ";\n  transition: ", "; */\n\n  ", " {\n    position: relative;\n    top: 0px;\n    width: ", ";\n    height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    background: ", ";\n    border-radius: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &:hover {\n    transition: all 0.4s;\n    color: ", ";\n    box-shadow: ", ";\n    /* top: ", "; */\n    background: ", ";\n    border-color: ", ";\n    transition: ", ";\n    box-shadow: ", ";\n    \n    ", " {\n\n      path{\n       \n      ", "\n      ", "\n       \n      }\n    }\n  }\n\n  &:focus {\n    background: ", ";\n    border-color: ", ";\n    outline: none;\n  }\n\n  &:active {\n    background: ", ";\n    border-color: ", ";\n    outline: none;\n  }\n  .loader-wrapper{\n    position: absolute;\n    top:50%;\n    left:50%;\n    transform: translate(-50%, -50%);\n  }\n"]),
     _templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: middle;\n"], ["\n  display: inline-block;\n  vertical-align: middle;\n"]);
 
 var _react = require("react");
@@ -28,6 +28,8 @@ var _icon2 = _interopRequireDefault(_icon);
 
 var _tokens = require("@desynova-digital/tokens");
 
+var _components = require("../../components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -76,7 +78,7 @@ var getAttributes = function getAttributes(props) {
   }
 
   if (props.text && !props.icon) {
-    styles.padding = "14px 20px";
+    styles.padding = "10px 20px";
   }
 
   if (props.text && props.icon && props.iconLocation === "left") {
@@ -99,6 +101,14 @@ var getAttributes = function getAttributes(props) {
     //styles.cursor= 'not-allowed'
   }
 
+  if (props.width) {
+    styles.width = props.width;
+  }
+
+  if (props.stretchWidth) {
+    styles.width = "100%";
+  }
+
   return styles;
 };
 
@@ -189,9 +199,14 @@ var ButtonContent = function ButtonContent(props) {
       Element,
       _extends({
         type: "button",
-        className: props.disabled ? "disabled" : ""
+        className: props.disabled || props.isLoading ? "disabled" : ""
       }, props),
-      props.override || content
+      props.override || content,
+      _react2.default.createElement(
+        "div",
+        { className: "loader-wrapper" },
+        props.isLoading && props.showLoader ? _react2.default.createElement(_components.Loader, { theme: "dark", loaderName: "SpinningLoader", size: "small", background: "#ffffff" }) : null
+      )
     );
   }
 };
@@ -226,7 +241,9 @@ var Button = function Button(_ref) {
 };
 
 Button.Element = _styledComponents2.default.button(_templateObject2, function (props) {
-  return props.width ? props.width + "px" : "auto";
+  return getAttributes(props).width ? getAttributes(props).width : "auto";
+}, function (props) {
+  return props.width ? props.width + "px" : props.stretchWidth ? '100%' : "auto";
 }, function (props) {
   return props.height ? props.height + "px" : "auto";
 }, function (props) {
@@ -236,15 +253,15 @@ Button.Element = _styledComponents2.default.button(_templateObject2, function (p
 }, function (props) {
   return !props.href ? getAttributes(props).border : "none";
 }, function (props) {
-  return getAttributes(props).text;
+  return props.isLoading ? getAttributes(props).background : getAttributes(props).text;
 }, function (props) {
   return getAttributes(props).padding;
 }, function (props) {
-  return props.disabled ? 0.5 : 1;
+  return props.disabled || props.isLoading ? 0.5 : 1;
 }, function (props) {
-  return props.disabled ? "not-allowed" : "pointer";
+  return props.disabled || props.isLoading ? "not-allowed" : "pointer";
 }, function (props) {
-  return props.disabled || props.loading || props.success ? "none" : null;
+  return props.disabled || props.loading || props.success || props.isLoading ? "none" : null;
 }, function (props) {
   return props.display === "rounded" ? "999rem" : "0px";
 }, function (props) {

package/atoms/button/button.story.js

@@ -50,7 +50,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       null,
       _react2.default.createElement(
         _components.Button,
-        { display: 'rounded' },
+        { display: 'rounded', isLoading: true, showLoader: true, stretchWidth: true },
         'Button'
       ),
       _react2.default.createElement(

package/atoms/icon/icon.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.__ICONNAMES__ = undefined;
+exports.IconsJson = exports.__ICONNAMES__ = undefined;
 
 var _templateObject = _taggedTemplateLiteral(['\n  display: inline-block;\n  line-height: 1;\n  user-select: none;\n  -webkit-user-select: none; /* webkit (safari, chrome) browsers */\n  -moz-user-select: none; /* mozilla browsers */\n  -khtml-user-select: none; /* webkit (konqueror) browsers */\n  -ms-user-select: none; /* IE10+ */\n'], ['\n  display: inline-block;\n  line-height: 1;\n  user-select: none;\n  -webkit-user-select: none; /* webkit (safari, chrome) browsers */\n  -moz-user-select: none; /* mozilla browsers */\n  -khtml-user-select: none; /* webkit (konqueror) browsers */\n  -ms-user-select: none; /* IE10+ */\n']),
     _templateObject2 = _taggedTemplateLiteral(['\n  display: inline-block;\n  vertical-align: middle;\n  line-height: 1;\n  path {\n    fill: ', ';\n  }\n'], ['\n  display: inline-block;\n  vertical-align: middle;\n  line-height: 1;\n  path {\n    fill: ', ';\n  }\n']);
@@ -31,7 +31,6 @@ function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defi
 var Icon = function Icon(props) {
   // If the icon name isn't found, show a question mark instead.
   var icon = _icons.icons[props.name] || _icons.icons['default'];
-
   return _react2.default.createElement(
     Icon.Element,
     null,
@@ -65,6 +64,7 @@ var Image = _styledComponents2.default.svg(_templateObject2, function (props) {
 });
 
 var __ICONNAMES__ = Object.keys(_icons.icons);
+var IconsJson = _icons.icons;
 
 Icon.propTypes = {
   /** Icon name */
@@ -83,4 +83,5 @@ Icon.defaultProps = {
 };
 
 exports.default = Icon;
-exports.__ICONNAMES__ = __ICONNAMES__;
+exports.__ICONNAMES__ = __ICONNAMES__;
+exports.IconsJson = IconsJson;

package/atoms/icon/icon.story.js

@@ -99,7 +99,8 @@ console.log(iconsArr);
       _react2.default.createElement(_components.Icon, { name: "delete", width: 12, height: 14 }),
       _react2.default.createElement(_components.Icon, { name: "promo_review", width: 16, height: 14 }),
       _react2.default.createElement(_components.Icon, { name: "data-refresh", width: 16, height: 18 }),
-      _react2.default.createElement(_components.Icon, { name: "back-to-back", width: 16, height: 18 })
+      _react2.default.createElement(_components.Icon, { name: "back-to-back", width: 16, height: 18 }),
+      _react2.default.createElement(_components.Icon, { name: "enhance", width: 16, height: 16 })
     )
   );
 });

package/atoms/icon/icons.json

@@ -1572,6 +1572,77 @@
       ],
       "width": 18,
       "height": 18
+    },
+    "enhance": {
+      "paths": [
+        "M9 1C13.4183 1 17 4.58172 17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1ZM9 15.5C12.3137 15.5 15.5 12.3137 15.5 9C15.5 5.68629 12.3137 2.5 9 2.5C5.68629 2.5 2.5 5.68629 2.5 9C2.5 12.3137 5.68629 15.5 9 15.5Z",
+        "M11.9167 7.75033L12.4375 6.60449L13.5833 6.08366L12.4375 5.56283L11.9167 4.41699L11.3958 5.56283L10.25 6.08366L11.3958 6.60449L11.9167 7.75033Z",
+        "M11.9167 10.25L11.3958 11.3958L10.25 11.9167L11.3958 12.4375L11.9167 13.5833L12.4375 12.4375L13.5833 11.9167L12.4375 11.3958L11.9167 10.25Z",
+        "M8.79297 7.95866L7.7513 5.66699L6.70964 7.95866L4.41797 9.00033L6.70964 10.042L7.7513 12.3337L8.79297 10.042L11.0846 9.00033L8.79297 7.95866ZM8.1638 9.41283L7.7513 10.3212L7.3388 9.41283L6.43047 9.00033L7.3388 8.58783L7.7513 7.67949L8.1638 8.58783L9.07214 9.00033L8.1638 9.41283Z"
+      ],
+      "width": 18,
+      "height": 18,
+      "fill": "#07D5CD"
+    },
+    "monetize": {
+      "paths": [
+        "M11 6L12.145 7.145L9.705 9.585L7.705 7.585L4 11.295L4.705 12L7.705 9L9.705 11L12.855 7.855L14 9V6H11Z",
+        "M9 1C13.4183 1 17 4.58172 17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1ZM9 15.5C12.3137 15.5 15.5 12.3137 15.5 9C15.5 5.68629 12.3137 2.5 9 2.5C5.68629 2.5 2.5 5.68629 2.5 9C2.5 12.3137 5.68629 15.5 9 15.5Z"
+      ],
+      "width": 18,
+      "height": 18
+    },
+    "recaster": {
+      "paths": [
+        "M9 1C13.4183 1 17 4.58172 17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1ZM9 15.5C12.3137 15.5 15.5 12.3137 15.5 9C15.5 5.68629 12.3137 2.5 9 2.5C5.68629 2.5 2.5 5.68629 2.5 9C2.5 12.3137 5.68629 15.5 9 15.5Z",
+        "M13.0909 5H4.90909C4.40909 5 4 5.40909 4 5.90909V11.3636C4 11.8636 4.40909 12.2727 4.90909 12.2727H7.18182V13.1818H10.8182V12.2727H13.0909C13.5909 12.2727 13.9955 11.8636 13.9955 11.3636L14 5.90909C14 5.40909 13.5909 5 13.0909 5ZM13.0909 11.3636H4.90909V5.90909H13.0909V11.3636Z"
+      ],
+      "width": 18,
+      "height": 18,
+      "strokeWidth": 1
+    },
+    "fast_analytics": {
+      "paths": [
+        "M9 1C13.4183 1 17 4.58172 17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1ZM9 15.5C12.3137 15.5 15.5 12.3137 15.5 9C15.5 5.68629 12.3137 2.5 9 2.5C5.68629 2.5 2.5 5.68629 2.5 9C2.5 12.3137 5.68629 15.5 9 15.5Z",
+        "M13.4999 9H11.25V13.4998H13.4999V9Z",
+        "M6.74992 7.5H4.5V13.4998H6.74992V7.5Z",
+        "M10.1249 4.5H7.875V13.4997H10.1249V4.5Z"
+      ],
+      "width": 18,
+      "height": 18
+    },
+    "prepare": {
+      "paths": [
+        "M9.9 4.5H8.1v3.6H4.5v1.8h3.6v3.6h1.8V9.9h3.6V8.1H9.9V4.5zM9 0C4.032 0 0 4.032 0 9s4.032 9 9 9 9-4.032 9-9-4.032-9-9-9zm0 16.2c-3.969 0-7.2-3.231-7.2-7.2 0-3.969 3.231-7.2 7.2-7.2 3.969 0 7.2 3.231 7.2 7.2 0 3.969-3.231 7.2-7.2 7.2z"
+      ],
+      "width": 18,
+      "height": 18
+    },
+    "distribute": {
+      "paths": [
+        "M11.9893 7.85066H11.1381C11.0985 7.85066 11.0605 7.86639 11.0325 7.89439C11.0045 7.92239 10.9888 7.96036 10.9888 7.99995C10.9888 8.03955 11.0045 8.07752 11.0325 8.10552C11.0605 8.13352 11.0985 8.14925 11.1381 8.14925H11.9893L11.7246 8.41312C11.6965 8.44108 11.6807 8.47904 11.6807 8.51865C11.6806 8.55825 11.6963 8.59626 11.7242 8.6243C11.7522 8.65235 11.7902 8.66814 11.8298 8.66819C11.8694 8.66825 11.9074 8.65257 11.9354 8.62461L12.4561 8.10571C12.47 8.09184 12.481 8.07536 12.4886 8.05721C12.4961 8.03906 12.5 8.0196 12.5 7.99995C12.5 7.9803 12.4961 7.96085 12.4886 7.9427C12.481 7.92455 12.47 7.90807 12.4561 7.8942L11.9354 7.3753C11.9074 7.34733 11.8694 7.33165 11.8298 7.33171C11.7902 7.33177 11.7522 7.34756 11.7242 7.3756C11.6963 7.40365 11.6806 7.44165 11.6807 7.48126C11.6807 7.52086 11.6965 7.55882 11.7246 7.58679L11.9893 7.85066ZM4.06457 8.62461C4.07846 8.63845 4.09494 8.64942 4.11306 8.65689C4.13119 8.66437 4.15061 8.66819 4.17021 8.66816C4.18982 8.66813 4.20923 8.66423 4.22733 8.6567C4.24543 8.64917 4.26187 8.63814 4.27571 8.62426C4.28955 8.61037 4.30052 8.59389 4.30799 8.57577C4.31546 8.55764 4.31929 8.53822 4.31926 8.51861C4.31923 8.49901 4.31533 8.4796 4.3078 8.4615C4.30027 8.4434 4.28924 8.42696 4.27535 8.41312L4.01057 8.14925H4.86185C4.90144 8.14925 4.93942 8.13352 4.96741 8.10552C4.99541 8.07752 5.01114 8.03955 5.01114 7.99995C5.01114 7.96036 4.99541 7.92239 4.96741 7.89439C4.93942 7.86639 4.90144 7.85066 4.86185 7.85066H4.01057L4.27535 7.58679C4.28924 7.57295 4.30027 7.55651 4.3078 7.53841C4.31533 7.52031 4.31923 7.5009 4.31926 7.48129C4.31929 7.46169 4.31546 7.44227 4.30799 7.42414C4.30052 7.40601 4.28955 7.38954 4.27571 7.37565C4.26187 7.36176 4.24543 7.35074 4.22733 7.34321C4.20923 7.33567 4.18982 7.33178 4.17021 7.33175C4.15061 7.33171 4.13119 7.33554 4.11306 7.34301C4.09494 7.35049 4.07846 7.36146 4.06457 7.3753L3.54392 7.8942C3.53 7.90807 3.51895 7.92455 3.51142 7.9427C3.50388 7.96085 3.5 7.9803 3.5 7.99995C3.5 8.0196 3.50388 8.03906 3.51142 8.05721C3.51895 8.07536 3.53 8.09184 3.54392 8.10571L4.06457 8.62461ZM7.99995 10.9888C7.96036 10.9888 7.92239 11.0045 7.89439 11.0325C7.86639 11.0605 7.85066 11.0985 7.85066 11.1381V11.9893L7.58679 11.7246C7.57294 11.7107 7.55649 11.6996 7.53839 11.6921C7.52028 11.6846 7.50087 11.6807 7.48126 11.6807C7.44165 11.6806 7.40365 11.6963 7.3756 11.7242C7.34756 11.7522 7.33177 11.7902 7.33171 11.8298C7.33165 11.8694 7.34733 11.9074 7.3753 11.9354L7.8942 12.4561C7.90807 12.47 7.92455 12.481 7.9427 12.4886C7.96085 12.4961 7.9803 12.5 7.99995 12.5C8.0196 12.5 8.03906 12.4961 8.05721 12.4886C8.07536 12.481 8.09184 12.47 8.10571 12.4561L8.62461 11.9354C8.65257 11.9074 8.66825 11.8694 8.66819 11.8298C8.66814 11.7902 8.65235 11.7522 8.6243 11.7242C8.59626 11.6963 8.55825 11.6806 8.51865 11.6807C8.47904 11.6807 8.44108 11.6965 8.41312 11.7246L8.14925 11.9893V11.1381C8.14925 11.0985 8.13352 11.0605 8.10552 11.0325C8.07752 11.0045 8.03955 10.9888 7.99995 10.9888ZM7.58679 4.27535L7.85066 4.01057V4.86185C7.85066 4.90144 7.86639 4.93942 7.89439 4.96741C7.92239 4.99541 7.96036 5.01114 7.99995 5.01114C8.03955 5.01114 8.07752 4.99541 8.10552 4.96741C8.13352 4.93942 8.14925 4.90144 8.14925 4.86185V4.01057L8.41312 4.27535C8.44107 4.3034 8.47902 4.31919 8.51861 4.31926C8.55821 4.31933 8.59621 4.30366 8.62426 4.27571C8.6523 4.24776 8.66809 4.20981 8.66816 4.17021C8.66823 4.13062 8.65256 4.09262 8.62461 4.06457L8.10571 3.54392C8.09184 3.53 8.07536 3.51895 8.05721 3.51142C8.03906 3.50388 8.0196 3.5 7.99995 3.5C7.9803 3.5 7.96085 3.50388 7.9427 3.51142C7.92455 3.51895 7.90807 3.53 7.8942 3.54392L7.3753 4.06457C7.36146 4.07846 7.35049 4.09494 7.34301 4.11306C7.33554 4.13119 7.33171 4.15061 7.33175 4.17021C7.33178 4.18982 7.33567 4.20923 7.34321 4.22733C7.35074 4.24543 7.36176 4.26187 7.37565 4.27571C7.38954 4.28955 7.40601 4.30052 7.42414 4.30799C7.44227 4.31546 7.46169 4.31929 7.48129 4.31926C7.5009 4.31923 7.52031 4.31533 7.53841 4.3078C7.55651 4.30027 7.57295 4.28924 7.58679 4.27535ZM10.7153 10.9285L10.3415 10.9298H10.3412C10.3218 10.9296 10.3024 10.9332 10.2844 10.9405C10.2663 10.9478 10.2498 10.9586 10.236 10.9722C10.2221 10.9859 10.211 11.0022 10.2035 11.0201C10.1959 11.0381 10.192 11.0574 10.1919 11.0768C10.1919 11.1165 10.2075 11.1545 10.2355 11.1826C10.2634 11.2107 10.3014 11.2266 10.341 11.2268L11.0761 11.2284H11.0763C11.1161 11.2278 11.1541 11.2115 11.182 11.1832C11.21 11.1548 11.2256 11.1166 11.2256 11.0768L11.2244 10.337C11.2245 10.297 11.2089 10.2585 11.181 10.2298C11.1531 10.2011 11.1151 10.1844 11.0751 10.1834H11.0748C11.0348 10.1844 10.9968 10.2011 10.9689 10.2299C10.941 10.2586 10.9256 10.2972 10.9258 10.3372L10.9264 10.7132L10.3245 10.1123C10.2964 10.0843 10.2584 10.0687 10.2188 10.0688C10.1792 10.0689 10.1413 10.0847 10.1134 10.1128C10.0853 10.1411 10.0696 10.1792 10.0696 10.219C10.0696 10.2588 10.0853 10.297 10.1134 10.3252L10.7153 10.9285ZM4.92479 5.81655H4.92507C4.96511 5.81551 5.00313 5.79882 5.03099 5.77005C5.05886 5.74129 5.07433 5.70275 5.07411 5.66271L5.07347 5.28673L5.67542 5.88764C5.70364 5.91514 5.74157 5.9304 5.78098 5.93011C5.82039 5.92981 5.85809 5.91398 5.88589 5.88605C5.9137 5.85812 5.92936 5.82035 5.92948 5.78094C5.9296 5.74153 5.91417 5.70366 5.88654 5.67557L5.28459 5.07153L5.65842 5.07009H5.65868C5.67816 5.07032 5.69749 5.06668 5.71555 5.0594C5.73362 5.05212 5.75007 5.04133 5.76394 5.02767C5.77782 5.014 5.78886 4.99772 5.79641 4.97976C5.80397 4.96181 5.8079 4.94254 5.80797 4.92306C5.80805 4.88342 5.7924 4.84538 5.76446 4.81727C5.73651 4.78916 5.69856 4.77329 5.65892 4.77313L4.92382 4.77151H4.92356C4.88376 4.77213 4.84579 4.78838 4.81786 4.81675C4.78993 4.84511 4.77428 4.88332 4.77427 4.92313L4.77552 5.66288C4.77541 5.70291 4.79097 5.7414 4.81886 5.77011C4.84676 5.79883 4.88478 5.8155 4.92479 5.81655ZM4.92507 10.1834H4.92479C4.88481 10.1843 4.84679 10.2009 4.81888 10.2296C4.79098 10.2582 4.77541 10.2967 4.7755 10.3367L4.77425 11.0739C4.77417 11.1143 4.78986 11.1532 4.81798 11.1822C4.84572 11.2109 4.88366 11.2275 4.92356 11.2284H4.92382L5.65892 11.2258C5.67849 11.226 5.69791 11.2223 5.71605 11.2149C5.73419 11.2076 5.75069 11.1967 5.7646 11.1829C5.7785 11.1692 5.78954 11.1528 5.79707 11.1347C5.80459 11.1166 5.80846 11.0972 5.80844 11.0777C5.80843 11.0581 5.80453 11.0387 5.79697 11.0207C5.78942 11.0026 5.77835 10.9862 5.76442 10.9725C5.7505 10.9587 5.73398 10.9479 5.71583 10.9406C5.69767 10.9332 5.67825 10.9296 5.65868 10.9298H5.65842L5.28459 10.9285L5.88654 10.3255C5.90045 10.3116 5.91149 10.2952 5.91904 10.277C5.92659 10.2589 5.93049 10.2395 5.93053 10.2198C5.93057 10.2002 5.92673 10.1807 5.91925 10.1626C5.91177 10.1444 5.90078 10.1279 5.88692 10.114C5.87306 10.1001 5.85659 10.089 5.83846 10.0815C5.82033 10.0739 5.80089 10.07 5.78125 10.07C5.76161 10.07 5.74215 10.0738 5.72399 10.0813C5.70584 10.0888 5.68933 10.0998 5.67542 10.1136L5.07347 10.7154L5.07411 10.3373C5.07435 10.2972 5.05888 10.2586 5.03101 10.2299C5.00315 10.2011 4.96512 10.1844 4.92507 10.1834ZM10.2189 5.93028C10.2385 5.9303 10.258 5.92645 10.2761 5.91894C10.2942 5.91144 10.3106 5.90042 10.3245 5.88654L10.9264 5.28459L10.9258 5.66271C10.9256 5.70275 10.941 5.74129 10.9689 5.77005C10.9968 5.79882 11.0348 5.81551 11.0748 5.81655H11.0751C11.1151 5.81558 11.1531 5.79898 11.181 5.77032C11.2089 5.74166 11.2245 5.70321 11.2244 5.66321L11.2257 4.92597C11.2258 4.90622 11.222 4.88664 11.2146 4.86835C11.2071 4.85006 11.1961 4.83341 11.1822 4.81937C11.1683 4.80533 11.1518 4.79417 11.1336 4.78652C11.1154 4.77888 11.0959 4.7749 11.0761 4.77481L10.341 4.77578C10.3215 4.77558 10.3022 4.77924 10.2842 4.78655C10.2661 4.79386 10.2497 4.80468 10.2359 4.81837C10.2221 4.83207 10.2111 4.84838 10.2036 4.86634C10.1961 4.88431 10.1923 4.90359 10.1923 4.92305C10.1923 4.94252 10.1962 4.96178 10.2037 4.97974C10.2112 4.9977 10.2222 5.01399 10.2361 5.02766C10.2499 5.04134 10.2663 5.05213 10.2844 5.05941C10.3024 5.0667 10.3218 5.07033 10.3412 5.07009H10.3415L10.7153 5.07146L10.1134 5.67441C10.0925 5.69538 10.0783 5.72204 10.0726 5.75104C10.0668 5.78005 10.0698 5.81011 10.0811 5.83745C10.0923 5.86478 10.1114 5.88818 10.136 5.90469C10.1605 5.92121 10.1894 5.93011 10.2189 5.93028Z",
+        "M6.31634 9.25907L7.95566 9.78743C7.9857 9.79704 8.01799 9.79704 8.04803 9.78743L9.68838 9.25907C9.71868 9.24949 9.74519 9.2306 9.76414 9.20509C9.78309 9.17958 9.79352 9.14875 9.79395 9.11698V6.88077C9.79353 6.84901 9.78313 6.8182 9.76421 6.79269C9.74529 6.76719 9.71882 6.74829 9.68855 6.73868L8.04923 6.21032C8.01927 6.20073 7.98706 6.20073 7.9571 6.21032L6.31658 6.73868C6.28628 6.74826 6.25976 6.76715 6.2408 6.79266C6.22184 6.81816 6.21139 6.84899 6.21094 6.88077V9.11698C6.21135 9.14873 6.22176 9.17955 6.24068 9.20505C6.2596 9.23056 6.28607 9.24946 6.31634 9.25907ZM6.50952 7.08578L7.85315 7.51785V9.44033L6.50952 9.00826V7.08578ZM8.15174 9.44033V7.51785L9.49537 7.08578V9.00826L8.15174 9.44033ZM8.00244 6.50927L9.15438 6.88077L8.00244 7.25226L6.85051 6.88077L8.00244 6.50927Z",
+        "M0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8ZM14.5459 8.00045C14.5459 11.6154 11.6154 14.5459 8.00045 14.5459C4.3855 14.5459 1.455 11.6154 1.455 8.00045C1.455 4.3855 4.3855 1.455 8.00045 1.455C11.6154 1.455 14.5459 4.3855 14.5459 8.00045Z"
+      ],
+      "width": 16,
+      "height": 16
+    },
+    "ott-module": {
+      "paths": [
+        "M0 5C0 7.76142 2.23858 10 5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5ZM9.09002 4.99911C9.09002 7.25846 7.25846 9.09002 4.99911 9.09002C2.73977 9.09002 0.908203 7.25846 0.908203 4.99911C0.908203 2.73977 2.73977 0.908203 4.99911 0.908203C7.25846 0.908203 9.09002 2.73977 9.09002 4.99911Z",
+        "M6.10984 4.14016C6.25628 4.28661 6.49372 4.28661 6.64017 4.14016C6.78661 3.99372 6.78661 3.75628 6.64017 3.60984L5.14016 2.10983C4.99372 1.96339 4.75628 1.96339 4.60984 2.10983L3.10983 3.60984C2.96339 3.75628 2.96339 3.99372 3.10983 4.14016C3.25628 4.28661 3.49372 4.28661 3.64017 4.14016L4.875 2.90533L6.10984 4.14016Z",
+        "M3.64016 6.10984C3.49372 5.96339 3.25628 5.96339 3.10983 6.10984C2.96339 6.25628 2.96339 6.49372 3.10983 6.64016L4.60984 8.14017C4.75628 8.28661 4.99372 8.28661 5.14016 8.14017L6.64017 6.64016C6.78661 6.49372 6.78661 6.25628 6.64017 6.10984C6.49372 5.96339 6.25628 5.96339 6.10983 6.10984L4.875 7.34467L3.64016 6.10984Z",
+        "M4.49902 2.375V7.25C4.49902 7.45711 4.66692 7.625 4.87402 7.625C5.08113 7.625 5.24902 7.45711 5.24902 7.25V2.375C5.24902 2.16789 5.08113 2 4.87402 2C4.66692 2 4.49902 2.16789 4.49902 2.375Z"
+      ],
+      "width": 10,
+      "height": 10
+    },
+    "verified-icon": {
+      "paths": [
+        "M57.5 30L51.4 23.025L52.25 13.8L43.225 11.75L38.5 3.75L30 7.4L21.5 3.75L16.775 11.725L7.75 13.75L8.6 23L2.5 30L8.6 36.975L7.75 46.225L16.775 48.275L21.5 56.25L30 52.575L38.5 56.225L43.225 48.25L52.25 46.2L51.4 36.975L57.5 30ZM25.225 41.8L15.725 32.275L19.425 28.575L25.225 34.4L39.85 19.725L43.55 23.425L25.225 41.8Z"
+      ],
+      "width": 60,
+      "height": 60
     }
   }
 }

package/atoms/icon/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.__ICONNAMES__ = undefined;
+exports.IconsJson = exports.__ICONNAMES__ = undefined;
 
 var _icon = require('./icon');
 
@@ -12,4 +12,5 @@ var _icon2 = _interopRequireDefault(_icon);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 exports.default = _icon2.default;
-exports.__ICONNAMES__ = _icon.__ICONNAMES__;
+exports.__ICONNAMES__ = _icon.__ICONNAMES__;
+exports.IconsJson = _icon.IconsJson;

package/atoms/loader/loader.js

@@ -43,12 +43,16 @@ var StyledLoader = _styledComponents2.default.div(_templateObject, function (pro
 
     return _tokens.colors[props.theme].label.text;
 });
-var getLoaderComponent = function getLoaderComponent(loaderName) {
+var getLoaderComponent = function getLoaderComponent(props) {
+    var loaderName = props.loaderName,
+        size = props.size,
+        background = props.background;
+
     if (loaderName && loaderName !== '') {
         if (loaderName === 'circle') {
             return _react2.default.createElement(_CircleLoader2.default, null);
         } else if (loaderName == 'SpinningLoader') {
-            return _react2.default.createElement(_spinningLoader2.default, null);
+            return _react2.default.createElement(_spinningLoader2.default, { size: size, background: background });
         } else {
             return _react2.default.createElement(_ThreeDotLoader2.default, null);
         }
@@ -63,7 +67,7 @@ var Loader = function Loader(props) {
         _react2.default.createElement(
             'div',
             { className: 'loader-holder' },
-            getLoaderComponent(props.loaderName)
+            getLoaderComponent(props)
         )
     );
 };

package/atoms/loader/loader.story.js

@@ -21,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
             null,
             _react2.default.createElement(_components.Loader, null),
             _react2.default.createElement(_components.Loader, { loaderName: 'circle' }),
-            _react2.default.createElement(_components.Loader, { theme: 'dark', loaderName: 'SpinningLoader' })
+            _react2.default.createElement(_components.Loader, { theme: 'dark', loaderName: 'SpinningLoader', size: 'small', background: '#3acec6' })
         )
     );
 });

package/atoms/loader/spinningLoader.js

@@ -1,16 +1,16 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 
-var _templateObject = _taggedTemplateLiteral(['\n    position: relative;\n    display: flex;\n    justify-content: center;\n    height: 50px;\n\n    .parentBox{\n        position: relative;\n        width: 38.5714px;\n        height: 38.5714px;\n        animation: spin 0.6s 0s infinite linear;\n        animation-fill-mode: forwards;\n    }\n\n    .ball{\n        width: 4.28571px;\n        height: 4.28571px;\n        border-radius: 100%;\n        background-color: #3acec6;\n        opacity: 0.8;\n        position: absolute;\n        top: 12.8571px;\n        animation: spin 0.6s 0s 0s infinite linear;\n        animation-fill-mode: forwards;\n    }\n\n    .circle{\n        width: 30px;\n        height: 30px;\n        border-radius: 100%;\n        border: 4.28571px solid #3acec6;\n        opacity: 0.1;\n        box-sizing: content-box;\n        position: absolute;\n    }\n\n\n    @-webkit-keyframes spin {\n        100% { -webkit-transform: rotate(360deg); }\n    }\n    \n    @keyframes spin {\n        100% { transform: rotate(360deg); }\n    }\n'], ['\n    position: relative;\n    display: flex;\n    justify-content: center;\n    height: 50px;\n\n    .parentBox{\n        position: relative;\n        width: 38.5714px;\n        height: 38.5714px;\n        animation: spin 0.6s 0s infinite linear;\n        animation-fill-mode: forwards;\n    }\n\n    .ball{\n        width: 4.28571px;\n        height: 4.28571px;\n        border-radius: 100%;\n        background-color: #3acec6;\n        opacity: 0.8;\n        position: absolute;\n        top: 12.8571px;\n        animation: spin 0.6s 0s 0s infinite linear;\n        animation-fill-mode: forwards;\n    }\n\n    .circle{\n        width: 30px;\n        height: 30px;\n        border-radius: 100%;\n        border: 4.28571px solid #3acec6;\n        opacity: 0.1;\n        box-sizing: content-box;\n        position: absolute;\n    }\n\n\n    @-webkit-keyframes spin {\n        100% { -webkit-transform: rotate(360deg); }\n    }\n    \n    @keyframes spin {\n        100% { transform: rotate(360deg); }\n    }\n']);
+var _templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  height: ", ";\n  .parentBox {\n    position: relative;\n    width: ", ";\n    height: ", ";\n    animation: spin 0.6s 0s infinite linear;\n    animation-fill-mode: forwards;\n  }\n\n  .ball {\n    width: 4.28571px;\n    height: 4.28571px;\n    border-radius: 100%;\n    background-color: ", ";\n    opacity: 0.8;\n    position: absolute;\n    top: 12.8571px;\n    animation: spin 0.6s 0s 0s infinite linear;\n    animation-fill-mode: forwards;\n  }\n\n  .circle {\n    width: ", ";\n    height: ", ";\n    border-radius: 100%;\n    border: ", ";\n    opacity: 0.2;\n    box-sizing: content-box;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  @-webkit-keyframes spin {\n    100% {\n      -webkit-transform: rotate(360deg);\n    }\n  }\n\n  @keyframes spin {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  height: ", ";\n  .parentBox {\n    position: relative;\n    width: ", ";\n    height: ", ";\n    animation: spin 0.6s 0s infinite linear;\n    animation-fill-mode: forwards;\n  }\n\n  .ball {\n    width: 4.28571px;\n    height: 4.28571px;\n    border-radius: 100%;\n    background-color: ", ";\n    opacity: 0.8;\n    position: absolute;\n    top: 12.8571px;\n    animation: spin 0.6s 0s 0s infinite linear;\n    animation-fill-mode: forwards;\n  }\n\n  .circle {\n    width: ", ";\n    height: ", ";\n    border-radius: 100%;\n    border: ", ";\n    opacity: 0.2;\n    box-sizing: content-box;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  @-webkit-keyframes spin {\n    100% {\n      -webkit-transform: rotate(360deg);\n    }\n  }\n\n  @keyframes spin {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"]);
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _styledComponents = require('styled-components');
+var _styledComponents = require("styled-components");
 
 var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
@@ -18,18 +18,35 @@ 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 LoaderBox = _styledComponents2.default.div(_templateObject);
-var SpinningLoader = function SpinningLoader() {
-    return _react2.default.createElement(
-        LoaderBox,
-        null,
-        _react2.default.createElement(
-            'div',
-            { className: 'parentBox' },
-            _react2.default.createElement('div', { className: 'ball' }),
-            _react2.default.createElement('div', { className: 'circle' })
-        )
-    );
+var LoaderBox = _styledComponents2.default.div(_templateObject, function (props) {
+  return props.size === "small" ? "30px" : "50px";
+}, function (props) {
+  return props.size === "small" ? "28.5714px" : "38.5714px";
+}, function (props) {
+  return props.size === "small" ? "28.5714px" : "38.5714px";
+}, function (props) {
+  return props.background ? "" + props.background : "#3acec6";
+}, function (props) {
+  return props.size === "small" ? "20px" : "30px";
+}, function (props) {
+  return props.size === "small" ? "20px" : "30px";
+}, function (props) {
+  return props.background ? "4.28571px solid " + props.background : "4.28571px solid #3acec6";
+});
+var SpinningLoader = function SpinningLoader(_ref) {
+  var size = _ref.size,
+      background = _ref.background;
+
+  return _react2.default.createElement(
+    LoaderBox,
+    { size: size, background: background },
+    _react2.default.createElement(
+      "div",
+      { className: "parentBox" },
+      _react2.default.createElement("div", { className: "ball" }),
+      _react2.default.createElement("div", { className: "circle" })
+    )
+  );
 };
 
 exports.default = SpinningLoader;

package/atoms/loader/spinningLoader.jsx

@@ -1,60 +1,69 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from "react";
+import styled from "styled-components";
 
 const LoaderBox = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  height: ${(props) => (props.size === "small" ? "30px" : "50px")};
+  .parentBox {
     position: relative;
-    display: flex;
-    justify-content: center;
-    height: 50px;
+    width: ${(props) => (props.size === "small" ? "28.5714px" : "38.5714px")};
+    height: ${(props) => (props.size === "small" ? "28.5714px" : "38.5714px")};
+    animation: spin 0.6s 0s infinite linear;
+    animation-fill-mode: forwards;
+  }
 
-    .parentBox{
-        position: relative;
-        width: 38.5714px;
-        height: 38.5714px;
-        animation: spin 0.6s 0s infinite linear;
-        animation-fill-mode: forwards;
-    }
+  .ball {
+    width: 4.28571px;
+    height: 4.28571px;
+    border-radius: 100%;
+    background-color: ${(props) =>
+      props.background ? `${props.background}` : "#3acec6"};
+    opacity: 0.8;
+    position: absolute;
+    top: 12.8571px;
+    animation: spin 0.6s 0s 0s infinite linear;
+    animation-fill-mode: forwards;
+  }
 
-    .ball{
-        width: 4.28571px;
-        height: 4.28571px;
-        border-radius: 100%;
-        background-color: #3acec6;
-        opacity: 0.8;
-        position: absolute;
-        top: 12.8571px;
-        animation: spin 0.6s 0s 0s infinite linear;
-        animation-fill-mode: forwards;
-    }
+  .circle {
+    width: ${(props) => (props.size === "small" ? "20px" : "30px")};
+    height: ${(props) => (props.size === "small" ? "20px" : "30px")};
+    border-radius: 100%;
+    border: ${(props) =>
+      props.background
+        ? `4.28571px solid ${props.background}`
+        : "4.28571px solid #3acec6"};
+    opacity: 0.2;
+    box-sizing: content-box;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 
-    .circle{
-        width: 30px;
-        height: 30px;
-        border-radius: 100%;
-        border: 4.28571px solid #3acec6;
-        opacity: 0.1;
-        box-sizing: content-box;
-        position: absolute;
+  @-webkit-keyframes spin {
+    100% {
+      -webkit-transform: rotate(360deg);
     }
+  }
 
-
-    @-webkit-keyframes spin {
-        100% { -webkit-transform: rotate(360deg); }
-    }
-    
-    @keyframes spin {
-        100% { transform: rotate(360deg); }
+  @keyframes spin {
+    100% {
+      transform: rotate(360deg);
     }
-`
-const SpinningLoader = () => {
-    return (
-        <LoaderBox>
-            <div className="parentBox">
-                <div className="ball" />
-                <div className="circle" />
-            </div>
-        </LoaderBox>
-    )
-}
+  }
+`;
+const SpinningLoader = ({ size, background }) => {
+  return (
+    <LoaderBox size={size} background={background}>
+      <div className="parentBox">
+        <div className="ball" />
+        <div className="circle" />
+      </div>
+    </LoaderBox>
+  );
+};
 
-export default SpinningLoader;
+export default SpinningLoader;

package/components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.Loader = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.DateTime = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
+exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.Loader = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.DateTime = exports.IconsJson = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
 
 require("./_helpers/globals");
 
@@ -222,20 +222,16 @@ var _Shimmer2 = _interopRequireDefault(_Shimmer);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* Molecules */
-/*
-  This file is an aggregator, to make it easier for folks to import components that they need
 
-  example: `import { Input } from 'components'`
-  instead of  `import Input from 'components/input'`
-*/
 
-/* eslint-disable import/first */
+/* atoms */
 exports.Avatar = _avatar2.default;
 exports.Button = _button2.default;
 exports.Badge = _badge2.default;
 exports.Label = _label2.default;
 exports.Tag = _tag2.default;
 exports.Icon = _icon2.default;
+exports.IconsJson = _icon.IconsJson;
 exports.DateTime = _dateTime2.default;
 exports.Card = _card2.default;
 exports.CardV2 = _cardV2.default;
@@ -282,6 +278,11 @@ exports.FiltersShimmer = _FiltersShimmer2.default;
 exports.GraphDetailsShimmer = _GraphDetailShimmer2.default;
 exports.GraphsComponentShimmer = _GraphsComponentShimmer2.default;
 exports.GraphTitleShimmer = _GraphTitleShimmer2.default;
-exports.Shimmer = _Shimmer2.default;
-
-/* atoms */
+exports.Shimmer = _Shimmer2.default; /*
+                                       This file is an aggregator, to make it easier for folks to import components that they need
+                                     
+                                       example: `import { Input } from 'components'`
+                                       instead of  `import Input from 'components/input'`
+                                     */
+
+/* eslint-disable import/first */

package/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.Loader = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.DateTime = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
+exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.Loader = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.DateTime = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.IconsJson = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
 
 var _components = require("./components");
 
@@ -13,6 +13,7 @@ exports.Badge = _components.Badge;
 exports.Label = _components.Label;
 exports.Tag = _components.Tag;
 exports.Icon = _components.Icon;
+exports.IconsJson = _components.IconsJson;
 exports.Card = _components.Card;
 exports.CardV2 = _components.CardV2;
 exports.GraphCard = _components.GraphCard;

package/molecules/tabs/tabs.js

@@ -10,7 +10,7 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 var _templateObject = _taggedTemplateLiteral(['\n  height: 100%;\n'], ['\n  height: 100%;\n']),
     _templateObject2 = _taggedTemplateLiteral(['\n  width: 100%;\n  font-family: SFUIText-Medium;\n  font-size: 14px;\n  padding: 20px 15px;\n  line-height: 19px;\n  text-transform: uppercase;\n  color: ', ';\n  cursor: ', ';\n  pointer-events: ', ';\n  border-bottom: 1px solid ', ';\n  text-align: center;\n  &:hover {\n    color: ', ';\n    ', ';\n  }\n'], ['\n  width: 100%;\n  font-family: SFUIText-Medium;\n  font-size: 14px;\n  padding: 20px 15px;\n  line-height: 19px;\n  text-transform: uppercase;\n  color: ', ';\n  cursor: ', ';\n  pointer-events: ', ';\n  border-bottom: 1px solid ', ';\n  text-align: center;\n  &:hover {\n    color: ', ';\n    ', ';\n  }\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: stretch;\n  align-items: center;\n  background: ', ';\n\n  &.tab-list{\n    align-items: stretch;\n  }\n'], ['\n  display: flex;\n  justify-content: stretch;\n  align-items: center;\n  background: ', ';\n\n  &.tab-list{\n    align-items: stretch;\n  }\n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: stretch;\n  align-items: center;\n  background: ', ';\n\n  &.tab-list{\n    align-items: stretch;\n  }\n\n  /* Add this style in your CSS */\n  .nested-tab-list.vertical {\n    flex-direction: column; /* Display nested tabs vertically */\n    align-items: flex-start; /* Align nested tabs to the start */\n  }\n\n  /* Adjust existing styles for better spacing */\n  .nested-tab-list-item {\n    margin-right: 8px; /* Add some margin between nested tabs */\n  }\n  /* Add this style in your CSS */\n  . \n'], ['\n  display: flex;\n  justify-content: stretch;\n  align-items: center;\n  background: ', ';\n\n  &.tab-list{\n    align-items: stretch;\n  }\n\n  /* Add this style in your CSS */\n  .nested-tab-list.vertical {\n    flex-direction: column; /* Display nested tabs vertically */\n    align-items: flex-start; /* Align nested tabs to the start */\n  }\n\n  /* Adjust existing styles for better spacing */\n  .nested-tab-list-item {\n    margin-right: 8px; /* Add some margin between nested tabs */\n  }\n  /* Add this style in your CSS */\n  . \n']),
     _templateObject4 = _taggedTemplateLiteral(['\n  background:', ';\n  display: flex;\n  justify-content: stretch;\n  align-items: center;\n'], ['\n  background:', ';\n  display: flex;\n  justify-content: stretch;\n  align-items: center;\n']);
 
 var _react = require('react');
@@ -81,7 +81,13 @@ var Tabs = function (_React$Component) {
         return child ? _react2.default.cloneElement(child, { theme: props.theme }) : null;
       });
     }
-    _this.state = { selectedIndex: _this.getSelectedTabFromChildProps(_this.tabs) };
+
+    // Initialize separate state for selected indices of main tabs and nested tabs
+    _this.state = {
+      selectedMainTabIndex: _this.getSelectedTabFromChildProps(_this.tabs),
+      selectedNestedTabIndex: null,
+      hoveredTabIndex: null
+    };
     return _this;
   }
 
@@ -93,8 +99,8 @@ var Tabs = function (_React$Component) {
       if (!cosmosKey) return;
 
       var storedIndex = tabStore[cosmosKey];
-      if (storedIndex && storedIndex !== this.state.selectedIndex) {
-        this.setState({ selectedIndex: tabStore[cosmosKey] });
+      if (storedIndex && storedIndex !== this.state.selectedMainTabIndex) {
+        this.setState({ selectedMainTabIndex: tabStore[cosmosKey] });
       }
     }
   }, {
@@ -131,7 +137,7 @@ var Tabs = function (_React$Component) {
             tabStore[cosmosKey] = nextIndex;
           }
 
-          this.setState({ selectedIndex: nextIndex });
+          this.setState({ selectedIndex: nextIndex, selectedNestedTabIndex: null });
         }
       }
     }
@@ -144,10 +150,87 @@ var Tabs = function (_React$Component) {
 
       return selectedIndex;
     }
+  }, {
+    key: 'handleTabMouseEnter',
+    value: function handleTabMouseEnter(index) {
+      this.setState({ hoveredTabIndex: index });
+    }
+  }, {
+    key: 'handleTabMouseLeave',
+    value: function handleTabMouseLeave() {
+      this.setState({ hoveredTabIndex: null });
+    }
+
+    // changeMainTab(nextIndex) {
+    //   // Deselect nested tab when changing the main tab
+    //   this.setState({ selectedMainTabIndex: nextIndex, selectedNestedTabIndex: null });
+    //   if (this.props.onSelect) {
+    //     this.props.onSelect(nextIndex);
+    //   } else {
+    //     const { cosmosKey } = this.props;
+    //     if (cosmosKey) {
+    //       tabStore[cosmosKey] = nextIndex;
+    //     }
+    //   }
+    // }
+
+  }, {
+    key: 'changeNestedTab',
+    value: function changeNestedTab(nextIndex) {
+      // Deselect main tab when changing the nested tab
+      this.setState({ selectedNestedTabIndex: nextIndex, selectedIndex: null });
+      if (this.props.onSelect) {
+        this.props.onSelect(nextIndex);
+      }
+    }
+  }, {
+    key: 'renderNestedTabs',
+    value: function renderNestedTabs(tab, index) {
+      var _this2 = this;
+
+      if (!tab.props.children || !Array.isArray(tab.props.children)) {
+        return null;
+      }
+
+      var isVisible = this.state.hoveredTabIndex === index;
+
+      return _react2.default.createElement(
+        'div',
+        {
+          className: 'nested-tab-container',
+          style: { display: isVisible ? 'block' : 'none' },
+          onMouseEnter: function onMouseEnter() {
+            return _this2.handleTabMouseEnter(index);
+          },
+          onMouseLeave: function onMouseLeave() {
+            return _this2.handleTabMouseLeave();
+          }
+        },
+        _react2.default.createElement(
+          TabLinkGroup,
+          { theme: this.props.theme, className: 'nested-tab-list vertical' },
+          tab.props.children.map(function (nestedTab, nestedIndex) {
+            return _react2.default.createElement(
+              TabLink,
+              {
+                key: nestedTab.props.label,
+                selected: _this2.state.selectedNestedTabIndex === nestedIndex,
+                theme: _this2.props.theme,
+                className: _this2.state.selectedNestedTabIndex === nestedIndex ? 'nested-tab-list-item active' : 'nested-tab-list-item',
+                onClick: function onClick() {
+                  return _this2.changeNestedTab(nestedIndex);
+                }
+              },
+              nestedTab.props.label
+            );
+          })
+        )
+      );
+    }
   }, {
     key: 'render',
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       var selectedIndex = this.getSelectedTabFromPropsOrState();
 
@@ -161,17 +244,27 @@ var Tabs = function (_React$Component) {
             return val1.props.index - val2.props.index;
           }).map(function (tab, index) {
             return _react2.default.createElement(
-              TabLink,
-              {
-                onClick: function onClick() {
-                  return _this2.changeTab(index);
+              'div',
+              { key: tab.props.label, className: 'tab-container' },
+              _react2.default.createElement(
+                TabLink,
+                {
+                  onClick: function onClick() {
+                    return _this3.changeTab(index);
+                  },
+                  selected: selectedIndex === index,
+                  theme: _this3.props.theme,
+                  className: selectedIndex === index ? 'tab-list-item active' : 'tab-list-item',
+                  onMouseEnter: function onMouseEnter() {
+                    return _this3.handleTabMouseEnter(index);
+                  },
+                  onMouseLeave: function onMouseLeave() {
+                    return _this3.handleTabMouseLeave();
+                  }
                 },
-                key: tab.props.label,
-                selected: selectedIndex === index,
-                theme: _this2.props.theme,
-                className: selectedIndex === index ? 'tab-list-item active' : 'tab-list-item'
-              },
-              tab.props.label
+                tab.props.label
+              ),
+              _this3.renderNestedTabs(tab, index)
             );
           })
         ),

package/molecules/tabs/tabs.story.js

@@ -110,4 +110,44 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       )
     )
   );
+});
+
+(0, _react3.storiesOf)('Tabs').add('dark - default selected with nested tabs', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'default', background: 'dark' },
+    _react2.default.createElement(
+      _components.Tabs,
+      { theme: 'dark' },
+      _react2.default.createElement(
+        _components.Tabs.Tab,
+        { label: 'Tab 1' },
+        'This is tab 1'
+      ),
+      _react2.default.createElement(
+        _components.Tabs.Tab,
+        { label: 'Tab 2' },
+        'You can render anything you want here'
+      ),
+      _react2.default.createElement(
+        _components.Tabs.Tab,
+        { label: 'Tab 3 with Nested Tabs' },
+        _react2.default.createElement(
+          _components.Tabs.Tab,
+          { label: 'Nested Tab 1' },
+          'This is nested tab 1'
+        ),
+        _react2.default.createElement(
+          _components.Tabs.Tab,
+          { label: 'Nested Tab 2' },
+          'This is nested tab 2'
+        )
+      ),
+      _react2.default.createElement(
+        _components.Tabs.Tab,
+        { selected: true, label: 'Tab 4' },
+        'Look, the fourth tab is selected by default!'
+      )
+    )
+  );
 });

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@desynova-digital/components",
-  "version": "8.19.49",
+  "version": "8.19.50",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "8.19.49",
+    "@desynova-digital/tokens": "8.19.50",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },