@desynova-digital/components 8.19.63 → 9.0.1

package/atoms/loader/ThreeDotLoader.js

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

package/atoms/loader/ThreeDotLoader.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-
+import { colors } from "@desynova-digital/tokens";
 const LoaderBox = styled.div`
   display: inline-block;
 
@@ -9,7 +9,7 @@ const LoaderBox = styled.div`
     width: 20px;
     height: 20px;
     border-radius: 100%;
-    background-color: #33d7ce;
+    background-color: ${(props) => colors[props.theme].label.boxBackground};
     margin: 0px 5px;
     opacity: 0;
   }
@@ -38,9 +38,9 @@ const LoaderBox = styled.div`
   }
 `;
 
-const ThreeDotLoader = () => {
+const ThreeDotLoader = (props) => {
   return (
-    <LoaderBox className="loader three-dot-loader">
+    <LoaderBox theme={props.theme} className="loader three-dot-loader">
       <span />
       <span />
       <span />

package/atoms/loader/loader.js

@@ -1,11 +1,11 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 exports.StyledLoader = undefined;
 
-var _templateObject = _taggedTemplateLiteral(['\n    display: ', ';\n    vertical-align: middle;\n    font-size: 11px;\n    line-height: 1;\n    font-family: \'SFUIText-Regular\';\n    color: ', ';\n    padding: 0px;\n    background: transparent;\n'], ['\n    display: ', ';\n    vertical-align: middle;\n    font-size: 11px;\n    line-height: 1;\n    font-family: \'SFUIText-Regular\';\n    color: ', ';\n    padding: 0px;\n    background: transparent;\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  display: ', ';\n  vertical-align: middle;\n  font-size: 11px;\n  line-height: 1;\n  font-family: \'SFUIText-Regular\';\n  color: ', ';\n  padding: 0px;\n  background: transparent;\n'], ['\n  display: ', ';\n  vertical-align: middle;\n  font-size: 11px;\n  line-height: 1;\n  font-family: \'SFUIText-Regular\';\n  color: ', ';\n  padding: 0px;\n  background: transparent;\n']);
 
 var _react = require('react');
 
@@ -38,47 +38,46 @@ 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 StyledLoader = _styledComponents2.default.div(_templateObject, function (props) {
-    return props.loaderName == 'SpinningLoader' ? '' : 'inline-block';
+  return props.loaderName == 'SpinningLoader' ? '' : 'inline-block';
 }, function (props) {
-
-    return _tokens.colors[props.theme].label.text;
+  return _tokens.colors[props.theme].label.text;
 });
 var getLoaderComponent = function getLoaderComponent(props) {
-    var loaderName = props.loaderName,
-        size = props.size,
-        background = props.background;
-
-    if (loaderName && loaderName !== '') {
-        if (loaderName === 'circle') {
-            return _react2.default.createElement(_CircleLoader2.default, null);
-        } else if (loaderName == 'SpinningLoader') {
-            return _react2.default.createElement(_spinningLoader2.default, { size: size, background: background });
-        } else {
-            return _react2.default.createElement(_ThreeDotLoader2.default, null);
-        }
+  var loaderName = props.loaderName,
+      size = props.size,
+      background = props.background;
+
+  if (loaderName && loaderName !== '') {
+    if (loaderName === 'circle') {
+      return _react2.default.createElement(_CircleLoader2.default, { theme: props.theme });
+    } else if (loaderName == 'SpinningLoader') {
+      return _react2.default.createElement(_spinningLoader2.default, { theme: props.theme, size: size, background: background });
     } else {
-        return _react2.default.createElement(_ThreeDotLoader2.default, null);
+      return _react2.default.createElement(_ThreeDotLoader2.default, { theme: props.theme });
     }
+  } else {
+    return _react2.default.createElement(_ThreeDotLoader2.default, { theme: props.theme });
+  }
 };
 var Loader = function Loader(props) {
-    return _react2.default.createElement(
-        StyledLoader,
-        props,
-        _react2.default.createElement(
-            'div',
-            { className: 'loader-holder' },
-            getLoaderComponent(props)
-        )
-    );
+  return _react2.default.createElement(
+    StyledLoader,
+    props,
+    _react2.default.createElement(
+      'div',
+      { className: 'loader-holder' },
+      getLoaderComponent(props)
+    )
+  );
 };
 
 Loader.propTypes = {
-    /** The visual style used to convey the label's purpose */
-    theme: _propTypes2.default.oneOf(['light', 'dark'])
+  /** The visual style used to convey the label's purpose */
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
 };
 
 Loader.defaultProps = {
-    theme: 'dark'
+  theme: 'dark'
 };
 
 exports.default = Loader;

package/atoms/loader/loader.story.js

@@ -12,29 +12,44 @@ var _components = require('../../components');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-(0, _react3.storiesOf)('Loader').add('appearance-light', function () {
-    return _react2.default.createElement(
-        _storyHelpers.Example,
-        { title: 'Appearances Light', background: 'white' },
-        _react2.default.createElement(
-            _storyHelpers.Stack,
-            null,
-            _react2.default.createElement(_components.Loader, null),
-            _react2.default.createElement(_components.Loader, { loaderName: 'circle' }),
-            _react2.default.createElement(_components.Loader, { theme: 'dark', loaderName: 'SpinningLoader', size: 'small', background: '#3acec6' })
-        )
-    );
+(0, _react3.storiesOf)('Loader').add('light theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Appearances Light', background: 'white' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.Loader, null),
+      _react2.default.createElement(_components.Loader, { loaderName: 'circle' }),
+      _react2.default.createElement(_components.Loader, { theme: 'dark', loaderName: 'SpinningLoader', size: 'small', background: '#3acec6' })
+    )
+  );
 });
 
-(0, _react3.storiesOf)('Label').add('appearance-dark', function () {
-    return _react2.default.createElement(
-        _storyHelpers.Example,
-        { title: 'Appearances Dark', background: 'dark' },
-        _react2.default.createElement(
-            _storyHelpers.Stack,
-            null,
-            _react2.default.createElement(_components.Loader, { theme: 'dark' }),
-            _react2.default.createElement(_components.Loader, { theme: 'dark', loaderName: 'circle' })
-        )
-    );
+(0, _react3.storiesOf)('Loader').add('dark theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Appearances Dark', background: 'dark' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.Loader, { theme: 'dark' }),
+      _react2.default.createElement(_components.Loader, { theme: 'dark', loaderName: 'circle' }),
+      _react2.default.createElement(_components.Loader, { theme: 'dark', loaderName: 'SpinningLoader', size: 'small', background: '#3acec6' })
+    )
+  );
+});
+
+(0, _react3.storiesOf)('Loader').add('nexc theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Appearances Dark', background: 'dark' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.Loader, { theme: 'nexc' }),
+      _react2.default.createElement(_components.Loader, { theme: 'nexc', loaderName: 'circle' }),
+      _react2.default.createElement(_components.Loader, { theme: 'nexc', loaderName: 'SpinningLoader', size: 'small' })
+    )
+  );
 });

