@desynova-digital/components 8.19.63 → 9.0.1

package/atoms/tag/tag.story.js

@@ -18,17 +18,38 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     { title: 'Tag', background: 'white' },
     _react2.default.createElement(
       _components.Tag,
-      { onClick: function onClick(evt) {
+      {
+        onClick: function onClick(evt) {
           return alert('First tag was clicked!');
         },
         onRemove: function onRemove(evt) {
           return alert('First tag was removed!');
-        } },
+        }
+      },
       'Example'
     )
   );
 });
 
+(0, _react3.storiesOf)('Tag').add('default nexc', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Tag', background: 'white' },
+    _react2.default.createElement(
+      _components.Tag,
+      {
+        theme: 'nexc',
+        onClick: function onClick(evt) {
+          return alert('First tag was clicked!');
+        },
+        onRemove: function onRemove(evt) {
+          return alert('First tag was removed!');
+        }
+      },
+      'Example'
+    )
+  );
+});
 (0, _react3.storiesOf)('Tag').add('without remove callback', function () {
   return _react2.default.createElement(
     _storyHelpers.Example,
@@ -43,6 +64,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   );
 });
 
+(0, _react3.storiesOf)('Tag').add('without remove callback nexc ', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Tag', background: 'white' },
+    _react2.default.createElement(
+      _components.Tag,
+      { theme: 'nexc', onClick: function onClick(evt) {
+          return false;
+        } },
+      'Example'
+    )
+  );
+});
+
 (0, _react3.storiesOf)('Tag').add('tag group dark theme', function () {
   return _react2.default.createElement(
     _storyHelpers.Example,
@@ -133,4 +168,50 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       )
     )
   );
+});
+
+(0, _react3.storiesOf)('Tag').add('tag group nexc theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Tag', background: 'dark' },
+    _react2.default.createElement(
+      _components.Tag.Group,
+      null,
+      _react2.default.createElement(
+        _components.Tag,
+        { theme: 'nexc', onRemove: function onRemove(evt) {
+            return false;
+          } },
+        'Thiruvananthapuram'
+      ),
+      _react2.default.createElement(
+        _components.Tag,
+        { theme: 'nexc', onRemove: function onRemove(evt) {
+            return false;
+          } },
+        'Week'
+      ),
+      _react2.default.createElement(
+        _components.Tag,
+        { theme: 'nexc', onRemove: function onRemove(evt) {
+            return false;
+          } },
+        'Vijaya HD'
+      ),
+      _react2.default.createElement(
+        _components.Tag,
+        { theme: 'nexc', onRemove: function onRemove(evt) {
+            return false;
+          } },
+        'Shows'
+      ),
+      _react2.default.createElement(
+        _components.Tag,
+        { theme: 'nexc', onRemove: function onRemove(evt) {
+            return false;
+          } },
+        'Clean'
+      )
+    )
+  );
 });

package/atoms/textarea/textarea.js

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -6,24 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 
 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 _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 _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _styledComponents = require("styled-components");
+var _styledComponents = require('styled-components');
 
 var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
