@desynova-digital/components 8.19.62 → 9.0.0

package/atoms/avatar/avatar.js

@@ -40,7 +40,7 @@ var Avatar = function Avatar(props) {
 Avatar.propTypes = {
     /** The visual style used to convey the label's purpose */
     appearance: _propTypes2.default.oneOf(['default', 'primary']),
-    theme: _propTypes2.default.oneOf(['light', 'dark'])
+    theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
 };
 
 Avatar.defaultProps = {

package/atoms/avatar/avatar.story.js

@@ -12,18 +12,50 @@ var _components = require('../../components');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-(0, _react3.storiesOf)('Avatar').add('appearance', function () {
-    return _react2.default.createElement(
-        _storyHelpers.Example,
-        { title: 'Appearances' },
-        _react2.default.createElement(
-            _storyHelpers.Stack,
-            null,
-            _react2.default.createElement(
-                _components.Avatar,
-                { theme: 'dark' },
-                'AB'
-            )
-        )
-    );
+(0, _react3.storiesOf)('Avatar').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.Avatar,
+        { theme: 'dark' },
+        'AB'
+      )
+    )
+  );
+});
+
+(0, _react3.storiesOf)('Avatar').add('light theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Appearances' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        _components.Avatar,
+        null,
+        'AB'
+      )
+    )
+  );
+});
+
+(0, _react3.storiesOf)('Avatar').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.Avatar,
+        { theme: 'nexc' },
+        'AB'
+      )
+    )
+  );
 });

package/atoms/badge/badge.js

@@ -1,7 +1,7 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 exports.StyledBadge = undefined;
 
@@ -26,28 +26,28 @@ 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 StyledBadge = _styledComponents2.default.span(_templateObject, function (props) {
-    return _tokens.colors[props.theme].status[props.appearance].text;
+  return _tokens.colors[props.theme].status[props.appearance].text;
 }, function (props) {
-    return _tokens.colors[props.theme].status[props.appearance].background;
+  return _tokens.colors[props.theme].status[props.appearance].background;
 });
 
 var Badge = function Badge(props) {
-    return _react2.default.createElement(
-        StyledBadge,
-        props,
-        props.children
-    );
+  return _react2.default.createElement(
+    StyledBadge,
+    props,
+    props.children
+  );
 };
 
 Badge.propTypes = {
-    /** The visual style used to convey the label's purpose */
-    appearance: _propTypes2.default.oneOf(['default', 'primary']),
-    theme: _propTypes2.default.oneOf(['light', 'dark'])
+  /** The visual style used to convey the label's purpose */
+  appearance: _propTypes2.default.oneOf(['default', 'primary']),
+  theme: _propTypes2.default.oneOf(['light', 'dark'])
 };
 
 Badge.defaultProps = {
-    appearance: 'default',
-    theme: 'light'
+  appearance: 'default',
+  theme: 'light'
 };
 
 exports.default = Badge;

package/atoms/badge/badge.story.js

@@ -12,33 +12,95 @@ var _components = require('../../components');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-(0, _react3.storiesOf)('Badge').add('appearance', 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'
-            )
-        )
-    );
+(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'
+      )
+    )
+  );
+});
+
+(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, _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'
+      )
+    )
+  );
 });

package/atoms/button/button.js

@@ -1,36 +1,37 @@
-"use strict";
+'use strict';
 
 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 _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 _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _styledComponents = require("styled-components");
+var _styledComponents = require('styled-components');
 
 var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
-var _propTypes = require("prop-types");
+var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _icon = require("../icon");
+var _icon = require('../icon');
 
 var _icon2 = _interopRequireDefault(_icon);
 
-var _tokens = require("@desynova-digital/tokens");
+var _tokens = require('@desynova-digital/tokens');
 
