@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/loader/ShimmerComponent/GraphsComponentShimmer.js

@@ -1,43 +1,34 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _GraphDetailShimmer = require("./GraphDetailShimmer");
-
-var _GraphDetailShimmer2 = _interopRequireDefault(_GraphDetailShimmer);
-
-var _GraphTitleShimmer = require("./GraphTitleShimmer");
-
-var _GraphTitleShimmer2 = _interopRequireDefault(_GraphTitleShimmer);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _GraphDetailShimmer = _interopRequireDefault(require("./GraphDetailShimmer"));
+var _GraphTitleShimmer = _interopRequireDefault(require("./GraphTitleShimmer"));
 var GraphsComponentShimmer = function GraphsComponentShimmer() {
   var val = window.location.href.split("/").pop() === "hotstar" ? 2 : 4;
   var components = [];
-
   for (var i = 0; i < val; i++) {
-    components.push(_react2.default.createElement(_GraphDetailShimmer2.default, { key: i }));
+    components.push(/*#__PURE__*/_react["default"].createElement(_GraphDetailShimmer["default"], {
+      key: i
+    }));
   }
-
-  return _react2.default.createElement(
-    "div",
-    { style: { display: "flex", flexDirection: "column" } },
-    _react2.default.createElement(_GraphTitleShimmer2.default, null),
-    _react2.default.createElement(
-      "div",
-      { style: { padding: "0 10px", display: "flex", gap: "10px" } },
-      components.map(function (component) {
-        return component;
-      })
-    )
-  );
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_GraphTitleShimmer["default"], null), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: "0 10px",
+      display: "flex",
+      gap: "10px"
+    }
+  }, components.map(function (component) {
+    return component;
+  })));
 };
-
-exports.default = GraphsComponentShimmer;
+var _default = exports["default"] = GraphsComponentShimmer;

package/atoms/loader/ShimmerComponent/Shimmer.js

@@ -1,45 +1,37 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-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: ', ';\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');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var shimmerAnimation = (0, _styledComponents.keyframes)(_templateObject);
-
-var ShimmerContainer = _styledComponents2.default.div(_templateObject2, function (props) {
+exports["default"] = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var shimmerAnimation = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    0% {\n      transform: translateX(-100%);\n    }   \n    \n    100% {\n      transform: translateX(100%);\n    }\n"])));
+var ShimmerContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\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"])), function (props) {
   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,
-      borderRadius = _ref.borderRadius;
-
-  return _react2.default.createElement(
-    'div',
-    { style: { marginRight: '2px' } },
-    _react2.default.createElement(ShimmerContainer, { width: width, height: height, borderRadius: borderRadius }),
-    ' '
-  );
+    width = _ref.width,
+    borderRadius = _ref.borderRadius;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginRight: '2px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(ShimmerContainer, {
+    width: width,
+    height: height,
+    borderRadius: borderRadius
+  }), ' ');
 };
-
-exports.default = Shimmer;
+var _default = exports["default"] = Shimmer;

package/atoms/loader/ThreeDotLoader.js

