@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/button/index.js

@@ -1,13 +1,9 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _button = require('./button');
-
-var _button2 = _interopRequireDefault(_button);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _button2.default;
+exports["default"] = void 0;
+var _button = _interopRequireDefault(require("./button"));
+var _default = exports["default"] = _button["default"];

package/atoms/card/card.js

@@ -1,32 +1,17 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledCard = undefined;
-
-var _templateObject = _taggedTemplateLiteral(['\n  font-family: \'SFUIText-Medium\';\n  width: 100%;\n  background: ', ';\n  border-radius: ', ';\n\n  height: ', ';\n  color: ', ';\n'], ['\n  font-family: \'SFUIText-Medium\';\n  width: 100%;\n  background: ', ';\n  border-radius: ', ';\n\n  height: ', ';\n  color: ', ';\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  display: inline-block;\n  vertical-align: top;\n  padding-top: ', ';\n  padding-bottom: ', ';\n  padding-left: ', ';\n  padding-right: ', ';\n\n  width: ', ';\n\n  ', '\n'], ['\n  display: inline-block;\n  vertical-align: top;\n  padding-top: ', ';\n  padding-bottom: ', ';\n  padding-left: ', ';\n  padding-right: ', ';\n\n  width: ', ';\n\n  ', '\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-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 StyledCard = _styledComponents2.default.div(_templateObject, function (props) {
+exports["default"] = exports.StyledCard = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _tokens = require("@desynova-digital/tokens");
+var _templateObject, _templateObject2;
+var StyledCard = exports.StyledCard = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: 'SFUIText-Medium';\n  width: 100%;\n  background: ", ";\n  border-radius: ", ";\n\n  height: ", ";\n  color: ", ";\n"])), function (props) {
   return _tokens.colors[props.theme].card.background;
 }, function (props) {
   return props.radius + 'px';
@@ -37,8 +22,7 @@ var StyledCard = _styledComponents2.default.div(_templateObject, function (props
     return _tokens.colors.light.card.background;
   }
 });
-
-var StyledCardBox = _styledComponents2.default.div(_templateObject2, function (props) {
+var StyledCardBox = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-block;\n  vertical-align: top;\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n\n  width: ", ";\n\n  ", "\n"])), function (props) {
   return props.paddingTop ? props.paddingTop + 'px' : props.paddingTopBottom ? props.paddingTopBottom + 'px' : '';
 }, function (props) {
   return props.paddingBottom ? props.paddingBottom + 'px' : props.paddingTopBottom ? props.paddingTopBottom + 'px' : '';
@@ -51,42 +35,29 @@ var StyledCardBox = _styledComponents2.default.div(_templateObject2, function (p
 }, function (props) {
   return props.padding ? 'padding:' + props.padding + 'px' : '';
 });
-
 var Card = function Card(props) {
-  return _react2.default.createElement(
-    StyledCardBox,
-    {
-      paddingTopBottom: props.paddingTopBottom,
-      paddingTop: props.paddingTop,
-      paddingBottom: props.paddingBottom,
-      paddingLeftRight: props.paddingLeftRight,
-      paddingLeft: props.paddingLeft,
-      paddingRight: props.paddingRight,
-      width: props.width,
-      className: 'card-box'
-    },
-    _react2.default.createElement(
-      StyledCard,
-      props,
-      props.children
-    )
-  );
+  return /*#__PURE__*/_react["default"].createElement(StyledCardBox, {
+    paddingTopBottom: props.paddingTopBottom,
+    paddingTop: props.paddingTop,
+    paddingBottom: props.paddingBottom,
+    paddingLeftRight: props.paddingLeftRight,
+    paddingLeft: props.paddingLeft,
+    paddingRight: props.paddingRight,
+    width: props.width,
+    className: 'card-box'
+  }, /*#__PURE__*/_react["default"].createElement(StyledCard, props, props.children));
 };
-
 Card.propTypes = {
   /** The visual style used to convey the label's purpose */
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
-  width: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
-  height: _propTypes2.default.number,
-  radius: _propTypes2.default.number
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
+  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  height: _propTypes["default"].number,
+  radius: _propTypes["default"].number
 };
-
 Card.defaultProps = {
   theme: 'light',
   width: 100,
   height: 100,
   radius: 0
 };
-
-exports.default = Card;
-exports.StyledCard = StyledCard;
+var _default = exports["default"] = Card;

package/atoms/card/card.story.js

@@ -1,91 +1,42 @@
-'use strict';
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _react3 = require('@storybook/react');
-
-var _storyHelpers = require('../../_helpers/story-helpers');
-
-var _components = require('../../components');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react3.storiesOf)('Card').add('light theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances Light', background: 'default' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        _components.Card,
-        null,
-        'Light Theme'
-      ),
-      _react2.default.createElement(
-        _components.Card,
-        { width: '100%', radius: 5 },
-        'Radius Light Theme'
-      ),
-      _react2.default.createElement(
-        _components.Card,
-        null,
-        'Dark Theme'
-      )
-    )
-  );
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _storyHelpers = require("../../_helpers/story-helpers");
+var _components = require("../../components");
+(0, _react2.storiesOf)('Card').add('light theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances Light",
+    background: "default"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Card, null, "Light Theme"), /*#__PURE__*/_react["default"].createElement(_components.Card, {
+    width: "100%",
+    radius: 5
+  }, "Radius Light Theme"), /*#__PURE__*/_react["default"].createElement(_components.Card, null, "Dark Theme")));
 });
