@desynova-digital/components 8.19.63 → 9.0.1

package/atoms/timer/timer.js

@@ -1,12 +1,12 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-	value: true
+  value: true
 });
 
 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\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t.timer-holder {\n    text-align: center;\n    margin-right: 20px;\n\t\t\n\t\t.time {\n\t\t\tfont-size: 40px;\n\t\t\tfont-family: SFUIText-Medium;\n\t\t\tline-height: 30px;\n\t\t\tmargin-bottom: 5px;\n\t\t\tmin-width: 55px;\n\t\t}\n\n\t\t.time-tag {\n\t\t\tfont-size: 10px;\n\t\t\tfont-family: SFUIText-Medium;\n\t\t\tcolor: #000;\n\t\t\tline-height: 10px;\n\t\t}\n\t}\n'], ['\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t.timer-holder {\n    text-align: center;\n    margin-right: 20px;\n\t\t\n\t\t.time {\n\t\t\tfont-size: 40px;\n\t\t\tfont-family: SFUIText-Medium;\n\t\t\tline-height: 30px;\n\t\t\tmargin-bottom: 5px;\n\t\t\tmin-width: 55px;\n\t\t}\n\n\t\t.time-tag {\n\t\t\tfont-size: 10px;\n\t\t\tfont-family: SFUIText-Medium;\n\t\t\tcolor: #000;\n\t\t\tline-height: 10px;\n\t\t}\n\t}\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: space-between;\n\n  .timer-holder {\n    text-align: center;\n    margin-right: 20px;\n\n    .time {\n      font-size: 40px;\n      font-family: SFUIText-Medium;\n      line-height: 30px;\n      margin-bottom: 5px;\n      min-width: 55px;\n    }\n\n    .time-tag {\n      font-size: 10px;\n      font-family: SFUIText-Medium;\n      color: #000;\n      line-height: 10px;\n    }\n  }\n'], ['\n  display: flex;\n  justify-content: space-between;\n\n  .timer-holder {\n    text-align: center;\n    margin-right: 20px;\n\n    .time {\n      font-size: 40px;\n      font-family: SFUIText-Medium;\n      line-height: 30px;\n      margin-bottom: 5px;\n      min-width: 55px;\n    }\n\n    .time-tag {\n      font-size: 10px;\n      font-family: SFUIText-Medium;\n      color: #000;\n      line-height: 10px;\n    }\n  }\n']);
 
 var _react = require('react');
 
@@ -20,6 +20,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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -30,138 +32,137 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-// import { colors } from '@desynova-digital/tokens'
 // import {colors} from '../../../tokens';
 
 var TimerWrapper = _styledComponents2.default.span(_templateObject);
 
 var Timer = function (_Component) {
-	_inherits(Timer, _Component);
-
-	function Timer(props) {
-		_classCallCheck(this, Timer);
-
-		var _this = _possibleConstructorReturn(this, (Timer.__proto__ || Object.getPrototypeOf(Timer)).call(this, props));
-
-		_this.componentDidMount = function () {
-			var timeObj = _this.getTimeLeft();
-			_this.setState({
-				time: {
-					hours: timeObj.hours,
-					minutes: timeObj.minutes,
-					seconds: timeObj.seconds
-				}
-			}, function () {
-				_this.startCountdown();
-			});
-		};
-
-		_this.getTimeLeft = function () {
-			var endTime = _this.props.endTime;
-
-			var presentTime = new Date().getTime();
-			var timeLeft = endTime - presentTime;
-			var hours = Math.floor(timeLeft % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
-			var minutes = Math.floor(timeLeft % (1000 * 60 * 60) / (1000 * 60));
-			var seconds = Math.floor(timeLeft % (1000 * 60) / 1000);
-			return {
-				hours: hours,
-				minutes: minutes,
-				seconds: seconds
-			};
-		};
-
-		_this.startCountdown = function () {
-			if (!_this.countdownInterval) {
-				var self = _this;
-				_this.countdownInterval = setInterval(function () {
-					var timeObj = self.getTimeLeft();
-					self.setState({
-						time: {
-							hours: timeObj.hours,
-							minutes: timeObj.minutes,
-							seconds: timeObj.seconds
-						}
-					});
-				}, 1000);
-			}
-		};
-
-		_this.componentWillUnmount = function () {
-			clearInterval(_this.countdownInterval);
-			_this.countdownInterval = null;
-		};
-
-		_this.state = {
-			time: {
-				hours: 0,
-				minutes: 0,
-				seconds: 0
-			}
-		};
-		_this.countdownInterval = null;
-		return _this;
-	}
-
-	_createClass(Timer, [{
-		key: 'render',
-		value: function render() {
-			var time = this.state.time;
-
-			return _react2.default.createElement(
-				TimerWrapper,
-				null,
-				_react2.default.createElement(
-					'span',
-					{ className: 'timer-holder' },
-					_react2.default.createElement(
-						'p',
-						{ className: 'time' },
-						time.hours > 9 ? time.hours : '0' + time.hours
-					),
-					_react2.default.createElement(
-						'p',
-						{ className: 'time-tag' },
-						'Hr'
-					)
-				),
-				_react2.default.createElement(
-					'span',
-					{ className: 'timer-holder' },
-					_react2.default.createElement(
-						'p',
-						{ className: 'time' },
-						time.minutes > 9 ? time.minutes : '0' + time.minutes
-					),
-					_react2.default.createElement(
-						'p',
-						{ className: 'time-tag' },
-						'Min'
-					)
-				),
-				_react2.default.createElement(
-					'span',
-					{ className: 'timer-holder' },
-					_react2.default.createElement(
-						'p',
-						{ className: 'time' },
-						time.seconds > 9 ? time.seconds : '0' + time.seconds
-					),
-					_react2.default.createElement(
-						'p',
-						{ className: 'time-tag' },
-						'Sec'
-					)
-				)
-			);
-		}
-	}]);
-
-	return Timer;
+  _inherits(Timer, _Component);
+
+  function Timer(props) {
+    _classCallCheck(this, Timer);
+
+    var _this = _possibleConstructorReturn(this, (Timer.__proto__ || Object.getPrototypeOf(Timer)).call(this, props));
+
+    _this.componentDidMount = function () {
+      var timeObj = _this.getTimeLeft();
+      _this.setState({
+        time: {
+          hours: timeObj.hours,
+          minutes: timeObj.minutes,
+          seconds: timeObj.seconds
+        }
+      }, function () {
+        _this.startCountdown();
+      });
+    };
+
+    _this.getTimeLeft = function () {
+      var endTime = _this.props.endTime;
+
+      var presentTime = new Date().getTime();
+      var timeLeft = endTime - presentTime;
+      var hours = Math.floor(timeLeft % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
+      var minutes = Math.floor(timeLeft % (1000 * 60 * 60) / (1000 * 60));
+      var seconds = Math.floor(timeLeft % (1000 * 60) / 1000);
+      return {
+        hours: hours,
+        minutes: minutes,
+        seconds: seconds
+      };
+    };
+
+    _this.startCountdown = function () {
+      if (!_this.countdownInterval) {
+        var self = _this;
+        _this.countdownInterval = setInterval(function () {
+          var timeObj = self.getTimeLeft();
+          self.setState({
+            time: {
+              hours: timeObj.hours,
+              minutes: timeObj.minutes,
+              seconds: timeObj.seconds
+            }
+          });
+        }, 1000);
+      }
+    };
+
+    _this.componentWillUnmount = function () {
+      clearInterval(_this.countdownInterval);
+      _this.countdownInterval = null;
+    };
+
+    _this.state = {
+      time: {
+        hours: 0,
+        minutes: 0,
+        seconds: 0
+      }
+    };
+    _this.countdownInterval = null;
+    return _this;
+  }
+
+  _createClass(Timer, [{
+    key: 'render',
+    value: function render() {
+      var time = this.state.time;
+
+      return _react2.default.createElement(
+        TimerWrapper,
+        null,
+        _react2.default.createElement(
+          'span',
+          { className: 'timer-holder' },
+          _react2.default.createElement(
+            'p',
+            { className: 'time' },
+            time.hours > 9 ? time.hours : '0' + time.hours
+          ),
+          _react2.default.createElement(
+            'p',
+            { className: 'time-tag' },
+            'Hr'
+          )
+        ),
+        _react2.default.createElement(
+          'span',
+          { className: 'timer-holder' },
+          _react2.default.createElement(
+            'p',
+            { className: 'time' },
+            time.minutes > 9 ? time.minutes : '0' + time.minutes
+          ),
+          _react2.default.createElement(
+            'p',
+            { className: 'time-tag' },
+            'Min'
+          )
+        ),
+        _react2.default.createElement(
+          'span',
+          { className: 'timer-holder' },
+          _react2.default.createElement(
+            'p',
+            { className: 'time' },
+            time.seconds > 9 ? time.seconds : '0' + time.seconds
+          ),
+          _react2.default.createElement(
+            'p',
+            { className: 'time-tag' },
+            'Sec'
+          )
+        )
+      );
+    }
+  }]);
+
+  return Timer;
 }(_react.Component);
 
 Timer.propTypes = {
-	endTime: _propTypes2.default.number
+  endTime: _propTypes2.default.number
 };
 
 exports.default = Timer;

package/atoms/toast/toast.js

@@ -6,8 +6,8 @@ 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: fixed;\n  width: 100%;\n  right: 0px;\n  top: 0px;\n  z-index: 1000;\n  text-align: center;\n  height: 1px; \n'], ['\n  position: fixed;\n  width: 100%;\n  right: 0px;\n  top: 0px;\n  z-index: 1000;\n  text-align: center;\n  height: 1px; \n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n\n  &.toast-box {\n    background: #fff;\n    padding: 10px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n    text-align: left;\n    text-transform: capitalize;\n    font-family: SFUIText-Regular;\n    color: #333;\n    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    cursor: default;\n\n    width: 260px;\n    height: 80px;\n    border-radius: 2px;\n    background-image: linear-gradient(to right, #00c8e7, #00e6b9);\n\n    animation-name: ', ';\n    animation-duration: 7s;\n\n    position: absolute;\n\n    .icon-box {\n      margin-right: 10px;\n      border-radius: 50%;\n      background: rgba(255, 255, 255, 0.1411764705882353);\n      padding: 5px;\n    }\n    .head {\n      font-family: SFUIText-Medium;\n      font-size: 14px;\n      padding: 3px 0px;\n    }\n    .body {\n      font-family: SFUIText-Regular;\n      font-size: 12px;\n      padding: 3px 0px;\n    }\n\n    &.right {\n      top: 0px;\n      right: -260px;\n    }\n    &.left {\n      top: 0px;\n      left: -260px;\n    }\n    &.top {\n      top: -85px;\n    }\n\n    &.success {\n      background: #00cec6;\n      background-image: linear-gradient(to right, #00c8e7, #00e6b9);\n      color: #fff;\n    }\n    &.error {\n      background: #00cec6;\n      background-image: linear-gradient(to right, #de564a, #cc5b30);\n      color: #fff;\n    }\n  }\n\n  /* Standard syntax */\n  @keyframes toast-top {\n    0% {\n      top: -85px;\n    }\n    15% {\n      top: 20px;\n    }\n    85% {\n      top: 20px;\n    }\n    100% {\n      top: -85px;\n    }\n  }\n  @keyframes toast-right {\n    0% {\n      right: -260px;\n    }\n    15% {\n      right: 0px;\n    }\n    85% {\n      right: 0px;\n    }\n    100% {\n      right: -260px;\n    }\n  }\n  @keyframes toast-left {\n    0% {\n      left: -260px;\n    }\n    15% {\n      left: 0px;\n    }\n    85% {\n      left: 0px;\n    }\n    100% {\n      left: -260px;\n    }\n  }\n'], ['\n\n  &.toast-box {\n    background: #fff;\n    padding: 10px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n    text-align: left;\n    text-transform: capitalize;\n    font-family: SFUIText-Regular;\n    color: #333;\n    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    cursor: default;\n\n    width: 260px;\n    height: 80px;\n    border-radius: 2px;\n    background-image: linear-gradient(to right, #00c8e7, #00e6b9);\n\n    animation-name: ', ';\n    animation-duration: 7s;\n\n    position: absolute;\n\n    .icon-box {\n      margin-right: 10px;\n      border-radius: 50%;\n      background: rgba(255, 255, 255, 0.1411764705882353);\n      padding: 5px;\n    }\n    .head {\n      font-family: SFUIText-Medium;\n      font-size: 14px;\n      padding: 3px 0px;\n    }\n    .body {\n      font-family: SFUIText-Regular;\n      font-size: 12px;\n      padding: 3px 0px;\n    }\n\n    &.right {\n      top: 0px;\n      right: -260px;\n    }\n    &.left {\n      top: 0px;\n      left: -260px;\n    }\n    &.top {\n      top: -85px;\n    }\n\n    &.success {\n      background: #00cec6;\n      background-image: linear-gradient(to right, #00c8e7, #00e6b9);\n      color: #fff;\n    }\n    &.error {\n      background: #00cec6;\n      background-image: linear-gradient(to right, #de564a, #cc5b30);\n      color: #fff;\n    }\n  }\n\n  /* Standard syntax */\n  @keyframes toast-top {\n    0% {\n      top: -85px;\n    }\n    15% {\n      top: 20px;\n    }\n    85% {\n      top: 20px;\n    }\n    100% {\n      top: -85px;\n    }\n  }\n  @keyframes toast-right {\n    0% {\n      right: -260px;\n    }\n    15% {\n      right: 0px;\n    }\n    85% {\n      right: 0px;\n    }\n    100% {\n      right: -260px;\n    }\n  }\n  @keyframes toast-left {\n    0% {\n      left: -260px;\n    }\n    15% {\n      left: 0px;\n    }\n    85% {\n      left: 0px;\n    }\n    100% {\n      left: -260px;\n    }\n  }\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  position: fixed;\n  width: 100%;\n  right: 0px;\n  top: 0px;\n  z-index: 1000;\n  text-align: center;\n  height: 1px;\n'], ['\n  position: fixed;\n  width: 100%;\n  right: 0px;\n  top: 0px;\n  z-index: 1000;\n  text-align: center;\n  height: 1px;\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  &.toast-box {\n    background: #fff;\n    padding: 10px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n    text-align: left;\n    text-transform: capitalize;\n    font-family: SFUIText-Regular;\n    color: #333;\n    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    cursor: default;\n\n    width: 260px;\n    height: 80px;\n    border-radius: 2px;\n    background-image: linear-gradient(to right, #00c8e7, #00e6b9);\n\n    animation-name: ', ';\n    animation-duration: 7s;\n\n    position: absolute;\n\n    .icon-box {\n      margin-right: 10px;\n      border-radius: 50%;\n      background: rgba(255, 255, 255, 0.1411764705882353);\n      padding: 5px;\n    }\n    .head {\n      font-family: SFUIText-Medium;\n      font-size: 14px;\n      padding: 3px 0px;\n    }\n    .body {\n      font-family: SFUIText-Regular;\n      font-size: 12px;\n      padding: 3px 0px;\n    }\n\n    &.right {\n      top: 0px;\n      right: -260px;\n    }\n    &.left {\n      top: 0px;\n      left: -260px;\n    }\n    &.top {\n      top: -85px;\n    }\n\n    &.success {\n      background: ', ';\n      background-image: linear-gradient(to right, #00c8e7, #00e6b9);\n      color: #fff;\n    }\n    &.error {\n      background: ', ';\n      background-image: linear-gradient(to right, #de564a, #cc5b30);\n      color: #fff;\n    }\n  }\n\n  /* Standard syntax */\n  @keyframes toast-top {\n    0% {\n      top: -85px;\n    }\n    15% {\n      top: 20px;\n    }\n    85% {\n      top: 20px;\n    }\n    100% {\n      top: -85px;\n    }\n  }\n  @keyframes toast-right {\n    0% {\n      right: -260px;\n    }\n    15% {\n      right: 0px;\n    }\n    85% {\n      right: 0px;\n    }\n    100% {\n      right: -260px;\n    }\n  }\n  @keyframes toast-left {\n    0% {\n      left: -260px;\n    }\n    15% {\n      left: 0px;\n    }\n    85% {\n      left: 0px;\n    }\n    100% {\n      left: -260px;\n    }\n  }\n'], ['\n  &.toast-box {\n    background: #fff;\n    padding: 10px;\n    margin-bottom: 10px;\n    border-radius: 5px;\n    text-align: left;\n    text-transform: capitalize;\n    font-family: SFUIText-Regular;\n    color: #333;\n    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    cursor: default;\n\n    width: 260px;\n    height: 80px;\n    border-radius: 2px;\n    background-image: linear-gradient(to right, #00c8e7, #00e6b9);\n\n    animation-name: ', ';\n    animation-duration: 7s;\n\n    position: absolute;\n\n    .icon-box {\n      margin-right: 10px;\n      border-radius: 50%;\n      background: rgba(255, 255, 255, 0.1411764705882353);\n      padding: 5px;\n    }\n    .head {\n      font-family: SFUIText-Medium;\n      font-size: 14px;\n      padding: 3px 0px;\n    }\n    .body {\n      font-family: SFUIText-Regular;\n      font-size: 12px;\n      padding: 3px 0px;\n    }\n\n    &.right {\n      top: 0px;\n      right: -260px;\n    }\n    &.left {\n      top: 0px;\n      left: -260px;\n    }\n    &.top {\n      top: -85px;\n    }\n\n    &.success {\n      background: ', ';\n      background-image: linear-gradient(to right, #00c8e7, #00e6b9);\n      color: #fff;\n    }\n    &.error {\n      background: ', ';\n      background-image: linear-gradient(to right, #de564a, #cc5b30);\n      color: #fff;\n    }\n  }\n\n  /* Standard syntax */\n  @keyframes toast-top {\n    0% {\n      top: -85px;\n    }\n    15% {\n      top: 20px;\n    }\n    85% {\n      top: 20px;\n    }\n    100% {\n      top: -85px;\n    }\n  }\n  @keyframes toast-right {\n    0% {\n      right: -260px;\n    }\n    15% {\n      right: 0px;\n    }\n    85% {\n      right: 0px;\n    }\n    100% {\n      right: -260px;\n    }\n  }\n  @keyframes toast-left {\n    0% {\n      left: -260px;\n    }\n    15% {\n      left: 0px;\n    }\n    85% {\n      left: 0px;\n    }\n    100% {\n      left: -260px;\n    }\n  }\n']);
 
 var _react = require('react');
 
@@ -25,6 +25,8 @@ var _icon = require('../icon');
 
 var _icon2 = _interopRequireDefault(_icon);
 
+var _tokens = require('../../../tokens');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -47,6 +49,10 @@ var ToastGroupEle = _styledComponents2.default.div(_templateObject);
 
 var ToastEle = _styledComponents2.default.div(_templateObject2, function (props) {
   return 'toast-' + props.toastDirection;
+}, function (props) {
+  return _tokens.colors[props.theme].toast.themeColor;
+}, function (props) {
+  return _tokens.colors[props.theme].toast.themeColor;
 });
 
 var Toast = function (_Component) {
@@ -71,7 +77,8 @@ var Toast = function (_Component) {
           type = _props.type,
           text = _props.text,
           direction = _props.direction,
-          icon = _props.icon;
+          icon = _props.icon,
+          theme = _props.theme;
 
       var self = this;
       if (showToast && (text.head || text.body)) {
@@ -148,24 +155,21 @@ var Toast = function (_Component) {
           toastIcon = _state.toastIcon,
           toastDirection = _state.toastDirection;
 
-
+      console.log(this.props.theme, 'HELLO');
       return show ? _react2.default.createElement(
         ToastEle,
         {
+          theme: this.props.theme,
           onClick: function onClick() {
-            document.querySelector('.toast-box').style.display = "none";
+            document.querySelector('.toast-box').style.display = 'none';
           },
-          className: 'toast-box ' + type + ' ' + toastDirection, toastDirection: toastDirection
+          className: 'toast-box ' + type + ' ' + toastDirection,
+          toastDirection: toastDirection
         },
         _react2.default.createElement(
           'div',
           { className: 'icon-box' },
-          toastIcon ? _react2.default.createElement(_icon2.default, { name: toastIcon, width: 18, height: 18, color: '#fff' }) : this.iconFor(type) ? _react2.default.createElement(_icon2.default, {
-            name: this.iconFor(type),
-            width: 18,
-            height: 18,
-            color: '#fff'
-          }) : null
+          toastIcon ? _react2.default.createElement(_icon2.default, { name: toastIcon, width: 18, height: 18, color: '#fff' }) : this.iconFor(type) ? _react2.default.createElement(_icon2.default, { name: this.iconFor(type), width: 18, height: 18, color: '#fff' }) : null
         ),
         _react2.default.createElement(
           'div',
@@ -188,7 +192,13 @@ var Toast = function (_Component) {
   return Toast;
 }(_react.Component);
 
-exports.default = Toast;
+//Toast.propTypes = propTypes;
 
+exports.default = Toast;
+Toast.propTypes = {
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
+};
 
-Toast.propTypes = propTypes;
+Toast.defaultProps = {
+  theme: 'light'
+};

package/atoms/toast/toast.story.js

@@ -54,4 +54,26 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       })
     )
   );
+});
+
+(0, _react3.storiesOf)('Toast').add('left-success nexc', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'appearance-dark', background: 'dark' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_toast2.default, {
+        theme: 'nexc',
+        showToast: true,
+        type: 'success',
+        text: {
+          head: 'Access Request Sent',
+          body: 'Please check your email for details'
+        },
+        direction: 'left',
+        icon: 'dashboard'
+      })
+    )
+  );
 });