@@ -1,37 +1,22 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _templateObject = _taggedTemplateLiteral(['\n  display: inline-block;\n\n  & span {\n    display: inline-block;\n    width: 20px;\n    height: 20px;\n    border-radius: 100%;\n    background-color: ', ';\n    margin: 0px 5px;\n    opacity: 0;\n  }\n\n  & span:nth-child(1) {\n    animation: opacitychange 1s ease-in-out infinite;\n  }\n\n  & span:nth-child(2) {\n    animation: opacitychange 1s ease-in-out 0.33s infinite;\n  }\n\n  & span:nth-child(3) {\n    animation: opacitychange 1s ease-in-out 0.66s infinite;\n  }\n\n  @keyframes opacitychange {\n    0%,\n    100% {\n      opacity: 0;\n    }\n\n    60% {\n      opacity: 1;\n    }\n  }\n'], ['\n  display: inline-block;\n\n  & span {\n    display: inline-block;\n    width: 20px;\n    height: 20px;\n    border-radius: 100%;\n    background-color: ', ';\n    margin: 0px 5px;\n    opacity: 0;\n  }\n\n  & span:nth-child(1) {\n    animation: opacitychange 1s ease-in-out infinite;\n  }\n\n  & span:nth-child(2) {\n    animation: opacitychange 1s ease-in-out 0.33s infinite;\n  }\n\n  & span:nth-child(3) {\n    animation: opacitychange 1s ease-in-out 0.66s infinite;\n  }\n\n  @keyframes opacitychange {\n    0%,\n    100% {\n      opacity: 0;\n    }\n\n    60% {\n      opacity: 1;\n    }\n  }\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _tokens = require('@desynova-digital/tokens');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var LoaderBox = _styledComponents2.default.div(_templateObject, function (props) {
+exports["default"] = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _tokens = require("@desynova-digital/tokens");
+var _templateObject;
+var LoaderBox = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-block;\n\n  & span {\n    display: inline-block;\n    width: 20px;\n    height: 20px;\n    border-radius: 100%;\n    background-color: ", ";\n    margin: 0px 5px;\n    opacity: 0;\n  }\n\n  & span:nth-child(1) {\n    animation: opacitychange 1s ease-in-out infinite;\n  }\n\n  & span:nth-child(2) {\n    animation: opacitychange 1s ease-in-out 0.33s infinite;\n  }\n\n  & span:nth-child(3) {\n    animation: opacitychange 1s ease-in-out 0.66s infinite;\n  }\n\n  @keyframes opacitychange {\n    0%,\n    100% {\n      opacity: 0;\n    }\n\n    60% {\n      opacity: 1;\n    }\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].label.boxBackground;
 });
-
 var ThreeDotLoader = function ThreeDotLoader(props) {
-  return _react2.default.createElement(
-    LoaderBox,
-    { theme: props.theme, className: 'loader three-dot-loader' },
-    _react2.default.createElement('span', null),
-    _react2.default.createElement('span', null),
-    _react2.default.createElement('span', null)
-  );
+  return /*#__PURE__*/_react["default"].createElement(LoaderBox, {
+    theme: props.theme,
+    className: "loader three-dot-loader"
+  }, /*#__PURE__*/_react["default"].createElement("span", null), /*#__PURE__*/_react["default"].createElement("span", null), /*#__PURE__*/_react["default"].createElement("span", null));
 };
-
-exports.default = ThreeDotLoader;
+var _default = exports["default"] = ThreeDotLoader;

package/atoms/loader/index.js