-
-(0, _react3.storiesOf)('Card').add('dark theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances Dark', background: 'black' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        _components.Card,
-        { theme: 'dark' },
-        'Light Theme'
-      ),
-      _react2.default.createElement(
-        _components.Card,
-        { theme: 'dark', radius: 5 },
-        'Radius Light Theme'
-      ),
-      _react2.default.createElement(
-        _components.Card,
-        { theme: 'dark' },
-        'Dark Theme'
-      )
-    )
-  );
+(0, _react2.storiesOf)('Card').add('dark theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances Dark",
+    background: "black"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Card, {
+    theme: "dark"
+  }, "Light Theme"), /*#__PURE__*/_react["default"].createElement(_components.Card, {
+    theme: "dark",
+    radius: 5
+  }, "Radius Light Theme"), /*#__PURE__*/_react["default"].createElement(_components.Card, {
+    theme: "dark"
+  }, "Dark Theme")));
 });
-
-(0, _react3.storiesOf)('Card').add('nexc theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances Dark', background: 'black' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        _components.Card,
-        { theme: 'nexc' },
-        'Light Theme'
-      ),
-      _react2.default.createElement(
-        _components.Card,
-        { theme: 'nexc', radius: 5 },
-        'Radius Light Theme'
-      ),
-      _react2.default.createElement(
-        _components.Card,
-        { theme: 'nexc' },
-        'Dark Theme'
-      )
-    )
-  );
+(0, _react2.storiesOf)('Card').add('nexc theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances Dark",
+    background: "black"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Card, {
+    theme: "nexc"
+  }, "Light Theme"), /*#__PURE__*/_react["default"].createElement(_components.Card, {
+    theme: "nexc",
+    radius: 5
+  }, "Radius Light Theme"), /*#__PURE__*/_react["default"].createElement(_components.Card, {
+    theme: "nexc"
+  }, "Dark Theme")));
 });

package/atoms/card/index.js