-var _propTypes = require("prop-types");
+var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _tokens = require("@desynova-digital/tokens");
+var _tokens = require('@desynova-digital/tokens');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -50,12 +50,13 @@ var Textarea = function Textarea(_ref) {
       maxLength = _ref.maxLength,
       showLengthCount = _ref.showLengthCount,
       type = _ref.type,
-      props = _objectWithoutProperties(_ref, ["defaultValue", "maxLength", "showLengthCount", "type"]);
+      props = _objectWithoutProperties(_ref, ['defaultValue', 'maxLength', 'showLengthCount', 'type']);
 
   if (props.masked) {
     var length = defaultValue ? defaultValue.length : 8;
-    var maskedValue = new Array(length).join("•");
+    var maskedValue = new Array(length).join('•');
     return _react2.default.createElement(Textarea.Element, _extends({
+      theme: props.theme,
       value: props.value,
       type: type
     }, props, {
@@ -74,29 +75,30 @@ var Textarea = function Textarea(_ref) {
     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",
+      'label',
       {
         htmlFor: props.id,
-        className: props.value && props.value.length > 0 ? "floaton" : ""
+        className: props.value && props.value.length > 0 ? 'floaton' : ''
       },
-      "" + props.label + (props.isRequired ? "*" : "")
-    ) : "",
+      '' + 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
     )
   );
@@ -107,22 +109,22 @@ var returnPadding = function returnPadding(props) {
     var digitCount = props.maxLength.toString().length;
     switch (digitCount) {
       case 0:
-        return "7px 0px 2px 0px";
+        return '7px 0px 2px 0px';
       case 1:
-        return "7px 20px 2px 0px";
+        return '7px 20px 2px 0px';
       case 2:
-        return "7px 40px 2px 0px";
+        return '7px 40px 2px 0px';
       case 3:
-        return "7px 65px 2px 0px";
+        return '7px 65px 2px 0px';
       case 4:
-        return "7px 85px 2px 0px";
+        return '7px 85px 2px 0px';
       case 5:
-        return "7px 100px 2px 0px";
+        return '7px 100px 2px 0px';
       default:
-        return "7px 0px 2px 0px";
+        return '7px 0px 2px 0px';
     }
   } else {
-    return "7px 0px 2px 0px";
+    return '7px 0px 2px 0px';
   }
 };
 
@@ -137,9 +139,9 @@ Textarea.Element = _styledComponents2.default.textarea(_templateObject4, functio
 }, function (props) {
   return _tokens.colors[props.theme].inputCommon.color;
 }, function (props) {
-  return props.readOnly ? "not-allowed" : "text";
+  return props.readOnly ? 'not-allowed' : 'text';
 }, function (props) {
-  return returnPadding(props || "");
+  return returnPadding(props || '');
 }, function (props) {
   if (props.error) {
     return _tokens.colors[props.theme].inputError.borderHover;
@@ -153,11 +155,11 @@ Textarea.Element = _styledComponents2.default.textarea(_templateObject4, functio
 }, function (props) {
   return _tokens.colors[props.theme].inputCommon.colorDisabled;
 }, function (props) {
-  return props.label ? "transparent" : function (props) {
+  return props.label ? 'transparent' : function (props) {
     return _tokens.colors[props.theme].inputCommon.placeholder;
   };
 }, function (props) {
-  return props.label ? "0" : "1";
+  return props.label ? '0' : '1';
 }, function (props) {
   return props.placeholder ? function (props) {
     return _tokens.colors[props.theme].inputCommon.placeholder;
@@ -165,7 +167,7 @@ Textarea.Element = _styledComponents2.default.textarea(_templateObject4, functio
     return _tokens.colors[props.theme].inputCommon.placeholder;
   };
 }, function (props) {
-  return props.placeholder ? "1" : "1";
+  return props.placeholder ? '1' : '1';
 });
 
 Textarea.propTypes = {
@@ -191,7 +193,7 @@ Textarea.propTypes = {
   /** The (HTML) maxLength for the textarea. */
   maxLength: _propTypes2.default.number,
 
-  theme: _propTypes2.default.oneOf(["light", "dark"]),
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
 
   row: _propTypes2.default.number,
   showLengthCount: _propTypes2.default.bool
@@ -205,10 +207,10 @@ Textarea.defaultProps = {
   code: false,
   error: null,
   onChange: null,
-  type: "text",
+  type: 'text',
   maxLength: 50,
-  theme: "light",
-  value: "",
+  theme: 'light',
+  value: '',
   rows: 3,
   showLengthCount: false
 };

package/atoms/timeCodeInput/timCodeInput.story.js

@@ -1,34 +1,35 @@
-"use strict";
+'use strict';
 
-var _react = require("react");
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _react3 = require("@storybook/react");
+var _react3 = require('@storybook/react');
 
-var _storyHelpers = require("../../_helpers/story-helpers");
+var _storyHelpers = require('../../_helpers/story-helpers');
 
-var _timeCodeInput = require("./timeCodeInput");
+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 () {
+(0, _react3.storiesOf)('TimeCodeInput').add('dark theme', function () {
   return _react2.default.createElement(
     _storyHelpers.Example,
-    { title: "Appearances" },
+    { title: 'Appearances' },
     _react2.default.createElement(
       _storyHelpers.Stack,
       null,
       _react2.default.createElement(_timeCodeInput2.default, {
-        inputValue: "00:00:00:00" //time code input value
+        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 })
+        playerDuration: '00:23:35:03' || 0
+      })
     )
   );
 });

package/atoms/timeCodeInput/timeCodeInput.js

@@ -1,12 +1,12 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-var _templateObject = _taggedTemplateLiteral(['\n    font-family: SFUIText-Regular;\n    font-size: 12px;\n    color: ', ';\n    text-align: left;\n    padding: 0;\n    border: none;\n    outline: none;\n    background: transparent;\n    &:hover {\n        color: rgb(0 206 198);\n    }\n    width:', ';\n'], ['\n    font-family: SFUIText-Regular;\n    font-size: 12px;\n    color: ', ';\n    text-align: left;\n    padding: 0;\n    border: none;\n    outline: none;\n    background: transparent;\n    &:hover {\n        color: rgb(0 206 198);\n    }\n    width:', ';\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  font-family: SFUIText-Regular;\n  font-size: 12px;\n  color: ', ';\n  text-align: left;\n  padding: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  &:hover {\n    color: ', ';\n  }\n  width: ', ';\n'], ['\n  font-family: SFUIText-Regular;\n  font-size: 12px;\n  color: ', ';\n  text-align: left;\n  padding: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  &:hover {\n    color: ', ';\n  }\n  width: ', ';\n']);
 
 var _react = require('react');
 
@@ -18,117 +18,125 @@ var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
 var _utils = require('../../_helpers/utils');
 
+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 StyledInput = _styledComponents2.default.input(_templateObject, function (props) {
-    return props.isError ? '#FFFFFF' : '#ff0000';
+  return props.isError ? '#FFFFFF' : '#ff0000';
+}, function (props) {
+  return props.theme ? '' + _tokens.colors[props.theme].timeCodeInput.rgbthemeColor : 'rgb(0 206 198)';
 }, function (props) {
-    return props.width ? props.width : '72px';
+  return props.width ? props.width : '72px';
 });
 
 var TimeCodeInput = function TimeCodeInput(_ref) {
-    var inputValue = _ref.inputValue,
-        onFocus = _ref.onFocus,
-        onKeyDown = _ref.onKeyDown,
-        frameRate = _ref.frameRate,
-        initialTime = _ref.initialTime,
-        playerDuration = _ref.playerDuration,
-        elementRef = _ref.elementRef,
-        width = _ref.width;
-
-    var _useState = (0, _react.useState)(inputValue || '00:00:00:00'),
-        _useState2 = _slicedToArray(_useState, 2),
-        customInputValue = _useState2[0],
-        setCustomInputValue = _useState2[1];
-
-    var _useState3 = (0, _react.useState)(true),
-        _useState4 = _slicedToArray(_useState3, 2),
-        isValid = _useState4[0],
-        setIsValid = _useState4[1];
-
-    var onTimePickerChange = function onTimePickerChange(value, e) {
-        var inputTime = value;
-        var formattedTime = inputTime;
-        if (e && e.target && e.target.selectionStart !== undefined) {
-            var cursorPosition = e.target.selectionStart;
-            if ((cursorPosition === 2 || cursorPosition === 5 || cursorPosition === 8) && e.nativeEvent.inputType !== 'insertText' && inputTime.length >= 11) {
-                formattedTime = inputTime;
-            } else {
-                var cleanedTime = inputTime.replace(/[^\d]/g, '');
-                formattedTime = cleanedTime.replace(/(\d{2})(?=\d)/g, '$1:');
-            }
-            e.target.value = formattedTime;
-            // Save the cursor position before modifying the value
-            var newCursorPosition = cursorPosition;
-
-            // Adjust cursor position if necessary
-            if (inputTime.length >= formattedTime.length && inputTime[cursorPosition - 1] === ':') {
-                // If a number before ":" is deleted, keep the cursor next to ":"
-                newCursorPosition = cursorPosition;
-            } else if (cursorPosition % 3 === 0 && cursorPosition !== 0) {
-                // If the cursor is at a position that was just after adding a colon
-                newCursorPosition = cursorPosition + 1;
-            }
-            e.target.setSelectionRange(newCursorPosition, newCursorPosition);
-            setCustomInputValue(e.target.value);
+  var inputValue = _ref.inputValue,
+      onFocus = _ref.onFocus,
+      onKeyDown = _ref.onKeyDown,
+      frameRate = _ref.frameRate,
+      initialTime = _ref.initialTime,
+      playerDuration = _ref.playerDuration,
+      elementRef = _ref.elementRef,
+      width = _ref.width,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === undefined ? 'dark' : _ref$theme;
+
+  var _useState = (0, _react.useState)(inputValue || '00:00:00:00'),
+      _useState2 = _slicedToArray(_useState, 2),
+      customInputValue = _useState2[0],
+      setCustomInputValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isValid = _useState4[0],
+      setIsValid = _useState4[1];
+
+  var onTimePickerChange = function onTimePickerChange(value, e) {
+    var inputTime = value;
+    var formattedTime = inputTime;
+    if (e && e.target && e.target.selectionStart !== undefined) {
+      var cursorPosition = e.target.selectionStart;
+      if ((cursorPosition === 2 || cursorPosition === 5 || cursorPosition === 8) && e.nativeEvent.inputType !== 'insertText' && inputTime.length >= 11) {
+        formattedTime = inputTime;
+      } else {
+        var cleanedTime = inputTime.replace(/[^\d]/g, '');
+        formattedTime = cleanedTime.replace(/(\d{2})(?=\d)/g, '$1:');
+      }
+      e.target.value = formattedTime;
+      // Save the cursor position before modifying the value
+      var newCursorPosition = cursorPosition;
+
+      // Adjust cursor position if necessary
+      if (inputTime.length >= formattedTime.length && inputTime[cursorPosition - 1] === ':') {
+        // If a number before ":" is deleted, keep the cursor next to ":"
+        newCursorPosition = cursorPosition;
+      } else if (cursorPosition % 3 === 0 && cursorPosition !== 0) {
+        // If the cursor is at a position that was just after adding a colon
+        newCursorPosition = cursorPosition + 1;
+      }
+      e.target.setSelectionRange(newCursorPosition, newCursorPosition);
+      setCustomInputValue(e.target.value);
+    }
+  };
+
+  var checkIfTimeValid = function checkIfTimeValid(value) {
+    var isValid = false;
+    if (value) {
+      var timeRegex = new RegExp('^(?:[0-5][0-9]):(?:[0-5][0-9]):(?:[0-5][0-9]):[0-9]{2}$');
+      if (timeRegex.test(value) && parseInt(value.split(':')[3]) <= frameRate && value.split(':')[3].length === 2) {
+        var selectedValueTime = (0, _utils.timeToSeconds)(value, frameRate);
+        var endTime = initialTime + playerDuration;
+        if (selectedValueTime >= initialTime && selectedValueTime <= endTime) {
+          setIsValid(true);
+          return true;
         }
+      }
+    }
+    setIsValid(false);
+    return isValid;
+  };
+
+  (0, _react.useEffect)(function () {
+    var handleEscapeKey = function handleEscapeKey(event) {
+      if (event.key === 'Escape') {
+        setCustomInputValue(inputValue);
+        setIsValid(true); // Reset to original
+        document.activeElement.blur();
+      }
     };
-
-    var checkIfTimeValid = function checkIfTimeValid(value) {
-        var isValid = false;
-        if (value) {
-            var timeRegex = new RegExp("^(?:[0-5][0-9]):(?:[0-5][0-9]):(?:[0-5][0-9]):[0-9]{2}$");
-            if (timeRegex.test(value) && parseInt(value.split(':')[3]) <= frameRate && value.split(':')[3].length === 2) {
-                var selectedValueTime = (0, _utils.timeToSeconds)(value, frameRate);
-                var endTime = initialTime + playerDuration;
-                if (selectedValueTime >= initialTime && selectedValueTime <= endTime) {
-                    setIsValid(true);
-                    return true;
-                }
-            }
-        }
-        setIsValid(false);
-        return isValid;
+    checkIfTimeValid(inputValue);
+    setCustomInputValue(inputValue);
+    document.addEventListener('keydown', handleEscapeKey);
+    return function () {
+      document.removeEventListener('keydown', handleEscapeKey);
     };
+  }, [inputValue]);
 
-    (0, _react.useEffect)(function () {
-        var handleEscapeKey = function handleEscapeKey(event) {
-            if (event.key === 'Escape') {
-                setCustomInputValue(inputValue);
-                setIsValid(true); // Reset to original
-                document.activeElement.blur();
-            }
-        };
-        checkIfTimeValid(inputValue);
-        setCustomInputValue(inputValue);
-        document.addEventListener('keydown', handleEscapeKey);
-        return function () {
-            document.removeEventListener('keydown', handleEscapeKey);
-        };
-    }, [inputValue]);
-
-    (0, _react.useImperativeHandle)(elementRef, function () {
-        return {
-            checkValidity: function checkValidity() {
-                return checkIfTimeValid(customInputValue);
-            }
-        };
-    });
-
-    return _react2.default.createElement(StyledInput, {
-        width: width,
-        ref: elementRef,
-        value: customInputValue,
-        onFocus: onFocus,
-        onKeyDown: onKeyDown,
-        onChange: function onChange(e) {
-            onTimePickerChange(e.target.value, e);checkIfTimeValid(e.target.value);
-        },
-        isError: isValid,
-        maxLength: '11'
-    });
+  (0, _react.useImperativeHandle)(elementRef, function () {
+    return {
+      checkValidity: function checkValidity() {
+        return checkIfTimeValid(customInputValue);
+      }
+    };
+  });
+
+  return _react2.default.createElement(StyledInput, {
+    theme: theme,
+    width: width,
+    ref: elementRef,
+    value: customInputValue,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    onChange: function onChange(e) {
+      onTimePickerChange(e.target.value, e);
+      checkIfTimeValid(e.target.value);
+    },
+    isError: isValid,
+    maxLength: '11'
+  });
 };
 
 exports.default = TimeCodeInput;