@desynova-digital/components 8.19.63 → 9.0.1

package/components.js

@@ -1,238 +1,235 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TimeCodeInput = exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.Loader = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.DateTime = exports.IconsJson = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
+exports.DraftInputText = exports.TimeCodeInput = exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.Loader = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.DateTime = exports.IconsJson = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
 
-require("./_helpers/globals");
+require('./_helpers/globals');
 
-var _avatar = require("./atoms/avatar");
+var _avatar = require('./atoms/avatar');
 
 var _avatar2 = _interopRequireDefault(_avatar);
 
-var _button = require("./atoms/button");
+var _button = require('./atoms/button');
 
 var _button2 = _interopRequireDefault(_button);
 
-var _badge = require("./atoms/badge");
+var _badge = require('./atoms/badge');
 
 var _badge2 = _interopRequireDefault(_badge);
 
-var _label = require("./atoms/label");
+var _label = require('./atoms/label');
 
 var _label2 = _interopRequireDefault(_label);
 
-var _tag = require("./atoms/tag");
+var _tag = require('./atoms/tag');
 
 var _tag2 = _interopRequireDefault(_tag);
 
-var _icon = require("./atoms/icon");
+var _icon = require('./atoms/icon');
 
 var _icon2 = _interopRequireDefault(_icon);
 
-var _dateTime = require("./atoms/dateTime");
+var _dateTime = require('./atoms/dateTime');
 
 var _dateTime2 = _interopRequireDefault(_dateTime);
 
-var _card = require("./atoms/card");
+var _card = require('./atoms/card');
 
 var _card2 = _interopRequireDefault(_card);
 
-var _cardV = require("./atoms/cardV2");
+var _cardV = require('./atoms/cardV2');
 
 var _cardV2 = _interopRequireDefault(_cardV);
 
-var _videoCard = require("./atoms/videoCard");
+var _videoCard = require('./atoms/videoCard');
 
 var _videoCard2 = _interopRequireDefault(_videoCard);
 
-var _inputText = require("./atoms/inputText");
+var _inputText = require('./atoms/inputText');
 
 var _inputText2 = _interopRequireDefault(_inputText);
 
-var _textarea = require("./atoms/textarea");
+var _textarea = require('./atoms/textarea');
 
 var _textarea2 = _interopRequireDefault(_textarea);
 
-var _checkbox = require("./atoms/checkbox");
+var _checkbox = require('./atoms/checkbox');
 
 var _checkbox2 = _interopRequireDefault(_checkbox);
 
-var _image = require("./atoms/image");
+var _image = require('./atoms/image');
 
 var _image2 = _interopRequireDefault(_image);
 
-var _thematicBreak = require("./atoms/thematicBreak");
+var _thematicBreak = require('./atoms/thematicBreak');
 
 var _thematicBreak2 = _interopRequireDefault(_thematicBreak);
 
-var _barGraph = require("./atoms/graphs/barGraph");
+var _barGraph = require('./atoms/graphs/barGraph');
 
 var _barGraph2 = _interopRequireDefault(_barGraph);
 
-var _circleGraph = require("./atoms/graphs/circleGraph");
+var _circleGraph = require('./atoms/graphs/circleGraph');
 
 var _circleGraph2 = _interopRequireDefault(_circleGraph);
 
-var _pieChart = require("./atoms/graphs/pieChart");
+var _pieChart = require('./atoms/graphs/pieChart');
 
 var _pieChart2 = _interopRequireDefault(_pieChart);
 
-var _radio = require("./atoms/radio");
+var _radio = require('./atoms/radio');
 
 var _radio2 = _interopRequireDefault(_radio);
 
-var _switch = require("./atoms/switch");
+var _switch = require('./atoms/switch');
 
 var _switch2 = _interopRequireDefault(_switch);
 
-var _customSelect = require("./atoms/customSelect");
+var _customSelect = require('./atoms/customSelect');
 
 var _customSelect2 = _interopRequireDefault(_customSelect);
 