package/atoms/loader/spinningLoader.js

@@ -14,6 +14,8 @@ var _styledComponents = require("styled-components");
 
 var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
+var _tokens = require("@desynova-digital/tokens");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -25,21 +27,22 @@ var LoaderBox = _styledComponents2.default.div(_templateObject, function (props)
 }, function (props) {
   return props.size === "small" ? "28.5714px" : "38.5714px";
 }, function (props) {
-  return props.background ? "" + props.background : "#3acec6";
+  return props.background ? "" + props.background : "" + _tokens.colors[props.theme].label.spinLoader;
 }, function (props) {
   return props.size === "small" ? "20px" : "30px";
 }, function (props) {
   return props.size === "small" ? "20px" : "30px";
 }, function (props) {
-  return props.background ? "4.28571px solid " + props.background : "4.28571px solid #3acec6";
+  return props.background ? "4.28571px solid " + props.background : "4.28571px solid " + _tokens.colors[props.theme].label.spinLoader;
 });
 var SpinningLoader = function SpinningLoader(_ref) {
   var size = _ref.size,
-      background = _ref.background;
+      background = _ref.background,
+      theme = _ref.theme;
 
   return _react2.default.createElement(
     LoaderBox,
-    { size: size, background: background },
+    { theme: theme, size: size, background: background },
     _react2.default.createElement(
       "div",
       { className: "parentBox" },

package/atoms/loader/spinningLoader.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-
+import { colors } from "@desynova-digital/tokens";
 const LoaderBox = styled.div`
   position: relative;
   display: flex;
@@ -19,7 +19,7 @@ const LoaderBox = styled.div`
     height: 4.28571px;
     border-radius: 100%;
     background-color: ${(props) =>
-      props.background ? `${props.background}` : "#3acec6"};
+      props.background ? `${props.background}` : `${colors[props.theme].label.spinLoader}`};
     opacity: 0.8;
     position: absolute;
     top: 12.8571px;
@@ -34,7 +34,7 @@ const LoaderBox = styled.div`
     border: ${(props) =>
       props.background
         ? `4.28571px solid ${props.background}`
-        : "4.28571px solid #3acec6"};
+        : `4.28571px solid ${colors[props.theme].label.spinLoader}`};
     opacity: 0.2;
     box-sizing: content-box;
     position: absolute;
@@ -55,9 +55,9 @@ const LoaderBox = styled.div`
     }
   }
 `;
-const SpinningLoader = ({ size, background }) => {
+const SpinningLoader = ({ size, background,theme }) => {
   return (
-    <LoaderBox size={size} background={background}>
+    <LoaderBox theme={theme} size={size} background={background}>
       <div className="parentBox">
         <div className="ball" />
         <div className="circle" />

package/atoms/popup/popup.js

@@ -10,7 +10,7 @@ var _templateObject = _taggedTemplateLiteral(['\n  margin: 0;\n'], ['\n  margin:
     _templateObject2 = _taggedTemplateLiteral(['\n  margin: 0;\n  background: ', ';\n  border-color: ', ';\n  color: ', ';\n  transition: all 0.4s ease-in-out;\n  &:hover {\n    background: ', ';\n    border-color: ', ';\n    box-shadow: none;\n    color: ', ';\n  }\n'], ['\n  margin: 0;\n  background: ', ';\n  border-color: ', ';\n  color: ', ';\n  transition: all 0.4s ease-in-out;\n  &:hover {\n    background: ', ';\n    border-color: ', ';\n    box-shadow: none;\n    color: ', ';\n  }\n']),
     _templateObject3 = _taggedTemplateLiteral(['\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 1000;\n'], ['\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 1000;\n']),
     _templateObject4 = _taggedTemplateLiteral(['\n  background: ', ';\n  width: 100%;\n  height: 100%;\n'], ['\n  background: ', ';\n  width: 100%;\n  height: 100%;\n']),
-    _templateObject5 = _taggedTemplateLiteral(['\n  position: absolute;\n  z-index: 3;\n  max-width: 650px;\n  min-width: 440px;\n  left: 50%;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n\n  width: 440px;\n  border-radius: 10px;\n  background: ', ';\n\n  .popup-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    box-sizing: border-box;\n    padding: 40px;\n\n    .header-title {\n      font-family: SFUIText-Light;\n      font-size: 18px;\n      line-height: 1;\n      color: ', ';\n    }\n    .display-flex {\n      display: flex;\n      .pr-20{\n        padding-right: 20px;\n      }\n    }\n    .cursor-p{\n      cursor: pointer;\n    }\n  \n  \n    .count-wrapper {\n      font-size: 14px;\n      line-height: 24px;\n      color: #AFB2BA;\n      font-family: \'SFUIText-Light\';\n    }\n    ', ' {\n      margin: 0;\n      background: transparent;\n      border-color: transparent;\n      padding: 0;\n      path {\n        fill: ', ';\n      }\n      &:hover {\n        background: transparent;\n        border-color: transparent;\n      }\n    }\n  }\n  .popup-body {\n    padding: 0 40px 40px 40px;\n    .popup-action-block {\n      margin: 0 auto;\n      display: flex;\n      justify-content: center;\n      \n      button {\n        padding: 10px 0;\n        margin: 0 10px;\n        min-width: 150px;\n      }\n    }\n    .popup-message {\n      font-family: SFUIText-Light;\n      font-size: 14px;\n      line-height: 1.5;\n      text-align: center;\n      color: ', ';\n      margin-bottom: 40px;\n    }\n  }\n\n  .loading-box{\n    position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: wait;\n    background-color: rgb(21 21 21 / 60%);\n    border-radius: 10px;\n  }\n'], ['\n  position: absolute;\n  z-index: 3;\n  max-width: 650px;\n  min-width: 440px;\n  left: 50%;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n\n  width: 440px;\n  border-radius: 10px;\n  background: ', ';\n\n  .popup-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    box-sizing: border-box;\n    padding: 40px;\n\n    .header-title {\n      font-family: SFUIText-Light;\n      font-size: 18px;\n      line-height: 1;\n      color: ', ';\n    }\n    .display-flex {\n      display: flex;\n      .pr-20{\n        padding-right: 20px;\n      }\n    }\n    .cursor-p{\n      cursor: pointer;\n    }\n  \n  \n    .count-wrapper {\n      font-size: 14px;\n      line-height: 24px;\n      color: #AFB2BA;\n      font-family: \'SFUIText-Light\';\n    }\n    ', ' {\n      margin: 0;\n      background: transparent;\n      border-color: transparent;\n      padding: 0;\n      path {\n        fill: ', ';\n      }\n      &:hover {\n        background: transparent;\n        border-color: transparent;\n      }\n    }\n  }\n  .popup-body {\n    padding: 0 40px 40px 40px;\n    .popup-action-block {\n      margin: 0 auto;\n      display: flex;\n      justify-content: center;\n      \n      button {\n        padding: 10px 0;\n        margin: 0 10px;\n        min-width: 150px;\n      }\n    }\n    .popup-message {\n      font-family: SFUIText-Light;\n      font-size: 14px;\n      line-height: 1.5;\n      text-align: center;\n      color: ', ';\n      margin-bottom: 40px;\n    }\n  }\n\n  .loading-box{\n    position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: wait;\n    background-color: rgb(21 21 21 / 60%);\n    border-radius: 10px;\n  }\n']);
+    _templateObject5 = _taggedTemplateLiteral(['\n  position: absolute;\n  z-index: 3;\n  max-width: 650px;\n  min-width: 440px;\n  left: 50%;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n\n  width: 440px;\n  border-radius: 10px;\n  background: ', ';\n\n  .popup-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    box-sizing: border-box;\n    padding: 40px;\n\n    .header-title {\n      font-family: SFUIText-Light;\n      font-size: 18px;\n      line-height: 1;\n      color: ', ';\n    }\n    .display-flex {\n      display: flex;\n      .pr-20 {\n        padding-right: 20px;\n      }\n    }\n    .cursor-p {\n      cursor: pointer;\n    }\n\n    .count-wrapper {\n      font-size: 14px;\n      line-height: 24px;\n      color: #afb2ba;\n      font-family: \'SFUIText-Light\';\n    }\n    ', ' {\n      margin: 0;\n      background: transparent;\n      border-color: transparent;\n      padding: 0;\n      path {\n        fill: ', ';\n      }\n      &:hover {\n        background: transparent;\n        border-color: transparent;\n      }\n    }\n  }\n  .popup-body {\n    padding: 0 40px 40px 40px;\n    .popup-action-block {\n      margin: 0 auto;\n      display: flex;\n      justify-content: center;\n\n      button {\n        padding: 10px 0;\n        margin: 0 10px;\n        min-width: 150px;\n      }\n    }\n    .popup-message {\n      font-family: SFUIText-Light;\n      font-size: 14px;\n      line-height: 1.5;\n      text-align: center;\n      color: ', ';\n      margin-bottom: 40px;\n    }\n  }\n\n  .loading-box {\n    position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: wait;\n    background-color: rgb(21 21 21 / 60%);\n    border-radius: 10px;\n  }\n'], ['\n  position: absolute;\n  z-index: 3;\n  max-width: 650px;\n  min-width: 440px;\n  left: 50%;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n\n  width: 440px;\n  border-radius: 10px;\n  background: ', ';\n\n  .popup-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    box-sizing: border-box;\n    padding: 40px;\n\n    .header-title {\n      font-family: SFUIText-Light;\n      font-size: 18px;\n      line-height: 1;\n      color: ', ';\n    }\n    .display-flex {\n      display: flex;\n      .pr-20 {\n        padding-right: 20px;\n      }\n    }\n    .cursor-p {\n      cursor: pointer;\n    }\n\n    .count-wrapper {\n      font-size: 14px;\n      line-height: 24px;\n      color: #afb2ba;\n      font-family: \'SFUIText-Light\';\n    }\n    ', ' {\n      margin: 0;\n      background: transparent;\n      border-color: transparent;\n      padding: 0;\n      path {\n        fill: ', ';\n      }\n      &:hover {\n        background: transparent;\n        border-color: transparent;\n      }\n    }\n  }\n  .popup-body {\n    padding: 0 40px 40px 40px;\n    .popup-action-block {\n      margin: 0 auto;\n      display: flex;\n      justify-content: center;\n\n      button {\n        padding: 10px 0;\n        margin: 0 10px;\n        min-width: 150px;\n      }\n    }\n    .popup-message {\n      font-family: SFUIText-Light;\n      font-size: 14px;\n      line-height: 1.5;\n      text-align: center;\n      color: ', ';\n      margin-bottom: 40px;\n    }\n  }\n\n  .loading-box {\n    position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: wait;\n    background-color: rgb(21 21 21 / 60%);\n    border-radius: 10px;\n  }\n']);
 
 var _react = require('react');
 
@@ -114,6 +114,7 @@ var Popup = function (_Component) {
       var _this2 = this;
 
       var _props = this.props,
+          theme = _props.theme,
           title = _props.title,
           showPopup = _props.showPopup,
           messageBody = _props.messageBody,
@@ -126,21 +127,17 @@ var Popup = function (_Component) {
           sharedUserCount = _props.sharedUserCount,
           openPopup = _props.openPopup;
 
+
       return _react2.default.createElement(
         _react2.default.Fragment,
         null,
         showPopup ? _react2.default.createElement(
           PopupBlock,
-          {
-            theme: this.props.theme },
-          _react2.default.createElement(PopupOverlay, {
-            theme: this.props.theme
-          }),
+          { theme: this.props.theme },
+          _react2.default.createElement(PopupOverlay, { theme: this.props.theme }),
           _react2.default.createElement(
             PopupBox,
-            {
-              theme: this.props.theme
-            },
+            { theme: this.props.theme },
             _react2.default.createElement(
               'div',
               { className: 'popup-header' },
@@ -165,7 +162,8 @@ var Popup = function (_Component) {
                     iconWidth: 18,
                     iconHeight: 18,
                     icon: 'users',
-                    iconBackground: false
+                    iconBackground: false,
+                    theme: this.props.theme
                   }),
                   _react2.default.createElement(
                     'p',
@@ -174,6 +172,7 @@ var Popup = function (_Component) {
                   )
                 ) : null,
                 _react2.default.createElement(_button2.default, {
+                  theme: this.props.theme,
                   appearance: 'cta',
                   iconWidth: 12,
                   iconHeight: 12,
@@ -215,6 +214,7 @@ var Popup = function (_Component) {
                 acceptButtonText ? _react2.default.createElement(
                   AcceptButton,
                   {
+                    theme: this.props.theme,
                     display: 'rounded',
                     onClick: function onClick() {
                       _this2.acceptClick();
@@ -241,7 +241,7 @@ var Popup = function (_Component) {
 // Popup.propTypes = propTypes;
 
 Popup.propTypes = {
-  theme: _propTypes2.default.oneOf(['light', 'dark'])
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
 };
 
 Popup.defaultProps = {

package/atoms/popup/popup.story.js

@@ -14,7 +14,7 @@ var _popup2 = _interopRequireDefault(_popup);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-(0, _react3.storiesOf)('Popup').add('dark-theme', function () {
+(0, _react3.storiesOf)('Popup').add('dark theme', function () {
   return _react2.default.createElement(
     _storyHelpers.Example,
     { title: 'Appearances Dark', background: 'dark' },
@@ -44,7 +44,37 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   );
 });
 
-(0, _react3.storiesOf)('Popup').add('light-theme', function () {
+(0, _react3.storiesOf)('Popup').add('nexc theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Appearances Dark', background: 'dark' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_popup2.default, {
+        showPopup: true,
+        title: 'hi i am popup Title!!!',
+        messageBody: 'Did you like this popup?',
+        acceptButtonText: 'Yes',
+        cancelButtonText: 'No',
+        onAcceptClick: function onAcceptClick() {
+          console.log('onAcceptClick func() called...');
+        },
+        onCancelClick: function onCancelClick() {
+          console.log('onCancelClick func() called...');
+        },
+        theme: 'nexc',
+        showSharedUsers: true,
+        sharedUserCount: 5,
+        openPopup: function openPopup(view) {
+          return console.log(view);
+        }
+      })
+    )
+  );
+});
+
+(0, _react3.storiesOf)('Popup').add('light theme', function () {
   return _react2.default.createElement(
     _storyHelpers.Example,
     { title: 'Appearances light', background: 'light' },
@@ -82,11 +112,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         // messageBody= {'Did you like this popup?'}
         , popupContent: _react2.default.createElement(
           'div',
-          { style: {
+          {
+            style: {
               height: '300px',
               background: 'red',
               width: '100%'
-            } },
+            }
+          },
           'HI'
         )
         // acceptButtonText= {'Yes'}

package/atoms/radio/radio.story.js

@@ -13,7 +13,7 @@ var _components = require('../../components');
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 //console.log(RadioGroup);
-(0, _react3.storiesOf)('Radio').add('default', function () {
+(0, _react3.storiesOf)('Radio').add('light theme', function () {
   return _react2.default.createElement(
     _storyHelpers.Example,
     null,
@@ -148,7 +148,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     )
   );
 });
-(0, _react3.storiesOf)('Radio').add('dark', function () {
+(0, _react3.storiesOf)('Radio').add('dark theme', function () {
   return _react2.default.createElement(
     _storyHelpers.Example,
     { background: 'dark' },
@@ -284,4 +284,142 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       )
     )
   );
+});
+
+(0, _react3.storiesOf)('Radio').add('nexc theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { background: 'dark' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        _components.Radio.Group,
+        {
+          theme: 'nexc',
+          radioname: 'example11',
+          onChange: function onChange(e) {
+            console.log(e.target.value);
+          }
+        },
+        _react2.default.createElement(
+          _components.Radio,
+          { value: 'one' },
+          'Option 1'
+        ),
+        _react2.default.createElement(
+          _components.Radio,
+          { value: 'two' },
+          'Option 2'
+        ),
+        _react2.default.createElement(
+          _components.Radio,
+          { value: 'three' },
+          'Option 3'
+        ),
+        _react2.default.createElement(
+          _components.Radio,
+          { value: 'four' },
+          'Option 4'
+        )
+      ),
+      _react2.default.createElement(
+        _components.Radio.Group,
+        {
+          theme: 'nexc',
+          radioname: 'example12',
+          readOnly: true,
+          onChange: function onChange(e) {
+            console.log(e.target.value);
+          }
+        },
+        _react2.default.createElement(
+          _components.Radio,
+          { value: 'one' },
+          'Option 1'
+        ),
+        _react2.default.createElement(
+          _components.Radio,
+          { value: 'two' },
+          'Option 2'
+        ),
+        _react2.default.createElement(
+          _components.Radio,
+          { value: 'three' },
+          'Option 3'
+        ),
+        _react2.default.createElement(
+          _components.Radio,
+          { value: 'four' },
+          'Option 4'
+        )
+      )
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        _components.Radio.Group,
+        {
+          theme: 'dark',
+          radioname: 'example21',
+          onChange: function onChange(e) {
+            console.log(e.target.value);
+          }
+        },
+        _react2.default.createElement(
+          _components.Radio,
+          { value: 'one' },
+          'Option 1'
+        ),
+        _react2.default.createElement(
+          _components.Radio,
+          { value: 'two', readOnly: true },
+          'Option 2'
+        ),
+        _react2.default.createElement(
+          _components.Radio,
+          { value: 'three' },
+          'Option 3'
+        ),
+        _react2.default.createElement(
+          _components.Radio,
+          { value: 'four' },
+          'Option 4'
+        )
+      ),
+      _react2.default.createElement(
+        _components.Radio.Group,
+        {
+          theme: 'nexc',
+          radioname: 'example22',
+          readOnly: true,
+          align: 'horizontal',
+          onChange: function onChange(e) {
+            console.log(e.target.value);
+          }
+        },
+        _react2.default.createElement(
+          _components.Radio,
+          { value: 'one' },
+          'Option 1'
+        ),
+        _react2.default.createElement(
+          _components.Radio,
+          { value: 'two', checked: true },
+          'Option 2'
+        ),
+        _react2.default.createElement(
+          _components.Radio,
+          { value: 'three' },
+          'Option 3'
+        ),
+        _react2.default.createElement(
+          _components.Radio,
+          { value: 'four' },
+          'Option 4'
+        )
+      )
+    )
+  );
 });