@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/textarea/textarea.js

@@ -1,61 +1,40 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _templateObject = _taggedTemplateLiteral(['\n  background: transparent;\n  font-family: \'SFUIText-Medium\';\n  position: relative;\n  width: 100%;\n  display: block;\n\n  > label {\n    color: ', ';\n    font-size: 14px;\n\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > textarea:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: ', ';\n    text-transform: capitalize;\n  }\n\n  > textarea ~ label.floaton {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: ', ';\n    text-transform: capitalize;\n  }\n'], ['\n  background: transparent;\n  font-family: \'SFUIText-Medium\';\n  position: relative;\n  width: 100%;\n  display: block;\n\n  > label {\n    color: ', ';\n    font-size: 14px;\n\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > textarea:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: ', ';\n    text-transform: capitalize;\n  }\n\n  > textarea ~ label.floaton {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: ', ';\n    text-transform: capitalize;\n  }\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  color: ', ';\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n'], ['\n  color: ', ';\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303f51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #ffffff;\n'], ['\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303f51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #ffffff;\n']),
-    _templateObject4 = _taggedTemplateLiteral(['\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ', ';\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ', ';\n\n  font-family: \'SFUIText-Medium\';\n  color: ', ';\n\n  cursor: ', ';\n\n  font-size: 14px;\n  padding: ', ';\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ', ';\n  }\n  &:disabled:hover {\n    border-color: ', ';\n  }\n  &:disabled {\n    border-color: ', ';\n    color: ', ';\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n  }\n'], ['\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ', ';\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ', ';\n\n  font-family: \'SFUIText-Medium\';\n  color: ', ';\n\n  cursor: ', ';\n\n  font-size: 14px;\n  padding: ', ';\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ', ';\n  }\n  &:disabled:hover {\n    border-color: ', ';\n  }\n  &:disabled {\n    border-color: ', ';\n    color: ', ';\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n  }\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _tokens = require('@desynova-digital/tokens');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var TextareaDiv = _styledComponents2.default.div(_templateObject, function (props) {
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _tokens = require("@desynova-digital/tokens");
+var _excluded = ["defaultValue", "maxLength", "showLengthCount", "type"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var TextareaDiv = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background: transparent;\n  font-family: 'SFUIText-Medium';\n  position: relative;\n  width: 100%;\n  display: block;\n\n  > label {\n    color: ", ";\n    font-size: 14px;\n\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > textarea:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: ", ";\n    text-transform: capitalize;\n  }\n\n  > textarea ~ label.floaton {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: ", ";\n    text-transform: capitalize;\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].inputLabel.color;
 }, function (props) {
   return _tokens.colors[props.theme].inputLabel.colorOnFocus;
 }, function (props) {
   return _tokens.colors[props.theme].inputLabel.colorOnFocus;
 });
-
-var InputError = _styledComponents2.default.span(_templateObject2, function (props) {
+var InputError = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n"])), function (props) {
   return _tokens.colors[props.theme].inputError.color;
 });
-
-var CountWrappper = _styledComponents2.default.div(_templateObject3);
-
-var Textarea = function Textarea(_ref) {
+var CountWrappper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303f51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #ffffff;\n"])));
+var _Textarea = function Textarea(_ref) {
   var defaultValue = _ref.defaultValue,
-      maxLength = _ref.maxLength,
-      showLengthCount = _ref.showLengthCount,
-      type = _ref.type,
-      props = _objectWithoutProperties(_ref, ['defaultValue', 'maxLength', 'showLengthCount', 'type']);
-
+    maxLength = _ref.maxLength,
+    showLengthCount = _ref.showLengthCount,
+    type = _ref.type,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   if (props.masked) {
     var length = defaultValue ? defaultValue.length : 8;
     var maskedValue = new Array(length).join('•');
-    return _react2.default.createElement(Textarea.Element, _extends({
+    return /*#__PURE__*/_react["default"].createElement(_Textarea.Element, (0, _extends2["default"])({
       theme: props.theme,
       value: props.value,
       type: type
@@ -70,40 +49,23 @@ var Textarea = function Textarea(_ref) {
   if (props.readOnly) {
     props.disabled = true;
   }
-
-  return _react2.default.createElement(
-    TextareaDiv,
-    { theme: props.theme },
-    _react2.default.createElement(Textarea.Element, _extends({
-      theme: props.theme,
-      type: type,
-      value: props.value,
-      defaultValue: defaultValue,
-      maxLength: maxLength
-    }, props)),
-    props.label ? _react2.default.createElement(
-      'label',
-      {
-        htmlFor: props.id,
-        className: props.value && props.value.length > 0 ? 'floaton' : ''
-      },
-      '' + props.label + (props.isRequired ? '*' : '')
-    ) : '',
-    errorMesssage ? _react2.default.createElement(
-      InputError,
-      { value: props.value, theme: props.theme, error: props.error },
-      errorMesssage
-    ) : '',
-    maxLength && showLengthCount && _react2.default.createElement(
-      CountWrappper,
-      null,
-      props.value.length,
-      '/',
-      maxLength
-    )
-  );
+  return /*#__PURE__*/_react["default"].createElement(TextareaDiv, {
+    theme: props.theme
+  }, /*#__PURE__*/_react["default"].createElement(_Textarea.Element, (0, _extends2["default"])({
+    theme: props.theme,
+    type: type,
+    value: props.value,
+    defaultValue: defaultValue,
+    maxLength: maxLength
+  }, props)), props.label ? /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: props.id,
+    className: props.value && props.value.length > 0 ? 'floaton' : ''
+  }, "".concat(props.label).concat(props.isRequired ? "*" : '')) : '', errorMesssage ? /*#__PURE__*/_react["default"].createElement(InputError, {
+    value: props.value,
+    theme: props.theme,
+    error: props.error
+  }, errorMesssage) : '', maxLength && showLengthCount && /*#__PURE__*/_react["default"].createElement(CountWrappper, null, props.value.length, "/", maxLength));
 };
-
 var returnPadding = function returnPadding(props) {
   if (props.showLengthCount) {
     var digitCount = props.maxLength.toString().length;
@@ -127,8 +89,7 @@ var returnPadding = function returnPadding(props) {
     return '7px 0px 2px 0px';
   }
 };
-
-Textarea.Element = _styledComponents2.default.textarea(_templateObject4, function (props) {
+_Textarea.Element = _styledComponents["default"].textarea(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ", ";\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ", ";\n\n  font-family: 'SFUIText-Medium';\n  color: ", ";\n\n  cursor: ", ";\n\n  font-size: 14px;\n  padding: ", ";\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ", ";\n  }\n  &:disabled:hover {\n    border-color: ", ";\n  }\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ", ";\n\n    opacity: ", ";\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ", ";\n\n    opacity: ", ";\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].inputCommon.background;
 }, function (props) {
   if (props.error) {
@@ -169,40 +130,36 @@ Textarea.Element = _styledComponents2.default.textarea(_templateObject4, functio
 }, function (props) {
   return props.placeholder ? '1' : '1';
 });
-
-Textarea.propTypes = {
+_Textarea.propTypes = {
   /** Hide textarea, similar to passwords but for other private information. Implies readOnly. */
-  masked: _propTypes2.default.bool,
+  masked: _propTypes["default"].bool,
   /** Make textarea readOnly if it does not validate constraint */
-  readOnly: _propTypes2.default.bool,
+  readOnly: _propTypes["default"].bool,
   /** Use when the expected textarea is code */
-  code: _propTypes2.default.bool,
+  code: _propTypes["default"].bool,
   /** Pass hasError to show error state */
-  hasError: _propTypes2.default.bool,
+  hasError: _propTypes["default"].bool,
   /** Pass error string directly to show error state */
-  error: _propTypes2.default.string,
+  error: _propTypes["default"].string,
   /** onChange transparently passed to the textarea */
-  onChange: _propTypes2.default.func,
+  onChange: _propTypes["default"].func,
   /** Text to display when the textarea is empty */
-  placeholder: _propTypes2.default.string,
+  placeholder: _propTypes["default"].string,
   /** The default value for the field */
-  defaultValue: _propTypes2.default.string,
+  defaultValue: _propTypes["default"].string,
   /** The (HTML) type for the textarea. */
-  type: _propTypes2.default.string,
-  value: _propTypes2.default.string,
+  type: _propTypes["default"].string,
+  value: _propTypes["default"].string,
   /** The (HTML) maxLength for the textarea. */
-  maxLength: _propTypes2.default.number,
-
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
-
-  row: _propTypes2.default.number,
-  showLengthCount: _propTypes2.default.bool
+  maxLength: _propTypes["default"].number,
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
+  row: _propTypes["default"].number,
+  showLengthCount: _propTypes["default"].bool
 
   /** deprecate error string prop */
   // _error: props => deprecate(props, { name: 'error', replacement: 'hasError' })
 };
-
-Textarea.defaultProps = {
+_Textarea.defaultProps = {
   readOnly: false,
   code: false,
   error: null,
@@ -214,5 +171,4 @@ Textarea.defaultProps = {
   rows: 3,
   showLengthCount: false
 };
-
-exports.default = Textarea;
+var _default = exports["default"] = _Textarea;

package/atoms/textarea/textarea.story.js

@@ -1,43 +1,50 @@
-'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)('Textarea').add('light theme', function () {
-    return _react2.default.createElement(
-        _storyHelpers.Example,
-        { title: 'Appearances' },
-        _react2.default.createElement(
-            _storyHelpers.Stack,
-            null,
-            _react2.default.createElement(_components.Textarea, { type: 'text', label: 'First Name', maxLength: 3, onChange: function onChange(e) {
-                    return console.log(e.target.value);
-                }, placeholder: 'Enter Name max 10', value: '', required: true }),
-            _react2.default.createElement(_components.Textarea, { type: 'text', value: "hello", label: 'Label and default value', required: true })
-        )
-    );
+"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)('Textarea').add('light theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Textarea, {
+    type: "text",
+    label: "First Name",
+    maxLength: 3,
+    onChange: function onChange(e) {
+      return console.log(e.target.value);
+    },
+    placeholder: "Enter Name max 10",
+    value: "",
+    required: true
+  }), /*#__PURE__*/_react["default"].createElement(_components.Textarea, {
+    type: "text",
+    value: "hello",
+    label: "Label and default value",
+    required: true
+  })));
 });
-
-(0, _react3.storiesOf)('Textarea').add('dark theme', function () {
-    return _react2.default.createElement(
-        _storyHelpers.Example,
-        { title: 'Appearances', background: 'dark' },
-        _react2.default.createElement(
-            _storyHelpers.Stack,
-            null,
-            _react2.default.createElement(_components.Textarea, { theme: 'dark', type: 'text', label: 'First Name', maxLength: 3, onChange: function onChange(e) {
-                    return console.log(e.target.value);
-                }, placeholder: 'Enter Name max 10', required: true }),
-            _react2.default.createElement(_components.Textarea, { theme: 'dark', type: 'text', error: 'required field', value: "Label and default value Label and Label and default value default value Label and default value Label and default value Label and default value Label and default value Label and default value", label: 'Label and default value', required: true })
-        )
-    );
+(0, _react2.storiesOf)('Textarea').add('dark theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances",
+    background: "dark"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Textarea, {
+    theme: "dark",
+    type: "text",
+    label: "First Name",
+    maxLength: 3,
+    onChange: function onChange(e) {
+      return console.log(e.target.value);
+    },
+    placeholder: "Enter Name max 10",
+    required: true
+  }), /*#__PURE__*/_react["default"].createElement(_components.Textarea, {
+    theme: "dark",
+    type: "text",
+    error: "required field",
+    value: "Label and default value Label and Label and default value default value Label and default value Label and default value Label and default value Label and default value Label and default value",
+    label: "Label and default value",
+    required: true
+  })));
 });

package/atoms/thematicBreak/index.js

@@ -1,15 +1,17 @@
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledBreak = undefined;
-
-var _thematicBreak = require("./thematicBreak");
-
-var _thematicBreak2 = _interopRequireDefault(_thematicBreak);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _thematicBreak2.default;
-exports.StyledBreak = _thematicBreak.StyledBreak;
+Object.defineProperty(exports, "StyledBreak", {
+  enumerable: true,
+  get: function get() {
+    return _thematicBreak.StyledBreak;
+  }
+});
+exports["default"] = void 0;
+var _thematicBreak = _interopRequireWildcard(require("./thematicBreak"));
+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"] = _thematicBreak["default"];

package/atoms/thematicBreak/thematicBreak.js

@@ -1,50 +1,32 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-exports.StyledBreak = undefined;
-
-var _templateObject = _taggedTemplateLiteral(['\n    border: none;\n    border-top: 1px solid;\n    border-color: ', ';\n    color: ', ';\n    overflow: visible;\n    text-align: center;\n    height: 5px;\n    width: 100%;\n    font-family: \'SFUIText-Light\';\n    &:after {\n        content: "', '";\n        background:  ', ';\n        display: ', '\n        padding: 0 4px;\n        position: relative;\n        top: -8px;\n    }\n'], ['\n    border: none;\n    border-top: 1px solid;\n    border-color: ', ';\n    color: ', ';\n    overflow: visible;\n    text-align: center;\n    height: 5px;\n    width: 100%;\n    font-family: \'SFUIText-Light\';\n    &:after {\n        content: "', '";\n        background:  ', ';\n        display: ', '\n        padding: 0 4px;\n        position: relative;\n        top: -8px;\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 StyledBreak = _styledComponents2.default.hr(_templateObject, function (props) {
-    return _tokens.colors.common.break.border;
+exports["default"] = exports.StyledBreak = 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;
+var StyledBreak = exports.StyledBreak = _styledComponents["default"].hr(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    border: none;\n    border-top: 1px solid;\n    border-color: ", ";\n    color: ", ";\n    overflow: visible;\n    text-align: center;\n    height: 5px;\n    width: 100%;\n    font-family: 'SFUIText-Light';\n    &:after {\n        content: \"", "\";\n        background:  ", ";\n        display: ", "\n        padding: 0 4px;\n        position: relative;\n        top: -8px;\n    }\n"])), function (props) {
+  return _tokens.colors.common["break"].border;
 }, function (props) {
-    return _tokens.colors.common.break.text;
+  return _tokens.colors.common["break"].text;
 }, function (props) {
-    return props.text ? props.text : '';
+  return props.text ? props.text : '';
 }, function (props) {
-    return _tokens.colors.common.base.white;
+  return _tokens.colors.common.base.white;
 }, function (props) {
-    return props.text ? 'inline-block' : 'none';
+  return props.text ? 'inline-block' : 'none';
 });
-
 var Break = function Break(props) {
-    return _react2.default.createElement(StyledBreak, props);
+  return /*#__PURE__*/_react["default"].createElement(StyledBreak, props);
 };
-
 Break.propTypes = {
-    /** The visual style used to convey the label's purpose */
-    text: _propTypes2.default.string
+  /** The visual style used to convey the label's purpose */
+  text: _propTypes["default"].string
 };
-
-exports.default = Break;
-exports.StyledBreak = StyledBreak;
+var _default = exports["default"] = Break;

package/atoms/thematicBreak/thematicBreak.story.js

@@ -1,43 +1,31 @@
 "use strict";
 
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _react3 = require("@storybook/react");
-
+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");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react3.storiesOf)("Break").add("break-appearance", function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: "Break Appearence", background: "white" },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_components.Break, { text: "OR" }),
-      _react2.default.createElement(_components.Break, { text: "" })
-    )
-  );
+(0, _react2.storiesOf)("Break").add("break-appearance", function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Break Appearence",
+    background: "white"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Break, {
+    text: "OR"
+  }), /*#__PURE__*/_react["default"].createElement(_components.Break, {
+    text: ""
+  })));
 });