@@ -1,15 +1,17 @@
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledCard = undefined;
-
-var _card = require("./card");
-
-var _card2 = _interopRequireDefault(_card);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _card2.default;
-exports.StyledCard = _card.StyledCard;
+Object.defineProperty(exports, "StyledCard", {
+  enumerable: true,
+  get: function get() {
+    return _card.StyledCard;
+  }
+});
+exports["default"] = void 0;
+var _card = _interopRequireWildcard(require("./card"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var _default = exports["default"] = _card["default"];

package/atoms/cardStack/cardStack.js

@@ -1,55 +1,36 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   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(['\nposition:relative;\npadding: 20px;\n//min-height:250px;\n > div{\n    position:relative;\n    min-height:100%;\n    display: flex;\n    &>div{\n        //width:100%;\n        transition: all 0.5s ease;\n        position: relative;\n    }\n\n\n\n    &.current{\n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                bottom:0px;\n                width:100%;\n                display:none;\n            }\n        }\n    }\n    &.next{ \n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                bottom:0px;\n                width:100%;\n                //color:', '\n                font-size: 16px;\n                display: flex;\n                align-items: flex-end;\n                cursor: ', '\n            }\n        }\n    }\n    &.previous{ \n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                top:0px;\n                width:100%;\n                //color: ', ';\n                font-size: 16px;\n                display: flex;\n                align-items: flex-start;\n                cursor: pointer;\n            }\n        }\n    }\n }\nh1{\n    font-size:20px;\n}\n\n\n'], ['\nposition:relative;\npadding: 20px;\n//min-height:250px;\n > div{\n    position:relative;\n    min-height:100%;\n    display: flex;\n    &>div{\n        //width:100%;\n        transition: all 0.5s ease;\n        position: relative;\n    }\n\n\n\n    &.current{\n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                bottom:0px;\n                width:100%;\n                display:none;\n            }\n        }\n    }\n    &.next{ \n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                bottom:0px;\n                width:100%;\n                //color:', '\n                font-size: 16px;\n                display: flex;\n                align-items: flex-end;\n                cursor: ', '\n            }\n        }\n    }\n    &.previous{ \n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                top:0px;\n                width:100%;\n                //color: ', ';\n                font-size: 16px;\n                display: flex;\n                align-items: flex-start;\n                cursor: pointer;\n            }\n        }\n    }\n }\nh1{\n    font-size:20px;\n}\n\n\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n\n    margin:0px auto;\n    \n    top: -', 'px;\n\n    width: 100%;\n\n    &>div{\n        background: #303f51; //', ';//#fff;\n        //border:1px solid #fff;\n        border-bottom: 0px;\n        box-shadow: 0px 0px 18px 7px rgba(0,0,0,0.3); //0 0 6px 2px #dddddd;//2px 2px 2px 2px #8a8787;\n        margin:0px auto;\n        transition: all 0.5s;\n        ', '\n    }\n\n\n\n    @keyframes up {\n        0%{\n          transform: translate(0, 0);\n          opacity:1;\n        }\n        \n        70% {\n          transform: translate(0, -40px);\n          opacity:1;\n        }\n\n        99% {\n\n        }\n        100% {\n            transform: translate(0, 0);\n            opacity:1;\n          }\n        \n      }\n    @keyframes down {\n        0%{\n          transform: translate(0, 0);\n          //opacity:0;\n        }\n        \n        70% {\n          transform: translate(0, 40px);\n        }\n\n        99% {\n\n        }\n        100% {\n            transform: translate(0, 0);\n            opacity:1;\n          }\n        \n      }\n\n    \n\n\n'], ['\n\n    margin:0px auto;\n    \n    top: -', 'px;\n\n    width: 100%;\n\n    &>div{\n        background: #303f51; //', ';//#fff;\n        //border:1px solid #fff;\n        border-bottom: 0px;\n        box-shadow: 0px 0px 18px 7px rgba(0,0,0,0.3); //0 0 6px 2px #dddddd;//2px 2px 2px 2px #8a8787;\n        margin:0px auto;\n        transition: all 0.5s;\n        ', '\n    }\n\n\n\n    @keyframes up {\n        0%{\n          transform: translate(0, 0);\n          opacity:1;\n        }\n        \n        70% {\n          transform: translate(0, -40px);\n          opacity:1;\n        }\n\n        99% {\n\n        }\n        100% {\n            transform: translate(0, 0);\n            opacity:1;\n          }\n        \n      }\n    @keyframes down {\n        0%{\n          transform: translate(0, 0);\n          //opacity:0;\n        }\n        \n        70% {\n          transform: translate(0, 40px);\n        }\n\n        99% {\n\n        }\n        100% {\n            transform: translate(0, 0);\n            opacity:1;\n          }\n        \n      }\n\n    \n\n\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  height: ', 'px;\n'], ['\n  height: ', 'px;\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _tokens = require('@desynova-digital/tokens');
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-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) } })); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
+exports["default"] = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _tokens = require("@desynova-digital/tokens");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _templateObject, _templateObject2, _templateObject3;
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 //import './switch.css'
-var CardStack = function (_React$Component) {
-  _inherits(CardStack, _React$Component);
-
+var CardStack = /*#__PURE__*/function (_React$Component) {
   function CardStack(props) {
-    _classCallCheck(this, CardStack);
-
-    var _this = _possibleConstructorReturn(this, (CardStack.__proto__ || Object.getPrototypeOf(CardStack)).call(this, props));
-
-    _this.changeCardTo = function (newIdx) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, CardStack);
+    _this = _callSuper(this, CardStack, [props]);
+    (0, _defineProperty2["default"])(_this, "changeCardTo", function (newIdx) {
       _this.setState({
         current: newIdx,
         last: _this.state.current ? _this.state.current : 0
       });
-    };
-
+    });
     _this.state = {
       current: props.current ? props.current : 0,
       last: props.current ? props.current : 0,
@@ -58,12 +39,11 @@ var CardStack = function (_React$Component) {
     _this.cardClick = _this.cardClick.bind(_this);
     return _this;
   }
-
-  _createClass(CardStack, [{
-    key: 'cardClick',
+  (0, _inherits2["default"])(CardStack, _React$Component);
+  return (0, _createClass2["default"])(CardStack, [{
+    key: "cardClick",
     value: function cardClick(e, idx) {
       var _this2 = this;
-
       if (this.state.current !== idx) {
         if (!this.props.isStepform) {
           this.setState({
@@ -78,87 +58,63 @@ var CardStack = function (_React$Component) {
       }
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this3 = this;
-
       if (this.props.isStepform && this.props.current !== this.state.current) {
         this.changeCardTo(this.props.current);
       }
-
-      return _react2.default.createElement(
-        CardStack.CardStackBox,
-        {
-          className: 'card-stack-box',
-          theme: this.props.theme,
-          isStepform: this.props.isStepform
-        },
-        this.props.children.constructor === Array ? this.props.children.map(function (child, idx) {
-          //console.log('child ::',child.key);
-          return _react2.default.createElement(
-            CardStack.Card,
-            {
-              key: child.key + 0 + 'card-stack',
-              className: _this3.state.current < idx ? 'next' : _this3.state.current === idx ? 'current' : 'previous',
-              count: idx,
-              isStepform: _this3.props.isStepform,
-              current: _this3.state.current,
-              total: _this3.props.children.length,
-              last: _this3.state.last,
-              onClick: function onClick(e) {
-                return _this3.cardClick(e, idx);
-              },
-              titleHeight: _this3.props.titleHeight,
-              theme: _this3.props.theme ? _this3.props.theme : 'dark'
-            },
-            _react2.default.createElement(
-              'div',
-              null,
-              _react2.default.createElement(TitleComponent, { title: child.props.title, titleHeight: _this3.props.titleHeight }),
-              _this3.state.current === idx ? child : null
-            )
-          );
-        }) : this.props.children.constructor === Object ? _react2.default.createElement(
-          CardStack.Card,
-          {
-            key: 'card',
-            className: this.state.current < 0 ? 'next' : this.state.current === 0 ? 'current' : 'previous',
-            count: 0,
-            current: this.state.current,
-            isStepform: this.props.isStepform,
-            total: 1,
-            last: this.state.last,
-            onClick: function onClick(e) {
-              return _this3.cardClick(e, 0);
-            },
-            titleHeight: this.props.titleHeight,
-            theme: this.props.theme ? this.props.theme : 'dark'
+      return /*#__PURE__*/_react["default"].createElement(CardStack.CardStackBox, {
+        className: "card-stack-box",
+        theme: this.props.theme,
+        isStepform: this.props.isStepform
+      }, this.props.children.constructor === Array ? this.props.children.map(function (child, idx) {
+        //console.log('child ::',child.key);
+        return /*#__PURE__*/_react["default"].createElement(CardStack.Card, {
+          key: child.key + 0 + 'card-stack',
+          className: _this3.state.current < idx ? 'next' : _this3.state.current === idx ? 'current' : 'previous',
+          count: idx,
+          isStepform: _this3.props.isStepform,
+          current: _this3.state.current,
+          total: _this3.props.children.length,
+          last: _this3.state.last,
+          onClick: function onClick(e) {
+            return _this3.cardClick(e, idx);
           },
-          _react2.default.createElement(
-            'div',
-            null,
-            _react2.default.createElement(TitleComponent, {
-              title: this.props.children.props.title,
-              titleHeight: this.props.titleHeight
-            }),
-            this.state.current === 0 ? this.props.children : null
-          )
-        ) : null
-      );
+          titleHeight: _this3.props.titleHeight,
+          theme: _this3.props.theme ? _this3.props.theme : 'dark'
+        }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(TitleComponent, {
+          title: child.props.title,
+          titleHeight: _this3.props.titleHeight
+        }), _this3.state.current === idx ? child : null));
+      }) : this.props.children.constructor === Object ? /*#__PURE__*/_react["default"].createElement(CardStack.Card, {
+        key: 'card',
+        className: this.state.current < 0 ? 'next' : this.state.current === 0 ? 'current' : 'previous',
+        count: 0,
+        current: this.state.current,
+        isStepform: this.props.isStepform,
+        total: 1,
+        last: this.state.last,
+        onClick: function onClick(e) {
+          return _this3.cardClick(e, 0);
+        },
+        titleHeight: this.props.titleHeight,
+        theme: this.props.theme ? this.props.theme : 'dark'
+      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(TitleComponent, {
+        title: this.props.children.props.title,
+        titleHeight: this.props.titleHeight
+      }), this.state.current === 0 ? this.props.children : null)) : null);
     }
   }]);
-
-  return CardStack;
-}(_react2.default.Component);
-
-CardStack.CardStackBox = _styledComponents2.default.div(_templateObject, function (props) {
+}(_react["default"].Component);
+CardStack.CardStackBox = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\nposition:relative;\npadding: 20px;\n//min-height:250px;\n > div{\n    position:relative;\n    min-height:100%;\n    display: flex;\n    &>div{\n        //width:100%;\n        transition: all 0.5s ease;\n        position: relative;\n    }\n\n\n\n    &.current{\n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                bottom:0px;\n                width:100%;\n                display:none;\n            }\n        }\n    }\n    &.next{ \n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                bottom:0px;\n                width:100%;\n                //color:", "\n                font-size: 16px;\n                display: flex;\n                align-items: flex-end;\n                cursor: ", "\n            }\n        }\n    }\n    &.previous{ \n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                top:0px;\n                width:100%;\n                //color: ", ";\n                font-size: 16px;\n                display: flex;\n                align-items: flex-start;\n                cursor: pointer;\n            }\n        }\n    }\n }\nh1{\n    font-size:20px;\n}\n\n\n"])), function (props) {
   return _tokens.colors[props.theme].card.themeColor;
 }, function (props) {
   return props.isStepform ? 'not-allowed' : 'pointer';
 }, function (props) {
   return _tokens.colors[props.theme].card.themeColor;
 });
-CardStack.Card = _styledComponents2.default.div(_templateObject2, function (props) {
+CardStack.Card = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n\n    margin:0px auto;\n    \n    top: -", "px;\n\n    width: 100%;\n\n    &>div{\n        background: #303f51; //", ";//#fff;\n        //border:1px solid #fff;\n        border-bottom: 0px;\n        box-shadow: 0px 0px 18px 7px rgba(0,0,0,0.3); //0 0 6px 2px #dddddd;//2px 2px 2px 2px #8a8787;\n        margin:0px auto;\n        transition: all 0.5s;\n        ", "\n    }\n\n\n\n    @keyframes up {\n        0%{\n          transform: translate(0, 0);\n          opacity:1;\n        }\n        \n        70% {\n          transform: translate(0, -40px);\n          opacity:1;\n        }\n\n        99% {\n\n        }\n        100% {\n            transform: translate(0, 0);\n            opacity:1;\n          }\n        \n      }\n    @keyframes down {\n        0%{\n          transform: translate(0, 0);\n          //opacity:0;\n        }\n        \n        70% {\n          transform: translate(0, 40px);\n        }\n\n        99% {\n\n        }\n        100% {\n            transform: translate(0, 0);\n            opacity:1;\n          }\n        \n      }\n\n    \n\n\n"])), function (props) {
   return props.count * (props.titleHeight + 40);
 }, function (props) {
   return _tokens.colors[props.theme].card.background;
@@ -171,22 +127,18 @@ CardStack.Card = _styledComponents2.default.div(_templateObject2, function (prop
     return 'animation: ' + (props.last > props.current ? 'up' : 'down') + ' 0.25s 1;transform: translate(0, 0); width:100%; z-index:' + props.total + ';background:#162433';
   }
 });
-
 CardStack.propTypes = {
   /** The visual style used to convey the label's purpose */
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
-
-  titleHeight: _propTypes2.default.number,
-  current: _propTypes2.default.number
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
+  titleHeight: _propTypes["default"].number,
+  current: _propTypes["default"].number
 };
-
 CardStack.Card.propTypes = {
   /** The visual style used to convey the label's purpose */
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
-  isStepform: _propTypes2.default.bool,
-  titleHeight: _propTypes2.default.number
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
+  isStepform: _propTypes["default"].bool,
+  titleHeight: _propTypes["default"].number
 };
-
 CardStack.defaultProps = {
   titleHeight: 60,
   theme: 'dark',
@@ -198,42 +150,31 @@ CardStack.Card.defaultProps = {
   activeForms: [],
   titleHeight: 60
 };
-
-var TitleComponent = function (_React$Component2) {
-  _inherits(TitleComponent, _React$Component2);
-
+var TitleComponent = /*#__PURE__*/function (_React$Component2) {
   function TitleComponent(props) {
-    _classCallCheck(this, TitleComponent);
-
-    return _possibleConstructorReturn(this, (TitleComponent.__proto__ || Object.getPrototypeOf(TitleComponent)).call(this, props));
+    (0, _classCallCheck2["default"])(this, TitleComponent);
+    return _callSuper(this, TitleComponent, [props]);
   }
-
-  _createClass(TitleComponent, [{
-    key: 'render',
+  (0, _inherits2["default"])(TitleComponent, _React$Component2);
+  return (0, _createClass2["default"])(TitleComponent, [{
+    key: "render",
     value: function render() {
       var title = '';
       if (this.props.title) {
         if (typeof this.props.title == 'string') {
-          title = _react2.default.createElement(
-            CardStack.TitleBox,
-            { titleHeight: this.props.titleHeight, className: 'card-title' },
-            this.props.title
-          );
+          title = /*#__PURE__*/_react["default"].createElement(CardStack.TitleBox, {
+            titleHeight: this.props.titleHeight,
+            className: "card-title"
+          }, this.props.title);
         } else {
           title = this.props.title;
         }
       }
-
       return title;
     }
   }]);
-
-  return TitleComponent;
-}(_react2.default.Component);
-
-CardStack.TitleBox = _styledComponents2.default.div(_templateObject3, function (props) {
+}(_react["default"].Component);
+CardStack.TitleBox = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", "px;\n"])), function (props) {
   return props.titleHeight + 100;
 });
-
-exports.default = CardStack;
-//export {CardStackBox}
+var _default = exports["default"] = CardStack; //export {CardStackBox}