-var _popup = require("./atoms/popup");
+var _popup = require('./atoms/popup');
 
 var _popup2 = _interopRequireDefault(_popup);
 
-var _timer = require("./atoms/timer");
+var _timer = require('./atoms/timer');
 
 var _timer2 = _interopRequireDefault(_timer);
 
-var _toast = require("./atoms/toast");
+var _toast = require('./atoms/toast');
 
 var _toast2 = _interopRequireDefault(_toast);
 
-var _dropdown = require("./atoms/dropdown");
+var _dropdown = require('./atoms/dropdown');
 
 var _dropdown2 = _interopRequireDefault(_dropdown);
 
-var _dropdownList = require("./atoms/dropdownList");
+var _dropdownList = require('./atoms/dropdownList');
 
 var _dropdownList2 = _interopRequireDefault(_dropdownList);
 
-var _cardStack = require("./atoms/cardStack");
+var _cardStack = require('./atoms/cardStack');
 
 var _cardStack2 = _interopRequireDefault(_cardStack);
 
-var _graphCard = require("./molecules/graphCard");
+var _graphCard = require('./molecules/graphCard');
 
 var _graphCard2 = _interopRequireDefault(_graphCard);
 
-var _graphDetailCard = require("./molecules/graphDetailCard");
+var _graphDetailCard = require('./molecules/graphDetailCard');
 
 var _graphDetailCard2 = _interopRequireDefault(_graphDetailCard);
 
-var _videoCardList = require("./molecules/videoCardList");
+var _videoCardList = require('./molecules/videoCardList');
 
 var _videoCardList2 = _interopRequireDefault(_videoCardList);
 
-var _loader = require("./atoms/loader");
+var _loader = require('./atoms/loader');
 
 var _loader2 = _interopRequireDefault(_loader);
 
-var _verticalBarGraph = require("./atoms/graphs/verticalBarGraph");
+var _verticalBarGraph = require('./atoms/graphs/verticalBarGraph');
 
 var _verticalBarGraph2 = _interopRequireDefault(_verticalBarGraph);
 
-var _circleDonut = require("./atoms/graphs/circleDonut/circleDonut");
+var _circleDonut = require('./atoms/graphs/circleDonut/circleDonut');
 
 var _circleDonut2 = _interopRequireDefault(_circleDonut);
 
-var _circleNested = require("./atoms/graphs/circleNested/circleNested");
+var _circleNested = require('./atoms/graphs/circleNested/circleNested');
 
 var _circleNested2 = _interopRequireDefault(_circleNested);
 
-var _datePicker = require("./atoms/datePicker");
+var _datePicker = require('./atoms/datePicker');
 
 var _datePicker2 = _interopRequireDefault(_datePicker);
 
-var _select = require("./atoms/select");
+var _select = require('./atoms/select');
 
 var _select2 = _interopRequireDefault(_select);
 
-var _sidebar = require("./atoms/sideBar/sidebar");
+var _sidebar = require('./atoms/sideBar/sidebar');
 
 var _sidebar2 = _interopRequireDefault(_sidebar);
 
-var _pageHeader = require("./molecules/pageHeader");
+var _draftInputText = require('./atoms/draftInputText');
+
+var _draftInputText2 = _interopRequireDefault(_draftInputText);
+
+var _pageHeader = require('./molecules/pageHeader');
 
 var _pageHeader2 = _interopRequireDefault(_pageHeader);
 
-var _pagination = require("./molecules/pagination");
+var _pagination = require('./molecules/pagination');
 
 var _pagination2 = _interopRequireDefault(_pagination);
 
-var _table = require("./molecules/table");
+var _table = require('./molecules/table');
 
 var _table2 = _interopRequireDefault(_table);
 
-var _filter = require("./molecules/filter");
+var _filter = require('./molecules/filter');
 
 var _filter2 = _interopRequireDefault(_filter);
 
-var _videoPlayer = require("./molecules/videoPlayer");
+var _videoPlayer = require('./molecules/videoPlayer');
 
 var _videoPlayer2 = _interopRequireDefault(_videoPlayer);
 
-var _tabs = require("./molecules/tabs");
+var _tabs = require('./molecules/tabs');
 
 var _tabs2 = _interopRequireDefault(_tabs);
 
-var _carousel = require("./molecules/carousel");
+var _carousel = require('./molecules/carousel');
 
 var _carousel2 = _interopRequireDefault(_carousel);
 
-var _errorScreen = require("./molecules/errorScreen/errorScreen");
+var _errorScreen = require('./molecules/errorScreen/errorScreen');
 
 var _errorScreen2 = _interopRequireDefault(_errorScreen);
 
-var _CollabErrorScreen = require("./molecules/errorScreen/CollabErrorScreen");
+var _CollabErrorScreen = require('./molecules/errorScreen/CollabErrorScreen');
 
 var _CollabErrorScreen2 = _interopRequireDefault(_CollabErrorScreen);
 
-var _CollabShimmerCard = require("./atoms/loader/ShimmerComponent/CollabShimmerCard");
+var _CollabShimmerCard = require('./atoms/loader/ShimmerComponent/CollabShimmerCard');
 
 var _CollabShimmerCard2 = _interopRequireDefault(_CollabShimmerCard);
 
-var _CollabShimmerCardTray = require("./atoms/loader/ShimmerComponent/CollabShimmerCardTray");
+var _CollabShimmerCardTray = require('./atoms/loader/ShimmerComponent/CollabShimmerCardTray');
 
 var _CollabShimmerCardTray2 = _interopRequireDefault(_CollabShimmerCardTray);
 
-var _FiltersShimmer = require("./atoms/loader/ShimmerComponent/FiltersShimmer");
+var _FiltersShimmer = require('./atoms/loader/ShimmerComponent/FiltersShimmer');
 
 var _FiltersShimmer2 = _interopRequireDefault(_FiltersShimmer);
 
-var _GraphDetailShimmer = require("./atoms/loader/ShimmerComponent/GraphDetailShimmer");
+var _GraphDetailShimmer = require('./atoms/loader/ShimmerComponent/GraphDetailShimmer');
 
 var _GraphDetailShimmer2 = _interopRequireDefault(_GraphDetailShimmer);
 
-var _GraphsComponentShimmer = require("./atoms/loader/ShimmerComponent/GraphsComponentShimmer");
+var _GraphsComponentShimmer = require('./atoms/loader/ShimmerComponent/GraphsComponentShimmer');
 
 var _GraphsComponentShimmer2 = _interopRequireDefault(_GraphsComponentShimmer);
 
-var _GraphTitleShimmer = require("./atoms/loader/ShimmerComponent/GraphTitleShimmer");
+var _GraphTitleShimmer = require('./atoms/loader/ShimmerComponent/GraphTitleShimmer');
 
 var _GraphTitleShimmer2 = _interopRequireDefault(_GraphTitleShimmer);
 
-var _Shimmer = require("./atoms/loader/ShimmerComponent/Shimmer");
+var _Shimmer = require('./atoms/loader/ShimmerComponent/Shimmer');
 
 var _Shimmer2 = _interopRequireDefault(_Shimmer);
 
-var _timeCodeInput = require("./atoms/timeCodeInput/timeCodeInput");
+var _timeCodeInput = require('./atoms/timeCodeInput/timeCodeInput');
 
 var _timeCodeInput2 = _interopRequireDefault(_timeCodeInput);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/*
-  This file is an aggregator, to make it easier for folks to import components that they need
-
-  example: `import { Input } from 'components'`
-  instead of  `import Input from 'components/input'`
-*/
-
-/* eslint-disable import/first */
+/* atoms */
 exports.Avatar = _avatar2.default;
 exports.Button = _button2.default;
 exports.Badge = _badge2.default;
