@desynova-digital/components 9.0.27 → 9.1.0

package/atoms/badge/badge.story.js

@@ -1,106 +1,48 @@
-'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)('Badge').add('light theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        _components.Badge,
-        null,
-        '01'
-      ),
-      _react2.default.createElement(
-        _components.Badge,
-        { theme: 'dark' },
-        '02'
-      ),
-      _react2.default.createElement(
-        _components.Badge,
-        { appearance: 'primary', theme: 'dark' },
-        '03'
-      ),
-      _react2.default.createElement(
-        _components.Badge,
-        { appearance: 'primary', theme: 'light' },
-        '04'
-      )
-    )
-  );
+"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)('Badge').add('light theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Badge, null, "01"), /*#__PURE__*/_react["default"].createElement(_components.Badge, {
+    theme: "dark"
+  }, "02"), /*#__PURE__*/_react["default"].createElement(_components.Badge, {
+    appearance: "primary",
+    theme: "dark"
+  }, "03"), /*#__PURE__*/_react["default"].createElement(_components.Badge, {
+    appearance: "primary",
+    theme: "light"
+  }, "04")));
 });
-
-(0, _react3.storiesOf)('Badge').add('dark theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances Dark', background: 'black' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        _components.Badge,
-        null,
-        '01'
-      ),
-      _react2.default.createElement(
-        _components.Badge,
-        { theme: 'dark' },
-        '02'
-      ),
-      _react2.default.createElement(
-        _components.Badge,
-        { appearance: 'primary', theme: 'dark' },
-        '03'
-      ),
-      _react2.default.createElement(
-        _components.Badge,
-        { appearance: 'primary', theme: 'dark' },
-        '04'
-      )
-    )
-  );
+(0, _react2.storiesOf)('Badge').add('dark theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances Dark",
+    background: "black"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Badge, null, "01"), /*#__PURE__*/_react["default"].createElement(_components.Badge, {
+    theme: "dark"
+  }, "02"), /*#__PURE__*/_react["default"].createElement(_components.Badge, {
+    appearance: "primary",
+    theme: "dark"
+  }, "03"), /*#__PURE__*/_react["default"].createElement(_components.Badge, {
+    appearance: "primary",
+    theme: "dark"
+  }, "04")));
 });
-
-(0, _react3.storiesOf)('Badge').add('nexc theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances Dark', background: 'black' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        _components.Badge,
-        null,
-        '01'
-      ),
-      _react2.default.createElement(
-        _components.Badge,
-        { theme: 'nexc' },
-        '02'
-      ),
-      _react2.default.createElement(
-        _components.Badge,
-        { appearance: 'primary', theme: 'nexc' },
-        '03'
-      ),
-      _react2.default.createElement(
-        _components.Badge,
-        { appearance: 'primary', theme: 'nexc' },
-        '04'
-      )
-    )
-  );
+(0, _react2.storiesOf)('Badge').add('nexc theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances Dark",
+    background: "black"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Badge, null, "01"), /*#__PURE__*/_react["default"].createElement(_components.Badge, {
+    theme: "nexc"
+  }, "02"), /*#__PURE__*/_react["default"].createElement(_components.Badge, {
+    appearance: "primary",
+    theme: "nexc"
+  }, "03"), /*#__PURE__*/_react["default"].createElement(_components.Badge, {
+    appearance: "primary",
+    theme: "nexc"
+  }, "04")));
 });

package/atoms/badge/index.js

@@ -1,15 +1,17 @@
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledBadge = undefined;
-
-var _badge = require("./badge");
-
-var _badge2 = _interopRequireDefault(_badge);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _badge2.default;
-exports.StyledBadge = _badge.StyledBadge;
+Object.defineProperty(exports, "StyledBadge", {
+  enumerable: true,
+  get: function get() {
+    return _badge.StyledBadge;
+  }
+});
+exports["default"] = void 0;
+var _badge = _interopRequireWildcard(require("./badge"));
+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"] = _badge["default"];

package/atoms/button/button.js

