@desynova-digital/components 9.1.51 → 9.2.0

package/molecules/richTextInputV2/RichTextInput.storyV2.js

@@ -0,0 +1,197 @@
+"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");
+var _this = void 0;
+(0, _react2.storiesOf)("RichTextInput").add("light theme", function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    type: "text",
+    label: "First Name",
+    onKeyPress: function onKeyPress(e) {
+      return _this.value = e.target.value;
+    },
+    onChange: function onChange(e) {
+      return console.log(e.target.value);
+    },
+    placeholder: "Enter Name max 10",
+    value: "asd",
+    required: true
+  }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    type: "password",
+    label: "Middle Name",
+    minLength: 3,
+    maxLength: 6,
+    placeholder: "Show as password",
+    required: true
+  }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    type: "text",
+    value: "hello",
+    label: "Label and default value",
+    required: true
+  })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    type: "number",
+    placeholder: "number field & no Label",
+    required: true,
+    maxLength: 10
+  }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    type: "number",
+    id: "input-text-1",
+    label: "Label 'For'-'id' prop",
+    placeholder: "No Label & Number Field",
+    required: true,
+    maxLength: 10
+  }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    type: "text",
+    value: "No Label and default value",
+    onChange: function onChange(e) {
+      alert("some Handler code");
+    },
+    placeholder: "Placeholder text",
+    required: true
+  })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    type: "number",
+    label: "number & max 5",
+    placeholder: "max length 5",
+    required: true,
+    minLength: 3,
+    maxLength: 5
+  }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    type: "text",
+    error: "Invalid text",
+    placeholder: "Display error",
+    required: true
+  }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    readOnly: true,
+    type: "text",
+    value: "hello",
+    onChange: function onChange(e) {
+      alert("some Handler code");
+    },
+    placeholder: "Placeholder text",
+    required: true
+  })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    type: "password",
+    value: "this@is$passw0rd",
+    placeholder: "This is password toggle",
+    passwordButton: true
+  }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    label: "Label 'For'-'id' prop",
+    type: "password",
+    value: "this@is$passw0rd",
+    placeholder: "This is password toggle",
+    passwordButton: true
+  }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    label: "Label 'For'-'id' ",
+    error: " this is error",
+    type: "password",
+    value: "this@is$passw0rd",
+    placeholder: "This is password toggle",
+    passwordButton: true
+  })));
+});
+(0, _react2.storiesOf)("RichTextInput").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(RichTextInput, {
+    theme: "dark",
+    type: "text",
+    label: "First Name",
+    showLengthCount: true,
+    value: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m",
+    maxLength: 100,
+    onChange: function onChange(e) {
+      return console.log(e.target.value);
+    },
+    placeholder: "Enter Name max 10",
+    required: true
+  }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    theme: "dark",
+    type: "password",
+    label: "Middle Name",
+    minLength: 3,
+    maxLength: 6,
+    placeholder: "Show as password",
+    required: true
+  }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    theme: "dark",
+    type: "text",
+    value: "hello there i am using",
+    label: "Label and default value",
+    required: true
+  })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    theme: "dark",
+    type: "number",
+    placeholder: "number field & no Label",
+    required: true,
+    maxLength: 10
+  }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    theme: "dark",
+    type: "number",
+    id: "input-text-1",
+    label: "Label 'For'-'id' prop",
+    placeholder: "No Label & Number Field",
+    required: true,
+    maxLength: 10
+  }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    theme: "dark",
+    capitalizeFirstLetter: true,
+    type: "text",
+    value: "no label and default value",
+    onChange: function onChange(e) {
+      alert("some Handler code");
+    },
+    placeholder: "Placeholder text",
+    required: true
+  })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    theme: "dark",
+    type: "number",
+    label: "number & max 5",
+    placeholder: "max length 5",
+    required: true,
+    minLength: 3,
+    maxLength: 5
+  }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    theme: "dark",
+    type: "text",
+    error: "Invalid text",
+    placeholder: "Display error",
+    required: true
+  }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    theme: "dark",
+    readOnly: true,
+    type: "text",
+    value: "hello",
+    onChange: function onChange(e) {
+      alert("some Handler code");
+    },
+    placeholder: "Placeholder text",
+    required: true
+  })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    theme: "dark",
+    type: "password",
+    value: "this@is$passw0rd",
+    placeholder: "This is password toggle",
+    passwordButton: true
+  }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    theme: "dark",
+    label: "Label 'For'-'id' prop",
+    type: "password",
+    value: "this@is$passw0rd",
+    placeholder: "This is password toggle",
+    passwordButton: true
+  }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
+    theme: "dark",
+    label: "Label 'For'-'id' ",
+    error: " this is error",
+    type: "password",
+    value: "this@is$passw0rd",
+    placeholder: "This is password toggle",
+    passwordButton: true
+  })));
+});