@@ -288,8 +285,14 @@ exports.GraphsComponentShimmer = _GraphsComponentShimmer2.default;
 exports.GraphTitleShimmer = _GraphTitleShimmer2.default;
 exports.Shimmer = _Shimmer2.default;
 exports.TimeCodeInput = _timeCodeInput2.default;
+exports.DraftInputText = _draftInputText2.default;
 
 /* Molecules */
+/*
+  This file is an aggregator, to make it easier for folks to import components that they need
 
+  example: `import { Input } from 'components'`
+  instead of  `import Input from 'components/input'`
+*/
 
-/* atoms */
+/* eslint-disable import/first */

package/index.js

@@ -1,11 +1,11 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TimeCodeInput = exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.Loader = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.DateTime = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.IconsJson = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
+exports.DraftInputText = exports.TimeCodeInput = exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.Loader = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.DateTime = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.IconsJson = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
 
-var _components = require("./components");
+var _components = require('./components');
 
 exports.Avatar = _components.Avatar;
 exports.Button = _components.Button;
@@ -61,4 +61,5 @@ exports.GraphDetailsShimmer = _components.GraphDetailsShimmer;
 exports.GraphsComponentShimmer = _components.GraphsComponentShimmer;
 exports.GraphTitleShimmer = _components.GraphTitleShimmer;
 exports.Shimmer = _components.Shimmer;
-exports.TimeCodeInput = _components.TimeCodeInput;
+exports.TimeCodeInput = _components.TimeCodeInput;
+exports.DraftInputText = _components.DraftInputText;