@@ -1,47 +1,29 @@
-'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 _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; };
-
-// import  colors  from "../../../tokens/colors";
-
-
-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  .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  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');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _icon = require('../icon');
-
-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; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
+exports["default"] = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _icon = _interopRequireWildcard(require("../icon"));
+var _tokens = require("@desynova-digital/tokens");
+var _components = require("../../components");
+var _excluded = ["children"];
+var _templateObject, _templateObject2, _templateObject3;
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // import  colors  from "../../../tokens/colors";
 var getAppearences = function getAppearences(key, theme) {
   var appearance = {};
-
   if (_tokens.colors[theme].button[key]) {
     appearance[key] = {
       text: _tokens.colors[theme].button[key].text,
@@ -58,18 +40,15 @@ var getAppearences = function getAppearences(key, theme) {
       hoverIcon: _tokens.colors[theme].button[key].iconHover
     };
   }
-
   return appearance;
 };
-
 var getAttributes = function getAttributes(props) {
   // Get the styles for the button's selected appearance.
   var appearances = getAppearences(props.appearance, props.theme);
-  var appearanceStyles = appearances[props.appearance] ? appearances[props.appearance] : appearances.default;
+  var appearanceStyles = appearances[props.appearance] ? appearances[props.appearance] : appearances["default"];
 
   // Merge the two style hashes together to create the base styles.
-  var styles = _extends({}, appearanceStyles);
-
+  var styles = _objectSpread({}, appearanceStyles);
   if (props.iconBackground && props.text) {
     styles.padding = '2px 4px 2px 20px';
   } else {
@@ -80,79 +59,60 @@ var getAttributes = function getAttributes(props) {
     styles.padding = '20px 17px';
     styles.minWidth = '36px';
   }
-
   if (props.text && !props.icon) {
     styles.padding = '10px 20px';
   }
-
   if (props.text && props.icon && props.iconLocation === 'left') {
     styles.padding = '6px 20px 6px 6px';
   }
-
   if (props.href || props.width || props.height) {
     styles.padding = '0px';
   }
-
   if (props.appearance === 'primary') {
     styles.transition = 'all 0.2s ease-in-out';
     styles.hoverBoxShadow = '0 5px 7px 0 ' + _tokens.colors[props.theme].button[props.appearance].boxShadow;
     styles.boxShadow = '0 12px 24px 0 ' + _tokens.colors[props.theme].button[props.appearance].boxShadow;
-
     styles.top = '2px';
   }
-
   if (props.disabled === 'disabled') {
     //styles.cursor= 'not-allowed'
   }
-
   if (props.width) {
     styles.width = props.width + 'px';
   }
-
   if (props.stretchWidth) {
     styles.width = '100%';
   }
-
   return styles;
 };
-
 var ButtonContent = function ButtonContent(props) {
-  var content = void 0;
-
+  var content;
   if (props.icon && props.text) {
     // The button contains both an icon and text.
     if (props.iconLocation === 'right') {
-      content = [_react2.default.createElement(
-        Button.Text,
-        { key: 'text' },
-        ' ',
-        props.text,
-        ' '
-      ), _react2.default.createElement(_icon2.default, {
-        key: 'icon',
+      content = [/*#__PURE__*/_react["default"].createElement(Button.Text, {
+        key: "text"
+      }, " ", props.text, " "), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        key: "icon",
         name: props.icon,
         width: props.iconWidth,
         height: props.iconHeight,
         color: getAttributes(props).icon
       })];
     } else {
-      content = [_react2.default.createElement(_icon2.default, {
-        key: 'icon',
+      content = [/*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        key: "icon",
         name: props.icon,
         width: props.iconWidth,
         height: props.iconHeight,
         color: getAttributes(props).icon
-      }), _react2.default.createElement(
-        Button.Text,
-        { key: 'text' },
-        ' ',
-        props.text,
-        ' '
-      )];
+      }), /*#__PURE__*/_react["default"].createElement(Button.Text, {
+        key: "text"
+      }, " ", props.text, " ")];
     }
   } else if (props.icon && !props.text) {
     // The button contains just an icon.
-    content = _react2.default.createElement(_icon2.default, {
+    content = /*#__PURE__*/_react["default"].createElement(_icon["default"], {
       name: props.icon,
       width: props.iconWidth,
       height: props.iconHeight,
@@ -160,66 +120,42 @@ var ButtonContent = function ButtonContent(props) {
     });
   } else {
     // The button contains just text.
-    content = _react2.default.createElement(
-      Button.Text,
-      null,
-      ' ',
-      props.text,
-      ' '
-    );
+    content = /*#__PURE__*/_react["default"].createElement(Button.Text, null, " ", props.text, " ");
   }
-
   var Element = props.href ? Button.LinkElement : Button.Element;
-
   if (props.label) {
-    return _react2.default.createElement(
-      Tooltip,
-      { className: 'tooltip-container', toolTipPosition: props.toolTipPosition },
-      _react2.default.createElement(
-        Element,
-        _extends({ type: 'button', className: props.disabled ? 'disabled' : '' }, props),
-        props.override || content
-      ),
-      _react2.default.createElement(
-        'div',
-        {
-          className: props.toolTipPosition ? 'tooltip-block ' + props.toolTipPosition : 'tooltip-block'
-        },
-        _react2.default.createElement(
-          'p',
-          null,
-          props.label
-        )
-      )
-    );
+    return /*#__PURE__*/_react["default"].createElement(Tooltip, {
+      className: "tooltip-container",
+      toolTipPosition: props.toolTipPosition
+    }, /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({
+      type: "button",
+      className: props.disabled ? 'disabled' : ''
+    }, props), props.override || content), /*#__PURE__*/_react["default"].createElement("div", {
+      className: props.toolTipPosition ? 'tooltip-block ' + props.toolTipPosition : 'tooltip-block'
+    }, /*#__PURE__*/_react["default"].createElement("p", null, props.label)));
   } else {
-    return _react2.default.createElement(
-      Element,
-      _extends({
-        type: 'button',
-        className: props.disabled || props.isLoading ? 'disabled' : ''
-      }, props),
-      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
-      )
-    );
+    return /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({
+      type: "button",
+      className: props.disabled || props.isLoading ? 'disabled' : ''
+    }, props), props.override || content, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "loader-wrapper"
+    }, props.isLoading && props.showLoader ? /*#__PURE__*/_react["default"].createElement(_components.Loader, {
+      theme: "dark",
+      loaderName: "SpinningLoader",
+      size: "small",
+      background: "#ffffff"
+    }) : null));
   }
 };
-
-var Tooltip = _styledComponents2.default.div(_templateObject, function (props) {
+var Tooltip = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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"])), function (props) {
   return props.toolTipPosition === 'bottom' ? '30px' : '-40px';
 }, function (props) {
   return props.toolTipPosition === 'bottom' ? 'border-bottom: 5px solid #000;top: -5px;' : 'border-top: 5px solid #000;bottom: -5px;';
 });
-
 var Button = function Button(_ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, ['children']);
-
-  var override = void 0;
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var override;
 
   // Some of the state properties will override the content of the button.
   // if (props.success) {
@@ -228,7 +164,10 @@ var Button = function Button(_ref) {
   //   override = <Spinner inverse={props.primary} />
   // }
 
-  var button = _react2.default.createElement(ButtonContent, _extends({}, props, { text: children, override: override }));
+  var button = /*#__PURE__*/_react["default"].createElement(ButtonContent, (0, _extends2["default"])({}, props, {
+    text: children,
+    override: override
+  }));
 
   // If a label was specified, wrap the Button in a Tooltip.
   // if (props.label) {
@@ -237,8 +176,7 @@ var Button = function Button(_ref) {
 
   return button;
 };
-
-Button.Element = _styledComponents2.default.button(_templateObject2, function (props) {
+Button.Element = _styledComponents["default"].button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\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  .loader-wrapper{\n    position: absolute;\n    top:50%;\n    left:50%;\n    transform: translate(-50%, -50%);\n  }\n"])), function (props) {
   return getAttributes(props).width ? getAttributes(props).width : 'auto';
 }, function (props) {
   return props.height ? props.height + 'px' : 'auto';
@@ -264,7 +202,7 @@ Button.Element = _styledComponents2.default.button(_templateObject2, function (p
   return !props.href || props.appearance !== 'cta' ? getAttributes(props).boxShadow : 'none';
 }, function (props) {
   return getAttributes(props).transition;
-}, _icon2.default.Element, function (props) {
+}, _icon["default"].Element, function (props) {
   return props.iconBackground && props.text ? '34px' : props.iconWidth + 'px';
 }, function (props) {
   return props.iconBackground && props.text ? '34px' : props.iconHeight + 'px';
@@ -290,7 +228,7 @@ Button.Element = _styledComponents2.default.button(_templateObject2, function (p
   return getAttributes(props).transition;
 }, function (props) {
   return !props.href || props.appearance !== 'cta' ? getAttributes(props).boxShadow : 'none';
-}, _icon2.default.Element, function (props) {
+}, _icon["default"].Element, function (props) {
   return 'fill : #FAFAFA';
 }, function (props) {
   return 'transition : all 0.4s';
@@ -303,50 +241,37 @@ Button.Element = _styledComponents2.default.button(_templateObject2, function (p
 }, function (props) {
   return getAttributes(props).activeBorder;
 });
-
 Button.LinkElement = Button.Element.withComponent('a');
-
-Button.Text = _styledComponents2.default.span(_templateObject3);
-
+Button.Text = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-block;\n  vertical-align: middle;\n"])));
 Button.propTypes = {
   /** The size of the button */
-  size: _propTypes2.default.oneOf(['default', 'large', 'small', 'compressed']),
-
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
-
+  size: _propTypes["default"].oneOf(['default', 'large', 'small', 'compressed']),
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
   /** The visual style used to convey the button's purpose */
-  appearance: _propTypes2.default.oneOf(['default', 'primary', 'secondary', 'cta', 'link', 'destructive', 'bordered']),
-
-  linkStyle: _propTypes2.default.oneOf(['normal', 'underline', 'bold']),
-
+  appearance: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'cta', 'link', 'destructive', 'bordered']),
+  linkStyle: _propTypes["default"].oneOf(['normal', 'underline', 'bold']),
   /** Name of icon */
-  icon: _propTypes2.default.oneOf(_icon.__ICONNAMES__),
-
+  icon: _propTypes["default"].oneOf(_icon.__ICONNAMES__),
   /** Tooltip to show when the user hovers over the button */
-  label: _propTypes2.default.string,
-
+  label: _propTypes["default"].string,
   /** The URL to navigate to when the button is clicked */
-  href: _propTypes2.default.string,
-
+  href: _propTypes["default"].string,
   /** Specifies where to open the navigated document */
-  target: _propTypes2.default.oneOf(['_blank', '_self', '_parent', '_top']),
-
+  target: _propTypes["default"].oneOf(['_blank', '_self', '_parent', '_top']),
   /** Disables the button, changing the visual style and make it unable to be pressed */
-  disabled: _propTypes2.default.bool,
-
+  disabled: _propTypes["default"].bool,
   /** Loading state when waiting for an action to complete */
-  loading: _propTypes2.default.bool,
-  width: _propTypes2.default.number,
-  height: _propTypes2.default.number,
+  loading: _propTypes["default"].bool,
+  width: _propTypes["default"].number,
+  height: _propTypes["default"].number,
   /** Successful state when action is completed successfuly */
-  success: _propTypes2.default.bool,
-  iconWidth: _propTypes2.default.number,
-  iconHeight: _propTypes2.default.number,
-  iconLocation: _propTypes2.default.string,
-  iconBackground: _propTypes2.default.bool,
-  iconBackgroundColor: _propTypes2.default.string
+  success: _propTypes["default"].bool,
+  iconWidth: _propTypes["default"].number,
+  iconHeight: _propTypes["default"].number,
+  iconLocation: _propTypes["default"].string,
+  iconBackground: _propTypes["default"].bool,
+  iconBackgroundColor: _propTypes["default"].string
 };
-
 Button.defaultProps = {
   size: 'default',
   theme: 'light',
@@ -361,7 +286,6 @@ Button.defaultProps = {
   iconLocation: 'right',
   iconBackground: true,
   //toolTipPosition:'top',
-  iconBackgroundColor: _tokens.colors.common.icon.default
+  iconBackgroundColor: _tokens.colors.common.icon["default"]
 };
-
-exports.default = Button;
+var _default = exports["default"] = Button;