@@ -1,15 +1,17 @@
-'use strict';
+"use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledLoader = undefined;
-
-var _loader = require('./loader');
-
-var _loader2 = _interopRequireDefault(_loader);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _loader2.default;
-exports.StyledLoader = _loader.StyledLoader;
+Object.defineProperty(exports, "StyledLoader", {
+  enumerable: true,
+  get: function get() {
+    return _loader.StyledLoader;
+  }
+});
+exports["default"] = void 0;
+var _loader = _interopRequireWildcard(require("./loader"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var _default = exports["default"] = _loader["default"];

package/atoms/loader/loader.js

@@ -1,84 +1,60 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledLoader = undefined;
-
-var _templateObject = _taggedTemplateLiteral(['\n  display: ', ';\n  vertical-align: middle;\n  font-size: 11px;\n  line-height: 1;\n  font-family: \'SFUIText-Regular\';\n  color: ', ';\n  padding: 0px;\n  background: transparent;\n'], ['\n  display: ', ';\n  vertical-align: middle;\n  font-size: 11px;\n  line-height: 1;\n  font-family: \'SFUIText-Regular\';\n  color: ', ';\n  padding: 0px;\n  background: transparent;\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _tokens = require('@desynova-digital/tokens');
-
-var _ThreeDotLoader = require('./ThreeDotLoader');
-
-var _ThreeDotLoader2 = _interopRequireDefault(_ThreeDotLoader);
-
-var _CircleLoader = require('./CircleLoader');
-
-var _CircleLoader2 = _interopRequireDefault(_CircleLoader);
-
-var _spinningLoader = require('./spinningLoader');
-
-var _spinningLoader2 = _interopRequireDefault(_spinningLoader);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var StyledLoader = _styledComponents2.default.div(_templateObject, function (props) {
+exports["default"] = exports.StyledLoader = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _tokens = require("@desynova-digital/tokens");
+var _ThreeDotLoader = _interopRequireDefault(require("./ThreeDotLoader"));
+var _CircleLoader = _interopRequireDefault(require("./CircleLoader"));
+var _spinningLoader = _interopRequireDefault(require("./spinningLoader"));
+var _templateObject;
+var StyledLoader = exports.StyledLoader = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: ", ";\n  vertical-align: middle;\n  font-size: 11px;\n  line-height: 1;\n  font-family: 'SFUIText-Regular';\n  color: ", ";\n  padding: 0px;\n  background: transparent;\n"])), function (props) {
   return props.loaderName == 'SpinningLoader' ? '' : 'inline-block';
 }, function (props) {
   return _tokens.colors[props.theme].label.text;
 });
 var getLoaderComponent = function getLoaderComponent(props) {
   var loaderName = props.loaderName,
-      size = props.size,
-      background = props.background;
-
+    size = props.size,
+    background = props.background;
   if (loaderName && loaderName !== '') {
     if (loaderName === 'circle') {
-      return _react2.default.createElement(_CircleLoader2.default, { theme: props.theme });
+      return /*#__PURE__*/_react["default"].createElement(_CircleLoader["default"], {
+        theme: props.theme
+      });
     } else if (loaderName == 'SpinningLoader') {
-      return _react2.default.createElement(_spinningLoader2.default, { theme: props.theme, size: size, background: background });
+      return /*#__PURE__*/_react["default"].createElement(_spinningLoader["default"], {
+        theme: props.theme,
+        size: size,
+        background: background
+      });
     } else {
-      return _react2.default.createElement(_ThreeDotLoader2.default, { theme: props.theme });
+      return /*#__PURE__*/_react["default"].createElement(_ThreeDotLoader["default"], {
+        theme: props.theme
+      });
     }
   } else {
-    return _react2.default.createElement(_ThreeDotLoader2.default, { theme: props.theme });
+    return /*#__PURE__*/_react["default"].createElement(_ThreeDotLoader["default"], {
+      theme: props.theme
+    });
   }
 };
 var Loader = function Loader(props) {
-  return _react2.default.createElement(
-    StyledLoader,
-    props,
-    _react2.default.createElement(
-      'div',
-      { className: 'loader-holder' },
-      getLoaderComponent(props)
-    )
-  );
+  return /*#__PURE__*/_react["default"].createElement(StyledLoader, props, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "loader-holder"
+  }, getLoaderComponent(props)));
 };
-
 Loader.propTypes = {
   /** The visual style used to convey the label's purpose */
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc'])
 };
-
 Loader.defaultProps = {
   theme: 'dark'
 };
-
-exports.default = Loader;
-exports.StyledLoader = StyledLoader;
+var _default = exports["default"] = Loader;

package/atoms/loader/loader.story.js

@@ -1,55 +1,51 @@
-'use strict';
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _react3 = require('@storybook/react');
-
-var _storyHelpers = require('../../_helpers/story-helpers');
-
-var _components = require('../../components');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react3.storiesOf)('Loader').add('light theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances Light', background: 'white' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_components.Loader, null),
-      _react2.default.createElement(_components.Loader, { loaderName: 'circle' }),
-      _react2.default.createElement(_components.Loader, { theme: 'dark', loaderName: 'SpinningLoader', size: 'small', background: '#3acec6' })
-    )
-  );
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _storyHelpers = require("../../_helpers/story-helpers");
+var _components = require("../../components");
+(0, _react2.storiesOf)('Loader').add('light theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances Light",
+    background: "white"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Loader, null), /*#__PURE__*/_react["default"].createElement(_components.Loader, {
+    loaderName: "circle"
+  }), /*#__PURE__*/_react["default"].createElement(_components.Loader, {
+    theme: "dark",
+    loaderName: "SpinningLoader",
+    size: "small",
+    background: "#3acec6"
+  })));
 });