package/molecules/carousel/carousel.js

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -6,25 +6,25 @@ 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  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  padding: 20px 0;\n  position: relative;\n"], ["\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  padding: 20px 0;\n  position: relative;\n"]),
-    _templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  padding: 0 20px;\n  position: relative;\n  .carousel-arrow {\n    position: absolute;\n    width: 40px;\n    opacity: 0.5;\n    height: 100%;\n    top: 0;\n    background: #000000;\n    z-index: 3;\n    cursor: pointer;\n    &:hover {\n      opacity: 0.8;\n    }\n    &.carousel-left {\n      left: 0;\n    }\n    &.carousel-right {\n      right: 0;\n    }\n    ", " {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n"], ["\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  padding: 0 20px;\n  position: relative;\n  .carousel-arrow {\n    position: absolute;\n    width: 40px;\n    opacity: 0.5;\n    height: 100%;\n    top: 0;\n    background: #000000;\n    z-index: 3;\n    cursor: pointer;\n    &:hover {\n      opacity: 0.8;\n    }\n    &.carousel-left {\n      left: 0;\n    }\n    &.carousel-right {\n      right: 0;\n    }\n    ", " {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n"]),
-    _templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin-bottom: 20px;\n  padding: 0 20px;\n  .title {\n    font-family: SFUIText-Medium;\n    font-size: 16px;\n    line-height: 1;\n    vertical-align: middle;\n    color: #fff;\n    display: inline-block;\n  }\n  .child-count {\n    display: inline-block;\n    font-size: 10px;\n    color: #afb2ba;\n    font-family: SFUIText-Medium;\n    border: 1px solid #303f51;\n    border-radius: 2px;\n    vertical-align: middle;\n    margin-left: 15px;\n    padding: 3px;\n    min-width: 25px;\n    height: 18px;\n    text-align: center;\n  }\n"], ["\n  width: 100%;\n  margin-bottom: 20px;\n  padding: 0 20px;\n  .title {\n    font-family: SFUIText-Medium;\n    font-size: 16px;\n    line-height: 1;\n    vertical-align: middle;\n    color: #fff;\n    display: inline-block;\n  }\n  .child-count {\n    display: inline-block;\n    font-size: 10px;\n    color: #afb2ba;\n    font-family: SFUIText-Medium;\n    border: 1px solid #303f51;\n    border-radius: 2px;\n    vertical-align: middle;\n    margin-left: 15px;\n    padding: 3px;\n    min-width: 25px;\n    height: 18px;\n    text-align: center;\n  }\n"]),
-    _templateObject4 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  position: relative;\n  left: 0px;\n  transition: all 550ms cubic-bezier(0.02, 0.01, 0.47, 1);\n"], ["\n  display: inline-flex;\n  position: relative;\n  left: 0px;\n  transition: all 550ms cubic-bezier(0.02, 0.01, 0.47, 1);\n"]),
-    _templateObject5 = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin-right: 10px;\n"], ["\n  display: inline-block;\n  margin-right: 10px;\n"]);
+var _templateObject = _taggedTemplateLiteral(['\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  padding: 20px 0;\n  position: relative;\n'], ['\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  padding: 20px 0;\n  position: relative;\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  padding: 0 20px;\n  position: relative;\n  .carousel-arrow {\n    position: absolute;\n    width: 40px;\n    opacity: 0.5;\n    height: 100%;\n    top: 0;\n    background: #000000;\n    z-index: 3;\n    cursor: pointer;\n    &:hover {\n      opacity: 0.8;\n    }\n    &.carousel-left {\n      left: 0;\n    }\n    &.carousel-right {\n      right: 0;\n    }\n    ', ' {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n'], ['\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  padding: 0 20px;\n  position: relative;\n  .carousel-arrow {\n    position: absolute;\n    width: 40px;\n    opacity: 0.5;\n    height: 100%;\n    top: 0;\n    background: #000000;\n    z-index: 3;\n    cursor: pointer;\n    &:hover {\n      opacity: 0.8;\n    }\n    &.carousel-left {\n      left: 0;\n    }\n    &.carousel-right {\n      right: 0;\n    }\n    ', ' {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  width: 100%;\n  margin-bottom: 20px;\n  padding: 0 20px;\n  .title {\n    font-family: SFUIText-Medium;\n    font-size: 16px;\n    line-height: 1;\n    vertical-align: middle;\n    color: #fff;\n    display: inline-block;\n  }\n  .child-count {\n    display: inline-block;\n    font-size: 10px;\n    color: #afb2ba;\n    font-family: SFUIText-Medium;\n    border: 1px solid #303f51;\n    border-radius: 2px;\n    vertical-align: middle;\n    margin-left: 15px;\n    padding: 3px;\n    min-width: 25px;\n    height: 18px;\n    text-align: center;\n  }\n'], ['\n  width: 100%;\n  margin-bottom: 20px;\n  padding: 0 20px;\n  .title {\n    font-family: SFUIText-Medium;\n    font-size: 16px;\n    line-height: 1;\n    vertical-align: middle;\n    color: #fff;\n    display: inline-block;\n  }\n  .child-count {\n    display: inline-block;\n    font-size: 10px;\n    color: #afb2ba;\n    font-family: SFUIText-Medium;\n    border: 1px solid #303f51;\n    border-radius: 2px;\n    vertical-align: middle;\n    margin-left: 15px;\n    padding: 3px;\n    min-width: 25px;\n    height: 18px;\n    text-align: center;\n  }\n']),
+    _templateObject4 = _taggedTemplateLiteral(['\n  display: inline-flex;\n  position: relative;\n  left: 0px;\n  transition: all 550ms cubic-bezier(0.02, 0.01, 0.47, 1);\n'], ['\n  display: inline-flex;\n  position: relative;\n  left: 0px;\n  transition: all 550ms cubic-bezier(0.02, 0.01, 0.47, 1);\n']),
+    _templateObject5 = _taggedTemplateLiteral(['\n  display: inline-block;\n  margin-right: 10px;\n'], ['\n  display: inline-block;\n  margin-right: 10px;\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);
 
-var _icon = require("../../atoms/icon");
+var _icon = require('../../atoms/icon');
 
 var _icon2 = _interopRequireDefault(_icon);
 
@@ -47,11 +47,11 @@ var propTypes = {
 
   onChange: _propTypes2.default.func,
   totalEntries: _propTypes2.default.number,
-  theme: _propTypes2.default.oneOf(["light", "dark"])
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
 };
 
 var defaultProps = {
-  theme: "light",
+  theme: 'light',
   children: []
 };
 
@@ -61,7 +61,7 @@ var CarouselBlock = _styledComponents2.default.div(_templateObject2, _icon2.defa
 
 var CarouselHeader = _styledComponents2.default.div(_templateObject3);
 
-var CarouselContainer = (0, _styledComponents2.default)("div")(_templateObject4);
+var CarouselContainer = (0, _styledComponents2.default)('div')(_templateObject4);
 
 var CarouselItem = _styledComponents2.default.div(_templateObject5);
 
@@ -84,7 +84,7 @@ var Carousel = function (_React$Component) {
   }
 
   _createClass(Carousel, [{
-    key: "componentDidMount",
+    key: 'componentDidMount',
     value: function componentDidMount() {
       var _props = this.props,
           children = _props.children,
@@ -93,12 +93,12 @@ var Carousel = function (_React$Component) {
       this.setupCarousel(children, theme);
     }
   }, {
-    key: "componentDidUpdate",
+    key: 'componentDidUpdate',
     value: function componentDidUpdate() {
       this.styleCarousel();
     }
   }, {
-    key: "setupCarousel",
+    key: 'setupCarousel',
     value: function setupCarousel(items, theme) {
       var carouselItems = [];
       if (items && items.length) {
@@ -111,7 +111,7 @@ var Carousel = function (_React$Component) {
       });
     }
   }, {
-    key: "styleCarousel",
+    key: 'styleCarousel',
     value: function styleCarousel() {
       var totalSlides = this.state.totalSlides;
 
@@ -132,7 +132,7 @@ var Carousel = function (_React$Component) {
       }
     }
   }, {
-    key: "carouselAction",
+    key: 'carouselAction',
     value: function carouselAction(action) {
       var onChange = this.props.onChange;
       var _state = this.state,
@@ -142,7 +142,7 @@ var Carousel = function (_React$Component) {
 
       var containerLeft = parseInt(this._carouselContainer.style.left);
       switch (action) {
-        case "left":
+        case 'left':
           {
             if (currentSlide > 1) {
               var left = 0;
@@ -151,7 +151,7 @@ var Carousel = function (_React$Component) {
               }
               left = left + viewWidth;
 
-              this._carouselContainer.style.left = left + "px";
+              this._carouselContainer.style.left = left + 'px';
               this.setState(function (state) {
                 return {
                   currentSlide: state.currentSlide - 1
@@ -161,7 +161,7 @@ var Carousel = function (_React$Component) {
             }
           }
           break;
-        case "right":
+        case 'right':
           {
             if (currentSlide < totalSlides) {
               var _left = 0;
@@ -170,7 +170,7 @@ var Carousel = function (_React$Component) {
               }
               _left = _left - viewWidth;
 
-              this._carouselContainer.style.left = _left + "px";
+              this._carouselContainer.style.left = _left + 'px';
               this.setState(function (state) {
                 return {
                   currentSlide: state.currentSlide + 1
@@ -187,7 +187,7 @@ var Carousel = function (_React$Component) {
       }
     }
   }, {
-    key: "UNSAFE_componentWillReceiveProps",
+    key: 'UNSAFE_componentWillReceiveProps',
     value: function UNSAFE_componentWillReceiveProps(newProps) {
       var children = newProps.children,
           theme = newProps.theme;
@@ -195,7 +195,7 @@ var Carousel = function (_React$Component) {
       this.setupCarousel(children, theme);
     }
   }, {
-    key: "render",
+    key: 'render',
     value: function render() {
       var _this2 = this;
 
@@ -211,98 +211,86 @@ var Carousel = function (_React$Component) {
       return _react2.default.createElement(
         CarouselWrapper,
         {
-          className: "carousel-wrapper " + this.props.className,
+          className: 'carousel-wrapper ' + this.props.className,
           ref: function ref(carouselWrapper) {
             _this2._carouselWrapper = carouselWrapper;
           }
         },
         _react2.default.createElement(
           CarouselHeader,
-          { className: "carousel-header" },
+          { className: 'carousel-header' },
           this.props.rightPart ? _react2.default.createElement(
-            "div",
+            'div',
             {
               style: {
-                display: "flex",
-                justifyContent: "space-between"
+                display: 'flex',
+                justifyContent: 'space-between'
               }
             },
-            " ",
+            ' ',
             _react2.default.createElement(
-              "div",
+              'div',
               null,
               _react2.default.createElement(
-                "p",
-                { className: "title" },
+                'p',
+                { className: 'title' },
                 headerTitle
               ),
               _react2.default.createElement(
-                "p",
-                { className: "child-count" },
+                'p',
+                { className: 'child-count' },
                 addNew ? totalEntries - 1 : totalEntries
               )
             ),
             _react2.default.createElement(
-              "div",
-              { className: "carousel-header-right" },
+              'div',
+              { className: 'carousel-header-right' },
               this.props.rightPart
             )
           ) : addNew || totalEntries || headerTitle ? _react2.default.createElement(
-            "div",
+            'div',
             null,
             _react2.default.createElement(
-              "p",
-              { className: "title" },
+              'p',
+              { className: 'title' },
               headerTitle
             ),
             _react2.default.createElement(
-              "p",
-              { className: "child-count" },
+              'p',
+              { className: 'child-count' },
               addNew ? totalEntries - 1 : totalEntries
             )
           ) : null
         ),
         _react2.default.createElement(
           CarouselBlock,
-          { className: "carousel-block" },
+          { className: 'carousel-block' },
           currentSlide > 1 ? _react2.default.createElement(
-            "div",
+            'div',
             {
-              className: "carousel-arrow carousel-left",
-              role: "presentation",
+              className: 'carousel-arrow carousel-left',
+              role: 'presentation',
               onClick: function onClick() {
-                _this2.carouselAction("left");
+                _this2.carouselAction('left');
               }
             },
-            _react2.default.createElement(_icon2.default, {
-              width: 14,
-              height: 30,
-              name: "angle-left",
-              color: "none",
-              stroke: "#fff"
-            })
+            _react2.default.createElement(_icon2.default, { width: 14, height: 30, name: 'angle-left', color: 'none', stroke: '#fff' })
           ) : null,
           currentSlide < totalSlides ? _react2.default.createElement(
-            "div",
+            'div',
             {
-              className: "carousel-arrow carousel-right",
-              role: "presentation",
+              className: 'carousel-arrow carousel-right',
+              role: 'presentation',
               onClick: function onClick() {
-                _this2.carouselAction("right");
+                _this2.carouselAction('right');
               }
             },
-            _react2.default.createElement(_icon2.default, {
-              width: 14,
-              height: 30,
-              name: "angle-right",
-              color: "none",
-              stroke: "#fff"
-            })
+            _react2.default.createElement(_icon2.default, { width: 14, height: 30, name: 'angle-right', color: 'none', stroke: '#fff' })
           ) : null,
           _react2.default.createElement(
             CarouselContainer,
             {
-              className: "carousel-container",
+              className: 'carousel-container',
               ref: function ref(carouselContainer) {
                 _this2._carouselContainer = carouselContainer;
               }
@@ -311,7 +299,7 @@ var Carousel = function (_React$Component) {
               return _react2.default.createElement(
                 CarouselItem,
                 {
-                  className: "carousel-item",
+                  className: 'carousel-item',
                   key: item.key || item.props.id,
                   ref: function ref(carouselItem) {
                     _this2._carouselItem = carouselItem;