@desynova-digital/components 8.19.63 → 9.0.1

package/atoms/inputText/inputText.js

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,29 +8,29 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-var _templateObject = _taggedTemplateLiteral(["\n  background: transparent;\n  font-family: \"SFUIText-Medium\";\n  position: relative;\n  width: 100%;\n  display: block;\n\n  > label {\n    color: #999999;\n    font-size: 14px;\n\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > input:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n  > input ~ label.floaton {\n    top: -5px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n"], ["\n  background: transparent;\n  font-family: \"SFUIText-Medium\";\n  position: relative;\n  width: 100%;\n  display: block;\n\n  > label {\n    color: #999999;\n    font-size: 14px;\n\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > input:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n  > input ~ label.floaton {\n    top: -5px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n"]),
-    _templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n"], ["\n  color: ", ";\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n"]),
-    _templateObject3 = _taggedTemplateLiteral(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: absolute;\n  right: 0;\n  top: 5px;\n  &:focus {\n    outline: none;\n  }\n"], ["\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: absolute;\n  right: 0;\n  top: 5px;\n  &:focus {\n    outline: none;\n  }\n"]),
-    _templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303f51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #ffffff;\n"], ["\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303f51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #ffffff;\n"]),
-    _templateObject5 = _taggedTemplateLiteral(["\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ", ";\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ", ";\n\n  font-family: \"SFUIText-Medium\";\n  color: ", ";\n\n  cursor: ", ";\n\n  font-size: 14px;\n  padding: ", ";\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ", ";\n  }\n  &:disabled:hover {\n    border-color: ", ";\n  }\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ", ";\n\n    opacity: ", ";\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ", ";\n\n    opacity: ", ";\n  }\n"], ["\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ", ";\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ", ";\n\n  font-family: \"SFUIText-Medium\";\n  color: ", ";\n\n  cursor: ", ";\n\n  font-size: 14px;\n  padding: ", ";\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ", ";\n  }\n  &:disabled:hover {\n    border-color: ", ";\n  }\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ", ";\n\n    opacity: ", ";\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ", ";\n\n    opacity: ", ";\n  }\n"]);
+var _templateObject = _taggedTemplateLiteral(['\n  background: transparent;\n  font-family: \'SFUIText-Medium\';\n  position: relative;\n  width: 100%;\n  display: block;\n\n  > label {\n    color: #999999;\n    font-size: 14px;\n\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > input:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n  > input ~ label.floaton {\n    top: -5px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n'], ['\n  background: transparent;\n  font-family: \'SFUIText-Medium\';\n  position: relative;\n  width: 100%;\n  display: block;\n\n  > label {\n    color: #999999;\n    font-size: 14px;\n\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > input:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n  > input ~ label.floaton {\n    top: -5px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  color: ', ';\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n'], ['\n  color: ', ';\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: absolute;\n  right: 0;\n  top: 5px;\n  &:focus {\n    outline: none;\n  }\n'], ['\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: absolute;\n  right: 0;\n  top: 5px;\n  &:focus {\n    outline: none;\n  }\n']),
+    _templateObject4 = _taggedTemplateLiteral(['\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303f51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #ffffff;\n'], ['\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303f51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #ffffff;\n']),
+    _templateObject5 = _taggedTemplateLiteral(['\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ', ';\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ', ';\n\n  font-family: \'SFUIText-Medium\';\n  color: ', ';\n\n  cursor: ', ';\n\n  font-size: 14px;\n  padding: ', ';\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ', ';\n  }\n  &:disabled:hover {\n    border-color: ', ';\n  }\n  &:disabled {\n    border-color: ', ';\n    color: ', ';\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n  }\n'], ['\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ', ';\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ', ';\n\n  font-family: \'SFUIText-Medium\';\n  color: ', ';\n\n  cursor: ', ';\n\n  font-size: 14px;\n  padding: ', ';\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ', ';\n  }\n  &:disabled:hover {\n    border-color: ', ';\n  }\n  &:disabled {\n    border-color: ', ';\n    color: ', ';\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ', ';\n\n    opacity: ', ';\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);
 
-var _icon = require("../icon");
+var _icon = require('../icon');
 
 var _icon2 = _interopRequireDefault(_icon);
 
-var _propTypes = require("prop-types");
+var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _tokens = require("@desynova-digital/tokens");
+var _tokens = require('@desynova-digital/tokens');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -49,11 +49,12 @@ var PasswordToggleButton = _styledComponents2.default.div(_templateObject3);
 var CountWrappper = _styledComponents2.default.div(_templateObject4);
 
 var InputText = function InputText(_ref) {
-  var maxLength = _ref.maxLength,
+  var theme = _ref.theme,
+      maxLength = _ref.maxLength,
       defaultValue = _ref.defaultValue,
       type = _ref.type,
       showLengthCount = _ref.showLengthCount,
-      props = _objectWithoutProperties(_ref, ["maxLength", "defaultValue", "type", "showLengthCount"]);
+      props = _objectWithoutProperties(_ref, ['theme', 'maxLength', 'defaultValue', 'type', 'showLengthCount']);
 
   var _useState = (0, _react.useState)(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -62,8 +63,9 @@ var InputText = function InputText(_ref) {
 
   if (props.masked) {
     var length = defaultValue ? defaultValue.length : 8;
-    var maskedValue = new Array(length).join("•");
+    var maskedValue = new Array(length).join('•');
     return _react2.default.createElement(InputText.Element, _extends({
+      theme: theme,
       value: props.value,
       type: type
     }, props, {
@@ -85,71 +87,72 @@ var InputText = function InputText(_ref) {
 
   return _react2.default.createElement(
     InputTextDiv,
-    { theme: props.theme },
+    { theme: theme },
     _react2.default.createElement(InputText.Element, _extends({
-      type: hidden ? type : "text",
+      theme: theme,
+      type: hidden ? type : 'text',
       value: props.value,
       defaultValue: defaultValue
     }, props, {
-      maxLength: maxLength || "",
+      maxLength: maxLength || '',
       showLengthCount: showLengthCount || false
     })),
     props.label ? _react2.default.createElement(
-      "label",
+      'label',
       {
         htmlFor: props.id,
-        className: props.value && props.value.length > 0 ? "floaton" : ""
+        className: props.value && props.value.length > 0 ? 'floaton' : ''
       },
-      "" + props.label + (props.isRequired ? "*" : "")
-    ) : "",
+      '' + props.label + (props.isRequired ? '*' : '')
+    ) : '',
     errorMesssage ? _react2.default.createElement(
       InputError,
-      { value: props.value, theme: props.theme, error: props.error },
+      { value: props.value, theme: theme, error: props.error },
       errorMesssage
-    ) : "",
+    ) : '',
     maxLength && showLengthCount && _react2.default.createElement(
       CountWrappper,
       null,
       props.value.length,
-      "/",
+      '/',
       maxLength
     ),
-    type == "password" || passwordButton ? _react2.default.createElement(
+    type == 'password' || passwordButton ? _react2.default.createElement(
       PasswordToggleButton,
       {
-        type: "button",
-        className: "password-toggle",
+        type: 'button',
+        className: 'password-toggle',
         onClick: function onClick() {
           return togglePassword(!hidden);
         },
         hiddenEye: errorMesssage ? true : false
       },
-      hidden ? _react2.default.createElement(_icon2.default, { name: "show-password", width: 18, height: 15, color: "#999" }) : _react2.default.createElement(_icon2.default, { name: "hide-password", width: 18, height: 15, color: "#999" })
-    ) : ""
+      hidden ? _react2.default.createElement(_icon2.default, { name: 'show-password', width: 18, height: 15, color: '#999' }) : _react2.default.createElement(_icon2.default, { name: 'hide-password', width: 18, height: 15, color: '#999' })
+    ) : ''
   );
 };
 var returnPadding = function returnPadding(props) {
   var digitCount = props.maxLength.toString().length;
 
   if (props.type === 'password') {
-    return "7px 23px 2px 0px";
+    return '7px 23px 2px 0px';
   }
 
   switch (digitCount) {
     case 0:
-      return "7px 0px 2px 0px";
+      return '7px 0px 2px 0px';
     case 1:
-      return "7px 40px 2px 0px";
+      return '7px 40px 2px 0px';
     case 2:
-      return "7px 60px 2px 0px";
+      return '7px 60px 2px 0px';
     case 3:
-      return "7px 75px 2px 0px";
+      return '7px 75px 2px 0px';
     case 4:
-      return "7px 90px 2px 0px";
+      return '7px 90px 2px 0px';
     case 5:
-      return "7px 110px 2px 0px";
+      return '7px 110px 2px 0px';
     default:
-      return "7px 0px 2px 0px";
+      return '7px 0px 2px 0px';
   }
 };
 
@@ -164,9 +167,9 @@ InputText.Element = _styledComponents2.default.input(_templateObject5, function
 }, function (props) {
   return _tokens.colors[props.theme].inputCommon.color;
 }, function (props) {
-  return props.readOnly ? "not-allowed" : "text";
+  return props.readOnly ? 'not-allowed' : 'text';
 }, function (props) {
-  return returnPadding(props || "");
+  return returnPadding(props || '');
 }, function (props) {
   if (props.error) {
     return _tokens.colors[props.theme].inputError.borderHover;
@@ -180,19 +183,19 @@ InputText.Element = _styledComponents2.default.input(_templateObject5, function
 }, function (props) {
   return _tokens.colors[props.theme].inputCommon.colorDisabled;
 }, function (props) {
-  return props.label ? "transparent" : function (props) {
-    return props.theme === "light" ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
+  return props.label ? 'transparent' : function (props) {
+    return props.theme === 'light' ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
   };
 }, function (props) {
-  return props.label ? "0" : "1";
+  return props.label ? '0' : '1';
 }, function (props) {
   return props.placeholder ? function (props) {
-    return props.theme === "light" ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
+    return props.theme === 'light' ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
   } : function (props) {
-    return props.theme === "light" ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
+    return props.theme === 'light' ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
   };
 }, function (props) {
-  return props.placeholder ? "1" : "1";
+  return props.placeholder ? '1' : '1';
 });
 
 InputText.propTypes = {
@@ -218,7 +221,7 @@ InputText.propTypes = {
   /** The (HTML) maxLength for the input. */
   maxLength: _propTypes2.default.number,
   showLengthCount: _propTypes2.default.bool,
-  theme: _propTypes2.default.oneOf(["light", "dark"])
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
 
   /** deprecate error string prop */
   // _error: props => deprecate(props, { name: 'error', replacement: 'hasError' })
@@ -229,10 +232,10 @@ InputText.defaultProps = {
   code: false,
   error: null,
   onChange: null,
-  type: "text",
+  type: 'text',
   // maxLength: 50,
-  theme: "light",
-  value: "",
+  theme: 'light',
+  value: '',
   showLengthCount: false
 };
 

package/atoms/label/label.js

@@ -1,21 +1,21 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  padding: 3px;\n  border-radius: 2px;\n  display: inline-block;\n  color: ", ";\n  background-color: ", ";\n  font-size: 10px;\n  line-height: 1;\n  text-transform: uppercase;\n  font-family: \"SFUIText-Medium\";\n"], ["\n  position: relative;\n  padding: 3px;\n  border-radius: 2px;\n  display: inline-block;\n  color: ", ";\n  background-color: ", ";\n  font-size: 10px;\n  line-height: 1;\n  text-transform: uppercase;\n  font-family: \"SFUIText-Medium\";\n"]),
-    _templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 60px;\n  height: 20px;\n  background-color: ", ";\n  border-radius: 2px;\n\n  .filler {\n    position: absolute;\n    width: ", ";\n    top: 0;\n    left: 0;\n    height: 100%;\n    background-color: ", ";\n    border-top-left-radius: 2px;\n    border-bottom-left-radius: 2px;\n    transition: width 0.5s;\n  }\n\n  .percentage-label {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: ", ";\n    font-size: 12px;\n    font-weight: 700;\n  }\n"], ["\n  position: relative;\n  width: 60px;\n  height: 20px;\n  background-color: ", ";\n  border-radius: 2px;\n\n  .filler {\n    position: absolute;\n    width: ", ";\n    top: 0;\n    left: 0;\n    height: 100%;\n    background-color: ", ";\n    border-top-left-radius: 2px;\n    border-bottom-left-radius: 2px;\n    transition: width 0.5s;\n  }\n\n  .percentage-label {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: ", ";\n    font-size: 12px;\n    font-weight: 700;\n  }\n"]);
+var _templateObject = _taggedTemplateLiteral(['\n  position: relative;\n  padding: 3px;\n  border-radius: 2px;\n  display: inline-block;\n  color: ', ';\n  background-color: ', ';\n  font-size: 10px;\n  line-height: 1;\n  text-transform: uppercase;\n  font-family: \'SFUIText-Medium\';\n'], ['\n  position: relative;\n  padding: 3px;\n  border-radius: 2px;\n  display: inline-block;\n  color: ', ';\n  background-color: ', ';\n  font-size: 10px;\n  line-height: 1;\n  text-transform: uppercase;\n  font-family: \'SFUIText-Medium\';\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  position: relative;\n  width: 60px;\n  height: 20px;\n  background-color: ', ';\n  border-radius: 2px;\n\n  .filler {\n    position: absolute;\n    width: ', ';\n    top: 0;\n    left: 0;\n    height: 100%;\n    background-color: ', ';\n    border-top-left-radius: 2px;\n    border-bottom-left-radius: 2px;\n    transition: width 0.5s;\n  }\n\n  .percentage-label {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: ', ';\n    font-size: 12px;\n    font-weight: 700;\n  }\n'], ['\n  position: relative;\n  width: 60px;\n  height: 20px;\n  background-color: ', ';\n  border-radius: 2px;\n\n  .filler {\n    position: absolute;\n    width: ', ';\n    top: 0;\n    left: 0;\n    height: 100%;\n    background-color: ', ';\n    border-top-left-radius: 2px;\n    border-bottom-left-radius: 2px;\n    transition: width 0.5s;\n  }\n\n  .percentage-label {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: ', ';\n    font-size: 12px;\n    font-weight: 700;\n  }\n']);
 
-var _react = require("react");
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require("prop-types");
+var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _styledComponents = require("styled-components");
+var _styledComponents = require('styled-components');
 
 var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
@@ -25,10 +25,10 @@ function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defi
 
 var LabelStyles = _styledComponents2.default.div(_templateObject, function (_ref) {
   var hex = _ref.hex;
-  return hex.color || "#0C141D";
+  return hex.color || '#0C141D';
 }, function (_ref2) {
   var hex = _ref2.hex;
-  return hex.background || "#AFB2BA";
+  return hex.background || '#AFB2BA';
 });
 
 var PercentageBox = _styledComponents2.default.div(_templateObject2, function (_ref3) {
@@ -46,35 +46,35 @@ var PercentageBox = _styledComponents2.default.div(_templateObject2, function (_
 });
 
 var LABEL_STYLES = [{
-  code: ["cancelled", "error", "failed", "upload_cancelled_by_user", "rejected"],
+  code: ['cancelled', 'error', 'failed', 'upload_cancelled_by_user', 'rejected'],
   hex: {
-    background: "#FF6C56",
-    color: "#FFF"
+    background: '#FF6C56',
+    color: '#FFF'
   }
 }, {
-  code: ["in_queue", "inqueue", "running", "verifying", "approval_pending"],
+  code: ['in_queue', 'inqueue', 'running', 'verifying', 'approval_pending'],
   hex: {
-    background: "#F9E900"
+    background: '#F9E900'
   }
 }, {
-  code: ["finished", "archived", "restored", "approved", "success", "complete", "upload_finished", "delivered", "ingested", "tagged", "created", "shared"],
+  code: ['finished', 'archived', 'restored', 'approved', 'success', 'complete', 'upload_finished', 'delivered', 'ingested', 'tagged', 'created', 'shared'],
   hex: {
-    background: "#18B96E"
+    background: '#18B96E'
   }
 }, {
-  code: ["paused", "initiated", "started", "upload_paused"],
+  code: ['paused', 'initiated', 'started', 'upload_paused'],
   hex: {
-    background: "#FFF"
+    background: '#FFF'
   }
 }, {
-  code: ["pending", "approval_pending", "final_upload"],
+  code: ['pending', 'approval_pending', 'final_upload'],
   hex: {
-    background: "#AFB2BA"
+    background: '#AFB2BA'
   }
 }, {
-  code: ["in_progress", "in_review", "dummy"],
+  code: ['in_progress', 'in_review', 'dummy'],
   hex: {
-    background: "#FF8D29"
+    background: '#FF8D29'
   }
 }];
 
@@ -88,22 +88,22 @@ var Label = function Label(props) {
     return _react2.default.createElement(
       PercentageBox,
       { fillerWidth: value, percentageField: percentageField },
-      _react2.default.createElement("div", { "class": "filler" }),
+      _react2.default.createElement('div', { 'class': 'filler' }),
       _react2.default.createElement(
-        "div",
-        { "class": "percentage-label" },
+        'div',
+        { 'class': 'percentage-label' },
         value
       )
     );
   }
   // eg. status = Upload Cancelled By User
-  var arr = status ? status.toLowerCase().split(" ") : []; // [upload, cancelled, by, user]
+  var arr = status ? status.toLowerCase().split(' ') : []; // [upload, cancelled, by, user]
   var formatted = arr.reduce(function (acc, curr, index, org) {
     if (index + 1 === arr.length) {
       acc = acc + curr;
-    } else acc = acc + curr + "_";
+    } else acc = acc + curr + '_';
     return acc;
-  }, ""); // upload_cancelled_by_user
+  }, ''); // upload_cancelled_by_user
   var index = LABEL_STYLES.findIndex(function (label) {
     return label.code.includes(formatted);
   });
@@ -117,11 +117,11 @@ var Label = function Label(props) {
 
 Label.propTypes = {
   /** The visual style used to convey the label's purpose */
-  theme: _propTypes2.default.oneOf(["light", "dark"])
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
 };
 
 Label.defaultProps = {
-  theme: "light"
+  theme: 'light'
 };
 
 exports.default = Label;

package/atoms/label/label.story.js

@@ -1,85 +1,97 @@
-"use strict";
+'use strict';
 
-var _react = require("react");
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _react3 = require("@storybook/react");
+var _react3 = require('@storybook/react');
 
-var _storyHelpers = require("../../_helpers/story-helpers");
+var _storyHelpers = require('../../_helpers/story-helpers');
 
-var _components = require("../../components");
+var _components = require('../../components');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-(0, _react3.storiesOf)("Label").add("appearance-light", function () {
+(0, _react3.storiesOf)('Label').add('light theme', function () {
   return _react2.default.createElement(
     _storyHelpers.Example,
-    { title: "Appearances Light", background: "white" },
+    { title: 'Appearances Light', background: 'white' },
     _react2.default.createElement(
       _storyHelpers.Stack,
       null,
       _react2.default.createElement(
         _components.Label,
-        { status: "In Progress" },
-        "SHOW"
+        { status: 'In Progress' },
+        'SHOW'
       ),
       _react2.default.createElement(
         _components.Label,
-        { status: "upload cancelled by user" },
-        "MOVIE"
+        { status: 'upload cancelled by user' },
+        'MOVIE'
       ),
       _react2.default.createElement(
         _components.Label,
-        { status: "fiNished" },
-        "CLIPS"
+        { status: 'fiNished' },
+        'CLIPS'
       ),
       _react2.default.createElement(
         _components.Label,
-        { status: "started" },
-        "TVC"
+        { status: 'started' },
+        'TVC'
       ),
       _react2.default.createElement(
         _components.Label,
-        { status: "something else" },
-        "PROMOS"
+        { status: 'something else' },
+        'PROMOS'
       )
     )
   );
 });
 
-(0, _react3.storiesOf)("Label").add("appearance-dark", function () {
+(0, _react3.storiesOf)('Label').add('dark theme', function () {
   return _react2.default.createElement(
     _storyHelpers.Example,
-    { title: "Appearances Dark", background: "dark" },
+    { title: 'Appearances Dark', background: 'dark' },
     _react2.default.createElement(
       _storyHelpers.Stack,
       null,
       _react2.default.createElement(
         _components.Label,
-        { theme: "dark" },
-        "SHOW"
+        { theme: 'dark', status: 'In Progress' },
+        'SHOW'
       ),
       _react2.default.createElement(
         _components.Label,
-        { theme: "dark" },
-        "MOVIE"
+        { theme: 'dark', status: 'upload cancelled by user' },
+        'MOVIE'
       ),
       _react2.default.createElement(
         _components.Label,
-        { theme: "dark" },
-        "CLIPS"
+        { theme: 'dark', status: 'fiNished' },
+        'CLIPS'
       ),
       _react2.default.createElement(
         _components.Label,
-        { theme: "dark" },
-        "PROMOS"
+        { theme: 'dark', status: 'started' },
+        'TVC'
       ),
       _react2.default.createElement(
         _components.Label,
-        { theme: "dark" },
-        "TVC"
+        { theme: 'drak', status: 'something else' },
+        'PROMOS'
       )
     )
   );
-});
+});
+
+// storiesOf("Label").add("appearance-dark", () => (
+//   <Example title="Appearances Dark" background="dark">
+//     <Stack>
+//       <Label theme="dark">SHOW</Label>
+//       <Label theme="dark">MOVIE</Label>
+//       <Label theme="dark">CLIPS</Label>
+//       <Label theme="dark" >PROMOS</Label>
+//       <Label theme="dark">TVC</Label>
+//     </Stack>
+//   </Example>
+// ));

package/atoms/loader/CircleLoader.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _templateObject = _taggedTemplateLiteral(['\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  opacity: 1;\n  top: 1px;\n  left: 0px;\n  font-family: \'SFUIText-light\';\n\n\n  .loader,\n  .loader:after {\n    border-radius: 50%;\n    width: 10em;\n    height: 10em;\n  }\n  .loader {\n    margin: 0px auto;\n    font-size: 10px;\n    position: relative;\n    text-indent: -9999em;\n    border-top: 1.1em solid #eaeaea;\n    border-right: 1.1em solid #e3e3e3;\n    border-bottom: 1.1em solid #e0e0e0;\n    border-left: 1.1em solid #43ada7;\n    -webkit-transform: translateZ(0);\n    -ms-transform: translateZ(0);\n    transform: translateZ(0);\n    -webkit-animation: load8 1.1s infinite linear;\n    animation: load8 1.1s infinite linear;\n  }\n  @-webkit-keyframes load8 {\n    0% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes load8 {\n    0% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n      transform: rotate(360deg);\n    }\n  }\n'], ['\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  opacity: 1;\n  top: 1px;\n  left: 0px;\n  font-family: \'SFUIText-light\';\n\n\n  .loader,\n  .loader:after {\n    border-radius: 50%;\n    width: 10em;\n    height: 10em;\n  }\n  .loader {\n    margin: 0px auto;\n    font-size: 10px;\n    position: relative;\n    text-indent: -9999em;\n    border-top: 1.1em solid #eaeaea;\n    border-right: 1.1em solid #e3e3e3;\n    border-bottom: 1.1em solid #e0e0e0;\n    border-left: 1.1em solid #43ada7;\n    -webkit-transform: translateZ(0);\n    -ms-transform: translateZ(0);\n    transform: translateZ(0);\n    -webkit-animation: load8 1.1s infinite linear;\n    animation: load8 1.1s infinite linear;\n  }\n  @-webkit-keyframes load8 {\n    0% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes load8 {\n    0% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n      transform: rotate(360deg);\n    }\n  }\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  opacity: 1;\n  top: 1px;\n  left: 0px;\n  font-family: \'SFUIText-light\';\n\n\n  .loader,\n  .loader:after {\n    border-radius: 50%;\n    width: 10em;\n    height: 10em;\n  }\n  .loader {\n    margin: 0px auto;\n    font-size: 10px;\n    position: relative;\n    text-indent: -9999em;\n    border-top: 1.1em solid #eaeaea;\n    border-right: 1.1em solid #e3e3e3;\n    border-bottom: 1.1em solid #e0e0e0;\n    border-left: 1.1em solid ', ';\n    -webkit-transform: translateZ(0);\n    -ms-transform: translateZ(0);\n    transform: translateZ(0);\n    -webkit-animation: load8 1.1s infinite linear;\n    animation: load8 1.1s infinite linear;\n  }\n  @-webkit-keyframes load8 {\n    0% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes load8 {\n    0% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n      transform: rotate(360deg);\n    }\n  }\n'], ['\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  opacity: 1;\n  top: 1px;\n  left: 0px;\n  font-family: \'SFUIText-light\';\n\n\n  .loader,\n  .loader:after {\n    border-radius: 50%;\n    width: 10em;\n    height: 10em;\n  }\n  .loader {\n    margin: 0px auto;\n    font-size: 10px;\n    position: relative;\n    text-indent: -9999em;\n    border-top: 1.1em solid #eaeaea;\n    border-right: 1.1em solid #e3e3e3;\n    border-bottom: 1.1em solid #e0e0e0;\n    border-left: 1.1em solid ', ';\n    -webkit-transform: translateZ(0);\n    -ms-transform: translateZ(0);\n    transform: translateZ(0);\n    -webkit-animation: load8 1.1s infinite linear;\n    animation: load8 1.1s infinite linear;\n  }\n  @-webkit-keyframes load8 {\n    0% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes load8 {\n    0% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n      transform: rotate(360deg);\n    }\n  }\n']);
 
 var _react = require('react');
 
@@ -20,6 +20,8 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+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) } })); }
@@ -63,11 +65,18 @@ var CircleLoader = function (_React$Component) {
 }(_react2.default.Component);
 
 var propTypes = {};
-CircleLoader.propTypes = propTypes;
+CircleLoader.propTypes = {
+  /** The visual style used to convey the label's purpose */
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
+};
 
-var LoaderBox = _styledComponents2.default.div(_templateObject);
+var LoaderBox = _styledComponents2.default.div(_templateObject, function (props) {
+  return _tokens.colors[props.theme].label.circleLoader;
+});
 
 LoaderBox.defaultProps = {};
 
-CircleLoader.defaultProps = {};
+CircleLoader.defaultProps = {
+  theme: 'dark'
+};
 exports.default = CircleLoader;

package/atoms/loader/CircleLoader.jsx

@@ -2,13 +2,14 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
+import { colors } from '@desynova-digital/tokens'
 class CircleLoader extends React.Component {
   constructor(props) {
     super(props);
   }
 
   render() {
-    
+   
     return (
       <LoaderBox {...this.props}>
         <div>
@@ -21,7 +22,10 @@ class CircleLoader extends React.Component {
 
 const propTypes = {
 };
-CircleLoader.propTypes = propTypes;
+CircleLoader.propTypes =  {
+  /** The visual style used to convey the label's purpose */
+  theme: PropTypes.oneOf(['light', 'dark', 'nexc'])
+}
 
 const LoaderBox = styled.div`
   position: relative;
@@ -52,7 +56,7 @@ const LoaderBox = styled.div`
     border-top: 1.1em solid #eaeaea;
     border-right: 1.1em solid #e3e3e3;
     border-bottom: 1.1em solid #e0e0e0;
-    border-left: 1.1em solid #43ada7;
+    border-left: 1.1em solid ${(props) => colors[props.theme].label.circleLoader};
     -webkit-transform: translateZ(0);
     -ms-transform: translateZ(0);
     transform: translateZ(0);
@@ -83,5 +87,7 @@ const LoaderBox = styled.div`
 
 LoaderBox.defaultProps = {};
 
-CircleLoader.defaultProps = {};
+CircleLoader.defaultProps = {
+  theme: 'dark'
+};
 export default CircleLoader ;