-
-(0, _react3.storiesOf)('Loader').add('dark theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances Dark', background: 'dark' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_components.Loader, { theme: 'dark' }),
-      _react2.default.createElement(_components.Loader, { theme: 'dark', loaderName: 'circle' }),
-      _react2.default.createElement(_components.Loader, { theme: 'dark', loaderName: 'SpinningLoader', size: 'small', background: '#3acec6' })
-    )
-  );
+(0, _react2.storiesOf)('Loader').add('dark theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances Dark",
+    background: "dark"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Loader, {
+    theme: "dark"
+  }), /*#__PURE__*/_react["default"].createElement(_components.Loader, {
+    theme: "dark",
+    loaderName: "circle"
+  }), /*#__PURE__*/_react["default"].createElement(_components.Loader, {
+    theme: "dark",
+    loaderName: "SpinningLoader",
+    size: "small",
+    background: "#3acec6"
+  })));
 });
-
-(0, _react3.storiesOf)('Loader').add('nexc theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances Dark', background: 'dark' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_components.Loader, { theme: 'nexc' }),
-      _react2.default.createElement(_components.Loader, { theme: 'nexc', loaderName: 'circle' }),
-      _react2.default.createElement(_components.Loader, { theme: 'nexc', loaderName: 'SpinningLoader', size: 'small' })
-    )
-  );
+(0, _react2.storiesOf)('Loader').add('nexc theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances Dark",
+    background: "dark"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Loader, {
+    theme: "nexc"
+  }), /*#__PURE__*/_react["default"].createElement(_components.Loader, {
+    theme: "nexc",
+    loaderName: "circle"
+  }), /*#__PURE__*/_react["default"].createElement(_components.Loader, {
+    theme: "nexc",
+    loaderName: "SpinningLoader",
+    size: "small"
+  })));
 });

package/atoms/loader/spinningLoader.js

@@ -1,55 +1,44 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-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 _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require("styled-components");
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
+exports["default"] = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _tokens = require("@desynova-digital/tokens");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var LoaderBox = _styledComponents2.default.div(_templateObject, function (props) {
+var _templateObject;
+var LoaderBox = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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"])), 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 : "" + _tokens.colors[props.theme].label.spinLoader;
+  return props.background ? "".concat(props.background) : "".concat(_tokens.colors[props.theme].label.spinLoader);
 }, 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 " + _tokens.colors[props.theme].label.spinLoader;
+  return props.background ? "4.28571px solid ".concat(props.background) : "4.28571px solid ".concat(_tokens.colors[props.theme].label.spinLoader);
 });
 var SpinningLoader = function SpinningLoader(_ref) {
   var size = _ref.size,
-      background = _ref.background,
-      theme = _ref.theme;
-
-  return _react2.default.createElement(
-    LoaderBox,
-    { theme: theme, size: size, background: background },
-    _react2.default.createElement(
-      "div",
-      { className: "parentBox" },
-      _react2.default.createElement("div", { className: "ball" }),
-      _react2.default.createElement("div", { className: "circle" })
-    )
-  );
+    background = _ref.background,
+    theme = _ref.theme;
+  return /*#__PURE__*/_react["default"].createElement(LoaderBox, {
+    theme: theme,
+    size: size,
+    background: background
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "parentBox"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ball"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "circle"
+  })));
 };
-
-exports.default = SpinningLoader;
+var _default = exports["default"] = SpinningLoader;

package/atoms/popup/index.js

@@ -1,13 +1,9 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _popup = require('./popup');
-
-var _popup2 = _interopRequireDefault(_popup);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _popup2.default;
+exports["default"] = void 0;
+var _popup = _interopRequireDefault(require("./popup"));
+var _default = exports["default"] = _popup["default"];