-var _components = require("../../components");
+var _components = require('../../components');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -40,6 +41,7 @@ function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defi
 
 var getAppearences = function getAppearences(key, theme) {
   var appearance = {};
+
   if (_tokens.colors[theme].button[key]) {
     appearance[key] = {
       text: _tokens.colors[theme].button[key].text,
@@ -69,37 +71,37 @@ var getAttributes = function getAttributes(props) {
   var styles = _extends({}, appearanceStyles);
 
   if (props.iconBackground && props.text) {
-    styles.padding = "2px 4px 2px 20px";
+    styles.padding = '2px 4px 2px 20px';
   } else {
-    styles.padding = "8px 10px 8px 20px";
+    styles.padding = '8px 10px 8px 20px';
   }
   // If the button contains only an icon and no text, override some of the styles.
   if (props.icon && !props.text) {
-    styles.padding = "20px 17px";
-    styles.minWidth = "36px";
+    styles.padding = '20px 17px';
+    styles.minWidth = '36px';
   }
 
   if (props.text && !props.icon) {
-    styles.padding = "10px 20px";
+    styles.padding = '10px 20px';
   }
 
-  if (props.text && props.icon && props.iconLocation === "left") {
-    styles.padding = "6px 20px 6px 6px";
+  if (props.text && props.icon && props.iconLocation === 'left') {
+    styles.padding = '6px 20px 6px 6px';
   }
 
   if (props.href || props.width || props.height) {
-    styles.padding = "0px";
+    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;
+  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";
+    styles.top = '2px';
   }
 
-  if (props.disabled === "disabled") {
+  if (props.disabled === 'disabled') {
     //styles.cursor= 'not-allowed'
   }
 
@@ -108,7 +110,7 @@ var getAttributes = function getAttributes(props) {
   }
 
   if (props.stretchWidth) {
-    styles.width = "100%";
+    styles.width = '100%';
   }
 
   return styles;
@@ -119,15 +121,15 @@ var ButtonContent = function ButtonContent(props) {
 
   if (props.icon && props.text) {
     // The button contains both an icon and text.
-    if (props.iconLocation === "right") {
+    if (props.iconLocation === 'right') {
       content = [_react2.default.createElement(
         Button.Text,
-        { key: "text" },
-        " ",
+        { key: 'text' },
+        ' ',
         props.text,
-        " "
+        ' '
       ), _react2.default.createElement(_icon2.default, {
-        key: "icon",
+        key: 'icon',
         name: props.icon,
         width: props.iconWidth,
         height: props.iconHeight,
@@ -135,17 +137,17 @@ var ButtonContent = function ButtonContent(props) {
       })];
     } else {
       content = [_react2.default.createElement(_icon2.default, {
-        key: "icon",
+        key: 'icon',
         name: props.icon,
         width: props.iconWidth,
         height: props.iconHeight,
         color: getAttributes(props).icon
       }), _react2.default.createElement(
         Button.Text,
-        { key: "text" },
-        " ",
+        { key: 'text' },
+        ' ',
         props.text,
-        " "
+        ' '
       )];
     }
   } else if (props.icon && !props.text) {
@@ -161,9 +163,9 @@ var ButtonContent = function ButtonContent(props) {
     content = _react2.default.createElement(
       Button.Text,
       null,
-      " ",
+      ' ',
       props.text,
-      " "
+      ' '
     );
   }
 
@@ -172,25 +174,19 @@ var ButtonContent = function ButtonContent(props) {
   if (props.label) {
     return _react2.default.createElement(
       Tooltip,
-      {
-        className: "tooltip-container",
-        toolTipPosition: props.toolTipPosition
-      },
+      { className: 'tooltip-container', toolTipPosition: props.toolTipPosition },
       _react2.default.createElement(
         Element,
-        _extends({
-          type: "button",
-          className: props.disabled ? "disabled" : ""
-        }, props),
+        _extends({ type: 'button', className: props.disabled ? 'disabled' : '' }, props),
         props.override || content
       ),
       _react2.default.createElement(
-        "div",
+        'div',
         {
-          className: props.toolTipPosition ? "tooltip-block " + props.toolTipPosition : "tooltip-block"
+          className: props.toolTipPosition ? 'tooltip-block ' + props.toolTipPosition : 'tooltip-block'
         },
         _react2.default.createElement(
-          "p",
+          'p',
           null,
           props.label
         )
@@ -200,28 +196,28 @@ var ButtonContent = function ButtonContent(props) {
     return _react2.default.createElement(
       Element,
       _extends({
-        type: "button",
-        className: props.disabled || props.isLoading ? "disabled" : ""
+        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
+        'div',
+        { className: 'loader-wrapper' },
+        props.isLoading && props.showLoader ? _react2.default.createElement(_components.Loader, { theme: 'dark', loaderName: 'SpinningLoader', size: 'small', background: '#ffffff' }) : null
       )
     );
   }
 };
 
 var Tooltip = _styledComponents2.default.div(_templateObject, function (props) {
-  return props.toolTipPosition === "bottom" ? "30px" : "-40px";
+  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;";
+  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"]);
+      props = _objectWithoutProperties(_ref, ['children']);
 
   var override = void 0;
 
@@ -243,15 +239,15 @@ var Button = function Button(_ref) {
 };
 
 Button.Element = _styledComponents2.default.button(_templateObject2, function (props) {
-  return getAttributes(props).width ? getAttributes(props).width : "auto";
+  return getAttributes(props).width ? getAttributes(props).width : 'auto';
 }, function (props) {
-  return props.height ? props.height + "px" : "auto";
+  return props.height ? props.height + 'px' : 'auto';
 }, function (props) {
-  return !props.href ? "3px solid" : "none";
+  return !props.href ? '3px solid' : 'none';
 }, function (props) {
-  return !props.href ? getAttributes(props).background : "none";
+  return !props.href ? getAttributes(props).background : 'none';
 }, function (props) {
-  return !props.href ? getAttributes(props).border : "none";
+  return !props.href ? getAttributes(props).border : 'none';
 }, function (props) {
   return props.isLoading ? getAttributes(props).background : getAttributes(props).text;
 }, function (props) {
@@ -259,33 +255,33 @@ Button.Element = _styledComponents2.default.button(_templateObject2, function (p
 }, function (props) {
   return props.disabled || props.isLoading ? 0.5 : 1;
 }, function (props) {
-  return props.disabled || props.isLoading ? "not-allowed" : "pointer";
+  return props.disabled || props.isLoading ? 'not-allowed' : 'pointer';
 }, function (props) {
-  return props.disabled || props.loading || props.success || props.isLoading ? "none" : null;
+  return props.disabled || props.loading || props.success || props.isLoading ? 'none' : null;
 }, function (props) {
-  return props.display === "rounded" ? "999rem" : "0px";
+  return props.display === 'rounded' ? '999rem' : '0px';
 }, function (props) {
-  return !props.href || props.appearance !== "cta" ? getAttributes(props).boxShadow : "none";
+  return !props.href || props.appearance !== 'cta' ? getAttributes(props).boxShadow : 'none';
 }, function (props) {
   return getAttributes(props).transition;
 }, _icon2.default.Element, function (props) {
-  return props.iconBackground && props.text ? "34px" : props.iconWidth + "px";
+  return props.iconBackground && props.text ? '34px' : props.iconWidth + 'px';
 }, function (props) {
-  return props.iconBackground && props.text ? "34px" : props.iconHeight + "px";
+  return props.iconBackground && props.text ? '34px' : props.iconHeight + 'px';
 }, function (props) {
-  return props.text && props.iconLocation === "right" ? "15px" : "0px";
+  return props.text && props.iconLocation === 'right' ? '15px' : '0px';
 }, function (props) {
-  return props.text && props.iconLocation === "left" ? "7px" : "0px";
+  return props.text && props.iconLocation === 'left' ? '7px' : '0px';
 }, function (props) {
-  return props.iconBackground && props.text ? props.iconBackgroundColor : "transparent";
+  return props.iconBackground && props.text ? props.iconBackgroundColor : 'transparent';
 }, function (props) {
-  return props.iconBackground && props.text ? "100%" : "0px";
+  return props.iconBackground && props.text ? '100%' : '0px';
 }, function (props) {
   return getAttributes(props).hoverText || getAttributes(props).text;
 }, function (props) {
-  return !props.href || props.appearance !== "cta" ? getAttributes(props).hoverBoxShadow : "none";
+  return !props.href || props.appearance !== 'cta' ? getAttributes(props).hoverBoxShadow : 'none';
 }, function (props) {
-  return !props.href || props.appearance !== "cta" ? getAttributes(props).top : "0px";
+  return !props.href || props.appearance !== 'cta' ? getAttributes(props).top : '0px';
 }, function (props) {
   return getAttributes(props).hoverBackground;
 }, function (props) {
@@ -293,11 +289,11 @@ Button.Element = _styledComponents2.default.button(_templateObject2, function (p
 }, function (props) {
   return getAttributes(props).transition;
 }, function (props) {
-  return !props.href || props.appearance !== "cta" ? getAttributes(props).boxShadow : "none";
+  return !props.href || props.appearance !== 'cta' ? getAttributes(props).boxShadow : 'none';
 }, _icon2.default.Element, function (props) {
-  return "fill : #FAFAFA";
+  return 'fill : #FAFAFA';
 }, function (props) {
-  return "transition : all 0.4s";
+  return 'transition : all 0.4s';
 }, function (props) {
   return getAttributes(props).focusBackground;
 }, function (props) {
@@ -308,20 +304,20 @@ Button.Element = _styledComponents2.default.button(_templateObject2, function (p
   return getAttributes(props).activeBorder;
 });
 
-Button.LinkElement = Button.Element.withComponent("a");
+Button.LinkElement = Button.Element.withComponent('a');
 
 Button.Text = _styledComponents2.default.span(_templateObject3);
 
 Button.propTypes = {
   /** The size of the button */
-  size: _propTypes2.default.oneOf(["default", "large", "small", "compressed"]),
+  size: _propTypes2.default.oneOf(['default', 'large', 'small', 'compressed']),
 
-  theme: _propTypes2.default.oneOf(["light", "dark"]),
+  theme: _propTypes2.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"]),
+  appearance: _propTypes2.default.oneOf(['default', 'primary', 'secondary', 'cta', 'link', 'destructive', 'bordered']),
 
-  linkStyle: _propTypes2.default.oneOf(["normal", "underline", "bold"]),
+  linkStyle: _propTypes2.default.oneOf(['normal', 'underline', 'bold']),
 
   /** Name of icon */
   icon: _propTypes2.default.oneOf(_icon.__ICONNAMES__),
@@ -333,7 +329,7 @@ Button.propTypes = {
   href: _propTypes2.default.string,
 
   /** Specifies where to open the navigated document */
-  target: _propTypes2.default.oneOf(["_blank", "_self", "_parent", "_top"]),
+  target: _propTypes2.default.oneOf(['_blank', '_self', '_parent', '_top']),
 
   /** Disables the button, changing the visual style and make it unable to be pressed */
   disabled: _propTypes2.default.bool,
@@ -352,9 +348,9 @@ Button.propTypes = {
 };
 
 Button.defaultProps = {
-  size: "default",
-  theme: "light",
-  appearance: "primary",
+  size: 'default',
+  theme: 'light',
+  appearance: 'primary',
   icon: null,
   disabled: false,
   loading: false,
@@ -362,7 +358,7 @@ Button.defaultProps = {
   iconWidth: 20,
   iconHeight: 20,
   iconHover: false,
-  iconLocation: "right",
+  iconLocation: 'right',
   iconBackground: true,
   //toolTipPosition:'top',
   iconBackgroundColor: _tokens.colors.common.icon.default