-
-(0, _react3.storiesOf)("Break").add("break-appearance dark", function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: "Break Appearence", background: "dark" },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        "div",
-        { style: { width: "100%" } },
-        _react2.default.createElement(_components.Break, { text: "OR" }),
-        _react2.default.createElement(_components.Break, { text: "" })
-      )
-    )
-  );
+(0, _react2.storiesOf)("Break").add("break-appearance dark", function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Break Appearence",
+    background: "dark"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: "100%"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_components.Break, {
+    text: "OR"
+  }), /*#__PURE__*/_react["default"].createElement(_components.Break, {
+    text: ""
+  }))));
 });

package/atoms/timeCodeInput/index.js

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

package/atoms/timeCodeInput/timCodeInput.story.js

@@ -1,36 +1,22 @@
-'use strict';
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _react3 = require('@storybook/react');
-
-var _storyHelpers = require('../../_helpers/story-helpers');
-
-var _timeCodeInput = require('./timeCodeInput');
-
-var _timeCodeInput2 = _interopRequireDefault(_timeCodeInput);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react3.storiesOf)('TimeCodeInput').add('dark theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_timeCodeInput2.default, {
-        theme: 'nexc',
-        inputValue: '00:00:00:00' //time code input value
-        , onFocus: function onFocus() {
-          //perform your function here eg pause the video that is playing
-        },
-        frameRate: '25',
-        initialTime: '00:00:00:00' || 0,
-        playerDuration: '00:23:35:03' || 0
-      })
-    )
-  );
+"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 _timeCodeInput = _interopRequireDefault(require("./timeCodeInput"));
+(0, _react2.storiesOf)('TimeCodeInput').add('dark theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_timeCodeInput["default"], {
+    theme: "nexc",
+    inputValue: "00:00:00:00" //time code input value
+    ,
+    onFocus: function onFocus() {
+      //perform your function here eg pause the video that is playing
+    },
+    frameRate: '25',
+    initialTime: '00:00:00:00' || 0,
+    playerDuration: '00:23:35:03' || 0
+  })));
 });