package/molecules/richTextInputV2/RichTextInputV2.js

@@ -0,0 +1,369 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _quill = _interopRequireDefault(require("quill"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _tokens = require("@desynova-digital/tokens");
+var _lodash = require("lodash");
+var _quillDelta = _interopRequireDefault(require("quill-delta"));
+var _utils = require("../../_helpers/utils");
+var _excluded = ["maxLength", "defaultValue", "label", "showLengthCount", "errorMessage", "value", "autoFocus", "onChange", "handleSave", "editType", "hideBorder", "type", "onBlur", "placeholder", "isUpdateCase", "isDisabled"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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 RichTextInputDiv = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  i,\n  em {\n    font-style: italic;\n  }\n  strong {\n    font-weight: bold;\n  }\n  .quill-editor-content {\n    white-space: pre-wrap; /* Preserve whitespace and line breaks */\n  }\n  background: transparent;\n  font-family: \"SFUIText-Medium\";\n  position: relative;\n  width: 92%;\n  width: ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n\n  display: block;\n  .ql-container.ql-snow {\n    border: none;\n    position: relative;\n  }\n  .ql-editor {\n    padding: 0;\n    position: relative;\n  }\n\n  // Custom placeholder styles - this will show the placeholder value from props\n  .ql-editor.ql-blank::before {\n    color: #999999 !important;\n    font-style: normal !important;\n    font-family: \"SFUIText-Medium\" !important;\n    font-size: 14px !important;\n    left: 0 !important;\n    right: auto !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n    display: block !important;\n    position: absolute !important;\n    content: attr(data-placeholder) !important;\n    pointer-events: none !important;\n  }\n\n  // Ensure placeholder is visible even when not focused\n  .ql-editor.ql-blank {\n    position: relative;\n\n    &::before {\n      display: block !important;\n      opacity: 1 !important;\n      visibility: visible !important;\n    }\n  }\n\n  > label {\n    color: #999999;\n    font-size: 14px;\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  > div:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n  > div ~ label.floaton {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n"])), function (props) {
+  return props.sleek === "sleek" ? "100%" : "92%";
+}, function (props) {
+  return props.sleek === "sleek" ? "" : "10px";
+}, function (props) {
+  return props.sleek === "sleek" ? "" : "10px";
+});
+var CountWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (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 RichTextInputError = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (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 RichTextInputV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var maxLength = _ref.maxLength,
+    defaultValue = _ref.defaultValue,
+    label = _ref.label,
+    showLengthCount = _ref.showLengthCount,
+    errorMessage = _ref.errorMessage,
+    value = _ref.value,
+    autoFocus = _ref.autoFocus,
+    onChange = _ref.onChange,
+    handleSave = _ref.handleSave,
+    editType = _ref.editType,
+    hideBorder = _ref.hideBorder,
+    type = _ref.type,
+    onBlur = _ref.onBlur,
+    placeholder = _ref.placeholder,
+    isUpdateCase = _ref.isUpdateCase,
+    isDisabled = _ref.isDisabled,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    focus = _useState2[0],
+    setFocus = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    charCount = _useState4[0],
+    setCharCount = _useState4[1];
+  var quillRef = (0, _react.useRef)(null);
+  var quillInstance = (0, _react.useRef)(null);
+  var clickedKey = (0, _react.useRef)("");
+  var handleFocus = function handleFocus() {
+    if (quillInstance.current) {
+      var length = quillInstance.current.getLength();
+      quillInstance.current.setSelection(length - 1, 0);
+    }
+  };
+  var onBlurEvent = function onBlurEvent() {
+    if (quillInstance.current) {
+      quillInstance.current.blur();
+    }
+  };
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      getEditorContent: function getEditorContent() {
+        if (quillInstance.current) {
+          var html = quillInstance.current.root.innerHTML;
+          return changeEmToI(html);
+        }
+        return "";
+      },
+      setEditorContent: function setEditorContent(content) {
+        if (quillInstance.current) {
+          var delta = quillInstance.current.clipboard.convert(content); // Convert HTML to Quill's Delta format
+          quillInstance.current.setContents(delta); // Set the content in Quill editor
+        }
+      },
+      handleFocus: handleFocus,
+      onBlurEvent: onBlurEvent
+    };
+  });
+
+  /**
+   *
+   * @param {*} str
+   * @returns
+   */
+  var changeEmToI = function changeEmToI(str) {
+    var updatedStr = str.replace(/\n/g, "").replace(/<br\s*\/?>/gi, "").replace(/<\/?p>/gi, "").replace(/<[/]?em>/g, function (match) {
+      return match === "<em>" ? "<i>" : "</i>";
+    });
+
+    // Remove surrounding <p> tags if present
+    var regex = /^<p(?:[^>]*?)>(.*?)<\/p>$/;
+    var match = updatedStr.match(regex);
+    return match ? match[1] : updatedStr;
+  };
+
+  //  Initialize quill
+  (0, _react.useEffect)(function () {
+    if (!(quillInstance !== null && quillInstance !== void 0 && quillInstance.current)) {
+      var quill = new _quill["default"](quillRef.current, {
+        theme: "snow",
+        placeholder: placeholder,
+        modules: {
+          toolbar: false,
+          readOnly: isDisabled,
+          keyboard: {
+            bindings: {
+              // This will overwrite the default binding for Tab
+              tab: {
+                key: 9,
+                // Tab key
+                handler: function handler() {
+                  var currentEditor = quillInstance.current.root;
+                  var editors = document.querySelectorAll(".ql-editor");
+                  var currentIndex = Array.from(editors).indexOf(currentEditor);
+                  if (editType === "mainEdit" && currentIndex !== -1 && currentIndex < editors.length - 1) {
+                    editors[currentIndex + 1].focus();
+                  }
+                }
+              },
+              // This will handle Shift + Tab
+              shiftTab: {
+                key: 9,
+                // Tab key
+                shiftKey: true,
+                // Shift key combination
+                handler: function handler() {
+                  var currentEditor = quillInstance.current.root;
+                  var editors = document.querySelectorAll(".ql-editor");
+                  var currentIndex = Array.from(editors).indexOf(currentEditor);
+                  if (editType === "mainEdit" && currentIndex !== -1 && currentIndex > 0) {
+                    editors[currentIndex - 1].focus(); // Move focus to the previous editor
+                  }
+                }
+              }
+            }
+          }
+        }
+      });
+
+      // Ensure plain text is pasted instead of formatted content
+      quill.clipboard.addMatcher(Node.ELEMENT_NODE, function (node, delta) {
+        var plainText = node.innerText || node.textContent; // Extract plain text
+        return new _quillDelta["default"]().insert(plainText); // Insert plain text without formatting
+      });
+      quillInstance.current = quill;
+      if (quill.root) {
+        quill.root.setAttribute("data-placeholder", placeholder);
+      }
+    }
+    var editorRoot = quillInstance.current.root;
+    var updateCharCount = function updateCharCount() {
+      var text = quillInstance.current.getText().replace(/\n/g, "");
+      var characterCount = text.length;
+      setCharCount(characterCount);
+      var selection = quillInstance.current.getSelection(false);
+      if (selection) {
+        if (maxLength && characterCount > maxLength) {
+          var excessCharacters = characterCount - maxLength;
+          var startDeleteIndex = selection.index - excessCharacters;
+          var safeDeleteIndex = Math.max(0, startDeleteIndex);
+          quillInstance.current.deleteText(safeDeleteIndex, excessCharacters);
+          text = quillInstance.current.getText().replace(/\n/g, "");
+          characterCount = text.length;
+        }
+        setCharCount(characterCount);
+        var html = quillInstance.current.getSemanticHTML();
+        html = changeEmToI((0, _utils.cleanHtml)(html));
+        if (onChange && clickedKey.current !== "enter") {
+          onChange({
+            target: {
+              value: html,
+              count: characterCount
+            }
+          });
+        }
+      }
+    };
+    quillInstance.current.on("text-change", updateCharCount);
+    var editorContainer = quillInstance.current.root;
+    editorContainer.classList.add("quill-editor-content");
+    return function () {
+      quillInstance.current.off("text-change", updateCharCount);
+      quillRef.current.innerHTML = "";
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (quillInstance.current) {
+      var editorContainer = quillInstance.current.root;
+      var debouncedHandleSave = (0, _lodash.debounce)(function (html) {
+        handleSave(html);
+      }, 0);
+      var handleKeyDown = function handleKeyDown(event) {
+        if (event.key === "Enter" && !event.altKey) {
+          event.preventDefault();
+          event.stopPropagation();
+          var html = quillInstance.current.getSemanticHTML();
+          html = changeEmToI(html);
+          clickedKey.current = "enter";
+          debouncedHandleSave(html);
+        } else if (event.key === "Backspace" || event.key === "Delete") {
+          clickedKey.current = "backspace";
+        } else {
+          clickedKey.current = "";
+        }
+      };
+      editorContainer.addEventListener("keydown", handleKeyDown);
+      return function () {
+        editorContainer.removeEventListener("keydown", handleKeyDown);
+        debouncedHandleSave.cancel(); // Clean up debounce
+      };
+    }
+  }, [quillInstance.current]);
+  (0, _react.useEffect)(function () {
+    if (quillInstance.current && value !== quillInstance.current.root.innerHTML) {
+      var currentContent = changeEmToI((0, _utils.cleanHtml)(quillInstance.current.root.innerHTML));
+      if (value && currentContent !== value) {
+        var selection = quillInstance.current.getSelection(false);
+        var wasFocused = !!selection;
+        var content = changeEmToI(value) || "";
+        quillInstance.current.clipboard.dangerouslyPasteHTML(content);
+        var textLength = quillInstance.current.getLength();
+        if (wasFocused) {
+          if (selection && selection.index !== 0) {
+            quillInstance.current.setSelection(selection.index, selection.length);
+          } else if (selection && selection.index === 0 && clickedKey.current === "backspace") {
+            quillInstance.current.setSelection(0, 0);
+          } else {
+            quillInstance.current.setSelection(charCount || textLength - 1, (selection === null || selection === void 0 ? void 0 : selection.length) || 0);
+          }
+        } else if (isUpdateCase) {
+          quillInstance.current.blur();
+        }
+      }
+    }
+  }, [value, isUpdateCase]);
+  return /*#__PURE__*/_react["default"].createElement(RichTextInputDiv, {
+    theme: props.theme,
+    sleek: type,
+    hideBorder: hideBorder,
+    inputWidth: props.inputWidth
+  }, /*#__PURE__*/_react["default"].createElement(RichTextEditorContainer, (0, _extends2["default"])({
+    type: "text",
+    value: value,
+    defaultValue: defaultValue
+  }, props, {
+    maxLength: maxLength || "",
+    showLengthCount: showLengthCount || false
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    ref: quillRef
+  })), label && /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: props.id,
+    className: charCount || focus ? "floaton" : ""
+  }, "".concat(label).concat(props.required ? "*" : "")), errorMessage && /*#__PURE__*/_react["default"].createElement(RichTextInputError, {
+    value: value,
+    theme: props.theme,
+    error: props.error
+  }, errorMessage), maxLength && showLengthCount && quillInstance.current && /*#__PURE__*/_react["default"].createElement(CountWrapper, null, charCount, "/", maxLength));
+});
+
+/**
+ *
+ * @param {*} props
+ * @returns
+ */
+var returnPadding = function returnPadding(props) {
+  if (props.sleek = "sleek") {
+    return "0px 0px 4px 0px";
+  }
+  var digitCount = props.maxLength.toString().length;
+  switch (digitCount) {
+    case 0:
+      return "7px 0px 2px 0px";
+    case 1:
+      return "7px 40px 2px 0px";
+    case 2:
+      return "7px 60px 2px 0px";
+    case 3:
+      return "7px 75px 2px 0px";
+    case 4:
+      return "7px 90px 2px 0px";
+    case 5:
+      return "7px 110px 2px 0px";
+    default:
+      return "7px 0px 2px 0px";
+  }
+};
+var RichTextEditorContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 48px;\n  overflow-y: scroll;\n  ::-webkit-scrollbar {\n    width: 0;\n    background: transparent;\n  }\n  white-space: nowrap;\n  width: 100%;\n  text-wrap: wrap;\n  box-sizing: border-box;\n  font-family: \"SFUIText-Medium\";\n  font-size: 14px;\n  color: ", ";\n  border-bottom: ", ";\n\n  display: inline-block;\n  position: relative;\n  padding: ", ";\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:focus-within {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    opacity: ", ";\n    transition: 0.2s ease all;\n  }\n\n  &:focus-within::placeholder {\n    color: ", ";\n    opacity: ", ";\n  }\n"])), function (props) {
+  return props.theme === "light" ? _tokens.colors.light.inputCommon.color : _tokens.colors.dark.inputCommon.color;
+}, function (props) {
+  return !props.hideBorder ? props.theme === "light" ? _tokens.colors.light.inputCommon.color : _tokens.colors.dark.inputCommon.color : "none";
+}, function (props) {
+  return returnPadding(props || "");
+}, function (props) {
+  return props.theme === "light" ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
+}, function (props) {
+  return props.theme === "light" ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
+}, function (props) {
+  return props.theme === "light" ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
+}, function (props) {
+  return props.label ? "0" : "1";
+}, function (props) {
+  return props.theme === "light" ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
+}, function (props) {
+  return props.label ? "1" : "1";
+});
+RichTextInputV2.propTypes = {
+  masked: _propTypes["default"].bool,
+  /** Make input readOnly if it does not validate constraint */
+  readOnly: _propTypes["default"].bool,
+  /** Use when the expected input is code */
+  code: _propTypes["default"].bool,
+  /** Pass hasError to show error state */
+  hasError: _propTypes["default"].bool,
+  /** Pass error string directly to show error state */
+  error: _propTypes["default"].string,
+  /** onChange transparently passed to the input */
+  onChange: _propTypes["default"].func,
+  onKeyDownFn: _propTypes["default"].func,
+  handleSave: _propTypes["default"].func,
+  /** Text to display when the input is empty */
+  placeholder: _propTypes["default"].string,
+  /** The default value for the field */
+  defaultValue: _propTypes["default"].string,
+  /** The (HTML) type for the input. */
+  type: _propTypes["default"].string,
+  value: _propTypes["default"].string,
+  /** The (HTML) maxLength for the input. */
+  maxLength: _propTypes["default"].number,
+  inputWidth: _propTypes["default"].number,
+  showLengthCount: _propTypes["default"].bool,
+  label: _propTypes["default"].string,
+  errorMessage: _propTypes["default"].string,
+  editType: _propTypes["default"].string,
+  id: _propTypes["default"].string,
+  simpleEdit: _propTypes["default"].bool,
+  required: _propTypes["default"].bool,
+  autoFocus: _propTypes["default"].bool,
+  theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
+  fieldType: _propTypes["default"].oneOf(["inputField", "textArea"])
+};
+RichTextInputV2.defaultProps = {
+  autoFocus: false,
+  fieldType: "textArea",
+  readOnly: false,
+  code: false,
+  error: null,
+  onChange: null,
+  type: "text",
+  theme: "light",
+  showLengthCount: false,
+  simpleEdit: false
+};
+var _default = exports["default"] = RichTextInputV2;

package/molecules/richTextInputV2/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _RichTextInputV = _interopRequireDefault(require("./RichTextInputV2"));
+var _default = exports["default"] = _RichTextInputV["default"];

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@desynova-digital/components",
-  "version": "9.1.51",
+  "version": "9.2.0",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "9.1.51",
+    "@desynova-digital/tokens": "9.2.0",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },