@onesy/ui-react 1.0.172 → 1.0.174

package/esm/SmartTextField/SmartTextField.js

@@ -1,12 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "version", "size", "valueDefault", "value", "inputProps", "onChange", "error", "name", "placeholder", "edit", "mention", "multiline", "onChangeMention", "optionsMention", "error", "helperText", "mentionLabel", "onKeyDown", "pasteText", "readOnly", "additional", "miniMenuExtended", "HelperTextProps", "ColorTextFieldProps", "className"],
+const _excluded = ["ref", "tonal", "color", "version", "size", "valueDefault", "value", "inputProps", "onChange", "error", "name", "placeholder", "edit", "mention", "multiline", "onChangeMention", "optionsMention", "error", "helperText", "mentionLabel", "onKeyDown", "pasteText", "readOnly", "additional", "miniMenuExtended", "HelperTextProps", "ColorTextFieldProps", "className"],
   _excluded2 = ["color"],
-  _excluded3 = ["version", "onUpdate", "onClose"],
-  _excluded4 = ["label", "labelButton", "value", "onChange", "onClick", "placeholder", "InputComponent", "InputProps"],
+  _excluded3 = ["ref", "version", "onUpdate", "onClose"],
+  _excluded4 = ["ref", "label", "labelButton", "value", "onChange", "onClick", "placeholder", "InputComponent", "InputProps"],
   _excluded5 = ["open", "element", "anchorElement", "onClose", "children"],
-  _excluded6 = ["open", "name", "children"];
+  _excluded6 = ["ref", "open", "name", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -47,6 +46,7 @@ import ToggleButtonsElement from '../ToggleButtons';
 import MenuElement from '../Menu';
 import DividerElement from '../Divider';
 import { sanitize, caret, keyboardStyleCommands, staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     minHeight: '20px',
@@ -147,7 +147,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-SmartTextField'
 });
-const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const SmartTextField = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySmartTextField?.props?.default), props_);
@@ -169,6 +169,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Divider = theme?.elements?.Divider || DividerElement;
   const ColorTextField = theme?.elements?.ColorTextField || ColorTextFieldElement;
   const {
+      ref,
       tonal = true,
       color = 'default',
       version = 'text',
@@ -582,23 +583,26 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, [error_]);
   const label = () => is('function', mentionLabel) ? mentionLabel(optionsMention, {
     addTag
-  }) : /*#__PURE__*/React.createElement(Line, {
-    className: classes.menu
-  }, /*#__PURE__*/React.createElement(List, {
-    size: "small",
-    className: classes.list
-  }, optionsMention?.map((item_0, index) => /*#__PURE__*/React.createElement(ListItem, {
-    key: index,
-    start: /*#__PURE__*/React.createElement(Avatar, {
-      color: stringToColor(item_0.name),
-      size: "small"
-    }, item_0.name?.slice(0, 1)),
-    primary: /*#__PURE__*/React.createElement(Type, {
-      version: "l3"
-    }, item_0.name),
-    onClick: () => addTag(item_0),
-    button: true
-  }))));
+  }) : /*#__PURE__*/_jsx(Line, {
+    className: classes.menu,
+    children: /*#__PURE__*/_jsx(List, {
+      size: "small",
+      className: classes.list,
+      children: optionsMention?.map((item_0, index) => /*#__PURE__*/_jsx(ListItem, {
+        start: /*#__PURE__*/_jsx(Avatar, {
+          color: stringToColor(item_0.name),
+          size: "small",
+          children: item_0.name?.slice(0, 1)
+        }),
+        primary: /*#__PURE__*/_jsx(Type, {
+          version: "l3",
+          children: item_0.name
+        }),
+        onClick: () => addTag(item_0),
+        button: true
+      }, index))
+    })
+  });
   const paste = async () => {
     const valueClipboard = await navigator.clipboard.read();
     if (valueClipboard) {
@@ -795,15 +799,16 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
         color: color_
       } = propsItem,
       other_ = _objectWithoutProperties(propsItem, _excluded2);
-    return /*#__PURE__*/React.createElement("span", _extends({
+    return /*#__PURE__*/_jsx("span", _objectSpread({
       className: classNames([staticClassName('RichTextEditor', theme) && ['onesy-RichTextEditor-palette-item'], classes.paletteItem]),
       style: {
         background: color_
       }
     }, other_));
   };
-  const Palette = /*#__PURE__*/React.forwardRef((propsPalette, ref_) => {
+  const Palette = propsPalette => {
     const {
+        ref: ref_,
         version: version_,
         onUpdate: onUpdate_,
         onClose
@@ -818,7 +823,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onUpdate_(itemColor);
       onClose();
     };
-    return /*#__PURE__*/React.createElement(Line, _extends({
+    return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
       ref: ref_,
       gap: 1,
       direction: "column",
@@ -826,76 +831,81 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed',
       Component: Surface,
       className: classNames([staticClassName('RichTextEditor', theme) && ['onesy-RichTextEditor-palette'], classes.palette])
-    }, other__0), /*#__PURE__*/React.createElement(Line, {
-      gap: 0.5,
-      style: {
-        maxHeight: 136,
-        padding: '10px 10px 0',
-        overflow: 'hidden auto'
-      }
-    }, /*#__PURE__*/React.createElement(Line, {
-      gap: 0.5,
-      direction: "row",
-      style: {
-        width: '100%'
-      }
-    }, /*#__PURE__*/React.createElement(PaletteItem, {
-      color: "#000000",
-      onClick: () => {
-        onUpdateColor('#000000');
-      }
-    }), /*#__PURE__*/React.createElement(PaletteItem, {
-      color: "#ffffff",
-      onClick: () => {
-        onUpdateColor('#ffffff');
-      }
-    })), Object.keys(colors).filter(item_21 => !['black', 'white'].includes(item_21)).map((item_22, index_0) => /*#__PURE__*/React.createElement(Line, {
-      key: index_0,
-      gap: 0.5,
-      direction: "row",
-      style: {
-        width: '100%'
-      }
-    }, Object.keys(colors[item_22]).map((item_, index_) => /*#__PURE__*/React.createElement(PaletteItem, {
-      key: index_,
-      color: colors[item_22][item_],
-      onClick: () => {
-        onUpdateColor(colors[item_22][item_]);
-      }
-    }))))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Line, {
-      gap: 0.5,
-      direction: "row",
-      align: "center",
-      fullWidth: true,
-      style: {
-        padding: '0px 10px 10px'
-      }
-    }, /*#__PURE__*/React.createElement(ColorTextField, _extends({
-      tonal: tonal,
-      color: color,
-      name: l('Custom color'),
-      version: "outlined",
-      size: "small",
-      value: refs.inputValues.current[version_],
-      onChange: valueNew_2 => updateInputValues(version_, valueNew_2)
-    }, ColorTextFieldProps, {
-      className: classNames([staticClassName('RichTextEditor', theme) && ['onesy-RichTextEditor-text-field-color'], ColorTextFieldProps?.className, classes.textFieldColor])
-    })), /*#__PURE__*/React.createElement(Button, {
-      tonal: tonal,
-      color: "inherit",
-      version: "text",
-      size: "small",
-      onClick: () => {
-        if (refs.range.current) {
-          const selection__2 = refs.rootWindow.current.getSelection();
-          selection__2.removeAllRanges();
-          selection__2.addRange(refs.range.current);
-        }
-        onUpdate_(refs.inputValues.current[version_]);
-        onClose();
-      }
-    }, "Apply")));
-  });
+    }, other__0), {}, {
+      children: [/*#__PURE__*/_jsxs(Line, {
+        gap: 0.5,
+        style: {
+          maxHeight: 136,
+          padding: '10px 10px 0',
+          overflow: 'hidden auto'
+        },
+        children: [/*#__PURE__*/_jsxs(Line, {
+          gap: 0.5,
+          direction: "row",
+          style: {
+            width: '100%'
+          },
+          children: [/*#__PURE__*/_jsx(PaletteItem, {
+            color: "#000000",
+            onClick: () => {
+              onUpdateColor('#000000');
+            }
+          }), /*#__PURE__*/_jsx(PaletteItem, {
+            color: "#ffffff",
+            onClick: () => {
+              onUpdateColor('#ffffff');
+            }
+          })]
+        }), Object.keys(colors).filter(item_21 => !['black', 'white'].includes(item_21)).map((item_22, index_0) => /*#__PURE__*/_jsx(Line, {
+          gap: 0.5,
+          direction: "row",
+          style: {
+            width: '100%'
+          },
+          children: Object.keys(colors[item_22]).map((item_, index_) => /*#__PURE__*/_jsx(PaletteItem, {
+            color: colors[item_22][item_],
+            onClick: () => {
+              onUpdateColor(colors[item_22][item_]);
+            }
+          }, index_))
+        }, index_0))]
+      }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(Line, {
+        gap: 0.5,
+        direction: "row",
+        align: "center",
+        fullWidth: true,
+        style: {
+          padding: '0px 10px 10px'
+        },
+        children: [/*#__PURE__*/_jsx(ColorTextField, _objectSpread(_objectSpread({
+          tonal: tonal,
+          color: color,
+          name: l('Custom color'),
+          version: "outlined",
+          size: "small",
+          value: refs.inputValues.current[version_],
+          onChange: valueNew_2 => updateInputValues(version_, valueNew_2)
+        }, ColorTextFieldProps), {}, {
+          className: classNames([staticClassName('RichTextEditor', theme) && ['onesy-RichTextEditor-text-field-color'], ColorTextFieldProps?.className, classes.textFieldColor])
+        })), /*#__PURE__*/_jsx(Button, {
+          tonal: tonal,
+          color: "inherit",
+          version: "text",
+          size: "small",
+          onClick: () => {
+            if (refs.range.current) {
+              const selection__2 = refs.rootWindow.current.getSelection();
+              selection__2.removeAllRanges();
+              selection__2.addRange(refs.range.current);
+            }
+            onUpdate_(refs.inputValues.current[version_]);
+            onClose();
+          },
+          children: "Apply"
+        })]
+      })]
+    }));
+  };
   const AppendProps = {
     padding: [14, 14]
   };
@@ -915,8 +925,9 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const ToggleButtonProps = {
     size: 'small'
   };
-  const Input = /*#__PURE__*/React.forwardRef((propsInput, ref__0) => {
+  const Input = propsInput => {
     const {
+        ref: ref__0,
         label: labelInput,
         labelButton,
         value: value__,
@@ -927,41 +938,44 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
         InputProps
       } = propsInput,
       other__1 = _objectWithoutProperties(propsInput, _excluded4);
-    return /*#__PURE__*/React.createElement(Line, _extends({
+    return /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
       ref: ref__0,
       gap: 1,
       direction: "column",
       color: "themed",
       Component: Surface
-    }, other__1, {
-      className: classNames([other__1?.className, classes.inputWrapper])
-    }), /*#__PURE__*/React.createElement(Line, {
-      gap: 0.5,
-      direction: "row",
-      align: "center",
-      style: {
-        width: '100%'
-      }
-    }, /*#__PURE__*/React.createElement(InputComponent, _extends({
-      name: labelInput,
-      version: "outlined",
-      size: "small",
-      valueDefault: value__,
-      onChange: onChange__,
-      placeholder: placeholderInputProps,
-      flex: true
-    }, InputProps, {
-      style: {
-        width: 'unset',
-        flex: '1 1 auto'
-      }
-    })), /*#__PURE__*/React.createElement(Button, {
-      color: "inherit",
-      version: "text",
-      size: "small",
-      onClick: onClick
-    }, labelButton)));
-  });
+    }, other__1), {}, {
+      className: classNames([other__1?.className, classes.inputWrapper]),
+      children: /*#__PURE__*/_jsxs(Line, {
+        gap: 0.5,
+        direction: "row",
+        align: "center",
+        style: {
+          width: '100%'
+        },
+        children: [/*#__PURE__*/_jsx(InputComponent, _objectSpread(_objectSpread({
+          name: labelInput,
+          version: "outlined",
+          size: "small",
+          valueDefault: value__,
+          onChange: onChange__,
+          placeholder: placeholderInputProps,
+          flex: true
+        }, InputProps), {}, {
+          style: {
+            width: 'unset',
+            flex: '1 1 auto'
+          }
+        })), /*#__PURE__*/_jsx(Button, {
+          color: "inherit",
+          version: "text",
+          size: "small",
+          onClick: onClick,
+          children: labelButton
+        })]
+      })
+    }));
+  };
   const WrapperAppend = propsWrapper => {
     const {
         open: open_,
@@ -971,245 +985,300 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
         children: childrenWrapperAppend
       } = propsWrapper,
       other__2 = _objectWithoutProperties(propsWrapper, _excluded5);
-    return /*#__PURE__*/React.createElement(Append, _extends({
+    return /*#__PURE__*/_jsx(Append, _objectSpread(_objectSpread({
       open: open_,
-      element: /*#__PURE__*/React.createElement("div", {
-        className: classNames([staticClassName('SmartTextField', theme) && ['onesy-SmartTextField-mini-menu-additional'], classes.textMiniMenuAdditionalMenu])
-      }, /*#__PURE__*/React.createElement(Fade, {
-        in: open_,
-        add: true
-      }, /*#__PURE__*/React.cloneElement(element_1))),
+      element: /*#__PURE__*/_jsx("div", {
+        className: classNames([staticClassName('SmartTextField', theme) && ['onesy-SmartTextField-mini-menu-additional'], classes.textMiniMenuAdditionalMenu]),
+        children: /*#__PURE__*/_jsx(Fade, {
+          in: open_,
+          add: true,
+          children: /*#__PURE__*/React.cloneElement(element_1)
+        })
+      }),
       anchorElement: anchorElement,
       portal: true,
       alignment: "center",
       position: "bottom"
-    }, AppendProps), /*#__PURE__*/React.cloneElement(childrenWrapperAppend, _objectSpread(_objectSpread({}, other__2), childrenWrapperAppend.props)));
+    }, AppendProps), {}, {
+      children: /*#__PURE__*/React.cloneElement(childrenWrapperAppend, _objectSpread(_objectSpread({}, other__2), childrenWrapperAppend.props))
+    }));
   };
-  const WrapperToggleButton = /*#__PURE__*/React.forwardRef((propsWrapperToggleButton, ref__1) => {
+  const WrapperToggleButton = propsWrapperToggleButton => {
     const {
+        ref: ref__1,
         open: open__0,
         name: nameWrapperToogleButton,
         children: childrenWrapperToggleButton
       } = propsWrapperToggleButton,
       other__3 = _objectWithoutProperties(propsWrapperToggleButton, _excluded6);
-    return /*#__PURE__*/React.createElement(Tooltip, _extends({
+    return /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
       ref: ref__1,
       open: open__0 !== undefined ? open__0 : undefined,
       name: nameWrapperToogleButton
-    }, TooltipProps), /*#__PURE__*/React.cloneElement(childrenWrapperToggleButton, _objectSpread(_objectSpread({}, other__3), childrenWrapperToggleButton.props)));
-  });
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/React.cloneElement(childrenWrapperToggleButton, _objectSpread(_objectSpread({}, other__3), childrenWrapperToggleButton.props))
+    }));
+  };
   const updateElements = {
-    'italic': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      name: l('Italic')
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('italic'),
-      onClick: textMethod('italic')
-    }), /*#__PURE__*/React.createElement(IconMaterialFormatItalic, IconProps))),
-    'underline': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      name: l('Underline')
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('underline'),
-      onClick: textMethod('underline')
-    }), /*#__PURE__*/React.createElement(IconMaterialFormatUnderlined, IconProps))),
-    'bold': /*#__PURE__*/React.createElement(WrapperToggleButton, {
+    'italic': /*#__PURE__*/_jsx(WrapperToggleButton, {
+      name: l('Italic'),
+      children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('italic'),
+        onClick: textMethod('italic'),
+        children: /*#__PURE__*/_jsx(IconMaterialFormatItalic, _objectSpread({}, IconProps))
+      }))
+    }),
+    'underline': /*#__PURE__*/_jsx(WrapperToggleButton, {
+      name: l('Underline'),
+      children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('underline'),
+        onClick: textMethod('underline'),
+        children: /*#__PURE__*/_jsx(IconMaterialFormatUnderlined, _objectSpread({}, IconProps))
+      }))
+    }),
+    'bold': /*#__PURE__*/_jsx(WrapperToggleButton, {
       name: l('Bold'),
-      onClick: textMethod('bold')
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('bold')
-    }), /*#__PURE__*/React.createElement(IconMaterialFormatBold, IconProps))),
-    'superscript': /*#__PURE__*/React.createElement(WrapperToggleButton, {
+      onClick: textMethod('bold'),
+      children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('bold'),
+        children: /*#__PURE__*/_jsx(IconMaterialFormatBold, _objectSpread({}, IconProps))
+      }))
+    }),
+    'superscript': /*#__PURE__*/_jsx(WrapperToggleButton, {
       name: l('Superscript'),
-      onClick: textMethod('superscript')
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('superscript')
-    }), /*#__PURE__*/React.createElement(IconMaterialSuperscript, IconProps))),
-    'subscript': /*#__PURE__*/React.createElement(WrapperToggleButton, {
+      onClick: textMethod('superscript'),
+      children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('superscript'),
+        children: /*#__PURE__*/_jsx(IconMaterialSuperscript, _objectSpread({}, IconProps))
+      }))
+    }),
+    'subscript': /*#__PURE__*/_jsx(WrapperToggleButton, {
       name: l('Subscript'),
-      onClick: textMethod('subscript')
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('subscript')
-    }), /*#__PURE__*/React.createElement(IconMaterialSubscript, IconProps))),
-    'strike-line': /*#__PURE__*/React.createElement(WrapperToggleButton, {
+      onClick: textMethod('subscript'),
+      children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('subscript'),
+        children: /*#__PURE__*/_jsx(IconMaterialSubscript, _objectSpread({}, IconProps))
+      }))
+    }),
+    'strike-line': /*#__PURE__*/_jsx(WrapperToggleButton, {
       name: l('Strike Line'),
-      onClick: textMethod('strike-line')
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('strike-line')
-    }), /*#__PURE__*/React.createElement(IconMaterialStrikethroughS, IconProps))),
-    'link-add': /*#__PURE__*/React.createElement(WrapperAppend, {
+      onClick: textMethod('strike-line'),
+      children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('strike-line'),
+        children: /*#__PURE__*/_jsx(IconMaterialStrikethroughS, _objectSpread({}, IconProps))
+      }))
+    }),
+    'link-add': /*#__PURE__*/_jsx(WrapperAppend, {
       open: refs.open.current.linkMiniMenu,
       anchorElement: refs.miniMenuElements.linkAdd,
-      element: /*#__PURE__*/React.createElement(ClickListener, {
+      element: /*#__PURE__*/_jsx(ClickListener, {
         onClickOutside: () => updateOpen('linkMiniMenu', false),
-        include: [refs.miniMenuElements.linkAdd]
-      }, /*#__PURE__*/React.createElement(Input, {
-        ref: refs.miniMenuElements.linkAddInput,
-        name: l('Link'),
-        labelButton: l('Add'),
-        value: refs.inputValues.current.link,
-        onChange: valueNew_3 => updateInputValues('link', valueNew_3),
-        placeholder: l('URL'),
-        onClick: () => {
-          if (refs.range.current) {
-            const selection__3 = refs.rootWindow.current.getSelection();
-            if (!selection__3) return;
-            selection__3.removeAllRanges();
-            selection__3.addRange(refs.range.current);
-          }
-          textMethod('link-add')(refs.inputValues.current.link);
-          updateOpen('linkMiniMenu', false);
-          updateInputValues('link', '');
-        },
-        className: classes.input
+        include: [refs.miniMenuElements.linkAdd],
+        children: /*#__PURE__*/_jsx(Input, {
+          ref: refs.miniMenuElements.linkAddInput,
+          name: l('Link'),
+          labelButton: l('Add'),
+          value: refs.inputValues.current.link,
+          onChange: valueNew_3 => updateInputValues('link', valueNew_3),
+          placeholder: l('URL'),
+          onClick: () => {
+            if (refs.range.current) {
+              const selection__3 = refs.rootWindow.current.getSelection();
+              if (!selection__3) return;
+              selection__3.removeAllRanges();
+              selection__3.addRange(refs.range.current);
+            }
+            textMethod('link-add')(refs.inputValues.current.link);
+            updateOpen('linkMiniMenu', false);
+            updateInputValues('link', '');
+          },
+          className: classes.input
+        })
+      }),
+      children: /*#__PURE__*/_jsx(WrapperToggleButton, {
+        name: l('Insert Link'),
+        open: refs.open.current.linkMiniMenu ? false : undefined,
+        children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({
+          ref: refs.miniMenuElements.linkAdd
+        }, ToggleButtonProps), {}, {
+          selected: refs.open.current.linkMiniMenu,
+          onClick: () => updateOpen('linkMiniMenu', !refs.open.current.linkMiniMenu),
+          children: /*#__PURE__*/_jsx(IconMaterialAddLink, _objectSpread({}, IconProps))
+        }))
+      })
+    }),
+    'link-remove': /*#__PURE__*/_jsx(WrapperToggleButton, {
+      name: l('Remove Link'),
+      children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        onClick: textMethod('link-remove'),
+        children: /*#__PURE__*/_jsx(IconMaterialLinkOff, _objectSpread({}, IconProps))
       }))
-    }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      name: l('Insert Link'),
-      open: refs.open.current.linkMiniMenu ? false : undefined
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({
-      ref: refs.miniMenuElements.linkAdd
-    }, ToggleButtonProps, {
-      selected: refs.open.current.linkMiniMenu,
-      onClick: () => updateOpen('linkMiniMenu', !refs.open.current.linkMiniMenu)
-    }), /*#__PURE__*/React.createElement(IconMaterialAddLink, IconProps)))),
-    'link-remove': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      name: l('Remove Link')
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
-      onClick: textMethod('link-remove')
-    }), /*#__PURE__*/React.createElement(IconMaterialLinkOff, IconProps))),
-    'font-color': /*#__PURE__*/React.createElement(WrapperAppend, {
+    }),
+    'font-color': /*#__PURE__*/_jsx(WrapperAppend, {
       open: refs.open.current.color,
       anchorElement: refs.elements.color.current,
-      element: /*#__PURE__*/React.createElement(ClickListener, {
+      element: /*#__PURE__*/_jsx(ClickListener, {
         onClickOutside: () => updateOpen('color', false),
-        include: [refs.elements.color.current]
-      }, /*#__PURE__*/React.createElement(Palette, {
-        version: "font-color",
-        onClose: () => updateOpen('color', false),
-        onUpdate: () => {
-          if (refs.range.current) {
-            const selection__4 = refs.rootWindow.current.getSelection();
-            selection__4.removeAllRanges();
-            selection__4.addRange(refs.range.current);
+        include: [refs.elements.color.current],
+        children: /*#__PURE__*/_jsx(Palette, {
+          version: "font-color",
+          onClose: () => updateOpen('color', false),
+          onUpdate: () => {
+            if (refs.range.current) {
+              const selection__4 = refs.rootWindow.current.getSelection();
+              selection__4.removeAllRanges();
+              selection__4.addRange(refs.range.current);
+            }
+            textMethod('font-color');
           }
-          textMethod('font-color');
-        }
-      }))
-    }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      name: l('Text Color'),
-      open: refs.open.current.color ? false : undefined
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({
-      ref: refs.elements.color
-    }, ToggleButtonProps, {
-      selected: refs.open.current.color,
-      onClick: () => updateOpen('color', !refs.open.current.color)
-    }), /*#__PURE__*/React.createElement(IconMaterialFormatColorText, IconProps)))),
-    'font-color-mini-menu': /*#__PURE__*/React.createElement(WrapperAppend, {
+        })
+      }),
+      children: /*#__PURE__*/_jsx(WrapperToggleButton, {
+        name: l('Text Color'),
+        open: refs.open.current.color ? false : undefined,
+        children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({
+          ref: refs.elements.color
+        }, ToggleButtonProps), {}, {
+          selected: refs.open.current.color,
+          onClick: () => updateOpen('color', !refs.open.current.color),
+          children: /*#__PURE__*/_jsx(IconMaterialFormatColorText, _objectSpread({}, IconProps))
+        }))
+      })
+    }),
+    'font-color-mini-menu': /*#__PURE__*/_jsx(WrapperAppend, {
       open: refs.open.current.colorMiniMenu,
       anchorElement: refs.miniMenuElements.color,
-      element: /*#__PURE__*/React.createElement(ClickListener, {
+      element: /*#__PURE__*/_jsx(ClickListener, {
         onClickOutside: () => updateOpen('colorMiniMenu', false),
-        include: [refs.miniMenuElements.color]
-      }, /*#__PURE__*/React.createElement(Palette, {
-        ref: refs.miniMenuElements.colorPalette,
-        version: "font-color",
-        onClose: () => updateOpen('colorMiniMenu', false),
-        onUpdate: textMethod('font-color')
-      }))
-    }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      name: l('Text Color'),
-      open: refs.open.current.colorMiniMenu ? false : undefined
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({
-      ref: refs.miniMenuElements.color
-    }, ToggleButtonProps, {
-      selected: refs.open.current.colorMiniMenu,
-      onClick: () => updateOpen('colorMiniMenu', !refs.open.current.colorMiniMenu)
-    }), /*#__PURE__*/React.createElement(IconMaterialFormatColorText, IconProps)))),
-    'font-background': /*#__PURE__*/React.createElement(WrapperAppend, {
+        include: [refs.miniMenuElements.color],
+        children: /*#__PURE__*/_jsx(Palette, {
+          ref: refs.miniMenuElements.colorPalette,
+          version: "font-color",
+          onClose: () => updateOpen('colorMiniMenu', false),
+          onUpdate: textMethod('font-color')
+        })
+      }),
+      children: /*#__PURE__*/_jsx(WrapperToggleButton, {
+        name: l('Text Color'),
+        open: refs.open.current.colorMiniMenu ? false : undefined,
+        children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({
+          ref: refs.miniMenuElements.color
+        }, ToggleButtonProps), {}, {
+          selected: refs.open.current.colorMiniMenu,
+          onClick: () => updateOpen('colorMiniMenu', !refs.open.current.colorMiniMenu),
+          children: /*#__PURE__*/_jsx(IconMaterialFormatColorText, _objectSpread({}, IconProps))
+        }))
+      })
+    }),
+    'font-background': /*#__PURE__*/_jsx(WrapperAppend, {
       open: refs.open.current.background,
       anchorElement: refs.elements.background.current,
-      element: /*#__PURE__*/React.createElement(ClickListener, {
+      element: /*#__PURE__*/_jsx(ClickListener, {
         onClickOutside: () => updateOpen('background', false),
-        include: [refs.elements.background.current]
-      }, /*#__PURE__*/React.createElement(Palette, {
-        version: "font-background",
-        onClose: () => updateOpen('background', false),
-        onUpdate: textMethod('font-background')
-      }))
-    }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      name: l('Background Color'),
-      open: refs.open.current.background ? false : undefined
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({
-      ref: refs.elements.background
-    }, ToggleButtonProps, {
-      selected: refs.open.current.background,
-      onClick: () => updateOpen('background', !refs.open.current.background)
-    }), /*#__PURE__*/React.createElement(IconMaterialFormatColorFill, IconProps)))),
-    'font-background-mini-menu': /*#__PURE__*/React.createElement(WrapperAppend, {
+        include: [refs.elements.background.current],
+        children: /*#__PURE__*/_jsx(Palette, {
+          version: "font-background",
+          onClose: () => updateOpen('background', false),
+          onUpdate: textMethod('font-background')
+        })
+      }),
+      children: /*#__PURE__*/_jsx(WrapperToggleButton, {
+        name: l('Background Color'),
+        open: refs.open.current.background ? false : undefined,
+        children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({
+          ref: refs.elements.background
+        }, ToggleButtonProps), {}, {
+          selected: refs.open.current.background,
+          onClick: () => updateOpen('background', !refs.open.current.background),
+          children: /*#__PURE__*/_jsx(IconMaterialFormatColorFill, _objectSpread({}, IconProps))
+        }))
+      })
+    }),
+    'font-background-mini-menu': /*#__PURE__*/_jsx(WrapperAppend, {
       open: refs.open.current.backgroundMiniMenu,
       anchorElement: refs.miniMenuElements.background,
-      element: /*#__PURE__*/React.createElement(ClickListener, {
+      element: /*#__PURE__*/_jsx(ClickListener, {
         onClickOutside: () => updateOpen('backgroundMiniMenu', false),
-        include: [refs.miniMenuElements.background]
-      }, /*#__PURE__*/React.createElement(Palette, {
-        ref: refs.miniMenuElements.backgroundPalette,
-        version: "font-background",
-        onClose: () => updateOpen('backgroundMiniMenu', false),
-        onUpdate: textMethod('font-background')
+        include: [refs.miniMenuElements.background],
+        children: /*#__PURE__*/_jsx(Palette, {
+          ref: refs.miniMenuElements.backgroundPalette,
+          version: "font-background",
+          onClose: () => updateOpen('backgroundMiniMenu', false),
+          onUpdate: textMethod('font-background')
+        })
+      }),
+      children: /*#__PURE__*/_jsx(WrapperToggleButton, {
+        name: l('Text Color'),
+        open: refs.open.current.backgroundMiniMenu ? false : undefined,
+        children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({
+          ref: refs.miniMenuElements.background
+        }, ToggleButtonProps), {}, {
+          selected: refs.open.current.backgroundMiniMenu,
+          onClick: () => updateOpen('backgroundMiniMenu', !refs.open.current.backgroundMiniMenu),
+          children: /*#__PURE__*/_jsx(IconMaterialFormatColorFill, _objectSpread({}, IconProps))
+        }))
+      })
+    }),
+    'align-left': /*#__PURE__*/_jsx(WrapperToggleButton, {
+      name: l('Align Left'),
+      children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('align-left'),
+        onClick: textMethod('align-left'),
+        children: /*#__PURE__*/_jsx(IconMaterialFormatAlignLeft, _objectSpread({}, IconProps))
+      }))
+    }),
+    'align-center': /*#__PURE__*/_jsx(WrapperToggleButton, {
+      name: l('Align Center'),
+      children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('align-center'),
+        onClick: textMethod('align-center'),
+        children: /*#__PURE__*/_jsx(IconMaterialFormatAlignCenter, _objectSpread({}, IconProps))
+      }))
+    }),
+    'align-right': /*#__PURE__*/_jsx(WrapperToggleButton, {
+      name: l('Align Right'),
+      children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('align-right'),
+        onClick: textMethod('align-right'),
+        children: /*#__PURE__*/_jsx(IconMaterialFormatAlignRight, _objectSpread({}, IconProps))
       }))
-    }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      name: l('Text Color'),
-      open: refs.open.current.backgroundMiniMenu ? false : undefined
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({
-      ref: refs.miniMenuElements.background
-    }, ToggleButtonProps, {
-      selected: refs.open.current.backgroundMiniMenu,
-      onClick: () => updateOpen('backgroundMiniMenu', !refs.open.current.backgroundMiniMenu)
-    }), /*#__PURE__*/React.createElement(IconMaterialFormatColorFill, IconProps)))),
-    'align-left': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      name: l('Align Left')
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('align-left'),
-      onClick: textMethod('align-left')
-    }), /*#__PURE__*/React.createElement(IconMaterialFormatAlignLeft, IconProps))),
-    'align-center': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      name: l('Align Center')
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('align-center'),
-      onClick: textMethod('align-center')
-    }), /*#__PURE__*/React.createElement(IconMaterialFormatAlignCenter, IconProps))),
-    'align-right': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      name: l('Align Right')
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('align-right'),
-      onClick: textMethod('align-right')
-    }), /*#__PURE__*/React.createElement(IconMaterialFormatAlignRight, IconProps))),
-    'align-justify': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      name: l('Align Justify')
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('align-justify'),
-      onClick: textMethod('align-justify')
-    }), /*#__PURE__*/React.createElement(IconMaterialFormatAlignJustify, IconProps))),
-    'list-ordered': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      name: l('List Ordered')
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('list-ordered'),
-      onClick: textMethod('list-ordered')
-    }), /*#__PURE__*/React.createElement(IconMaterialFormatListNumbered, IconProps))),
-    'list-unordered': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      name: l('List Unordered')
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('list-unordered'),
-      onClick: textMethod('list-unordered')
-    }), /*#__PURE__*/React.createElement(IconMaterialFormatListBulleted, IconProps)))
+    }),
+    'align-justify': /*#__PURE__*/_jsx(WrapperToggleButton, {
+      name: l('Align Justify'),
+      children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('align-justify'),
+        onClick: textMethod('align-justify'),
+        children: /*#__PURE__*/_jsx(IconMaterialFormatAlignJustify, _objectSpread({}, IconProps))
+      }))
+    }),
+    'list-ordered': /*#__PURE__*/_jsx(WrapperToggleButton, {
+      name: l('List Ordered'),
+      children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('list-ordered'),
+        onClick: textMethod('list-ordered'),
+        children: /*#__PURE__*/_jsx(IconMaterialFormatListNumbered, _objectSpread({}, IconProps))
+      }))
+    }),
+    'list-unordered': /*#__PURE__*/_jsx(WrapperToggleButton, {
+      name: l('List Unordered'),
+      children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('list-unordered'),
+        onClick: textMethod('list-unordered'),
+        children: /*#__PURE__*/_jsx(IconMaterialFormatListBulleted, _objectSpread({}, IconProps))
+      }))
+    })
   };
   const actionElements = {
-    'clear': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      name: l('Clear')
-    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
-      onClick: textMethod('clear')
-    }), /*#__PURE__*/React.createElement(IconMaterialFormatClear, IconProps)))
+    'clear': /*#__PURE__*/_jsx(WrapperToggleButton, {
+      name: l('Clear'),
+      children: /*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        onClick: textMethod('clear'),
+        children: /*#__PURE__*/_jsx(IconMaterialFormatClear, _objectSpread({}, IconProps))
+      }))
+    })
   };
   const miniMenu = React.useMemo(() => {
-    return /*#__PURE__*/React.createElement(Append, _extends({
+    return /*#__PURE__*/_jsx(Append, _objectSpread({
       open: !!textSelection,
       element: body => {
         const {
@@ -1217,7 +1286,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
           values: values_26,
           style: styleAppend
         } = body;
-        return /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/_jsx("div", {
           ref: item_23 => {
             if (ref__2) {
               if (is('function', ref__2)) ref__2(item_23);else ref__2.current = item_23;
@@ -1229,27 +1298,45 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
           } : undefined), styleAppend), {}, {
             zIndex: 1500
           }),
-          className: classNames([staticClassName('SmartTextField', theme) && ['onesy-SmartTextField-mini-menu-wrapper'], classes.textMiniMenuWrapper])
-        }, /*#__PURE__*/React.createElement(Fade, {
-          in: !!textSelection,
-          add: true
-        }, /*#__PURE__*/React.createElement(ClickListener, {
-          onClickOutside: () => {
-            setTextSelection(null);
-          },
-          include: [refs.miniMenu, refs.miniMenu.current, refs.miniMenuElements.colorPalette, refs.miniMenuElements.colorPalette.current, refs.miniMenuElements.backgroundPalette, refs.miniMenuElements.backgroundPalette.current, refs.miniMenuElements.linkAddInput, refs.miniMenuElements.linkAddInput.current]
-        }, /*#__PURE__*/React.createElement(Line, {
-          gap: 2,
-          direction: "row",
-          align: "center",
-          justify: "flex-start",
-          wrap: "wrap",
-          role: "toolbar",
-          color: "themed",
-          "aria-label": l('Mini menu'),
-          Component: Surface,
-          className: classNames([classes.textMiniMenu])
-        }, /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']), miniMenuExtended && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['align-left'], updateElements['align-center'], updateElements['align-right'], updateElements['align-justify']), miniMenuExtended && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['font-color-mini-menu'], updateElements['font-background-mini-menu']), miniMenuExtended && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['list-ordered'], updateElements['list-unordered']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['superscript'], updateElements['subscript']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['link-add'], updateElements['link-remove']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, actionElements['clear'])))));
+          className: classNames([staticClassName('SmartTextField', theme) && ['onesy-SmartTextField-mini-menu-wrapper'], classes.textMiniMenuWrapper]),
+          children: /*#__PURE__*/_jsx(Fade, {
+            in: !!textSelection,
+            add: true,
+            children: /*#__PURE__*/_jsx(ClickListener, {
+              onClickOutside: () => {
+                setTextSelection(null);
+              },
+              include: [refs.miniMenu, refs.miniMenu.current, refs.miniMenuElements.colorPalette, refs.miniMenuElements.colorPalette.current, refs.miniMenuElements.backgroundPalette, refs.miniMenuElements.backgroundPalette.current, refs.miniMenuElements.linkAddInput, refs.miniMenuElements.linkAddInput.current],
+              children: /*#__PURE__*/_jsxs(Line, {
+                gap: 2,
+                direction: "row",
+                align: "center",
+                justify: "flex-start",
+                wrap: "wrap",
+                role: "toolbar",
+                color: "themed",
+                "aria-label": l('Mini menu'),
+                Component: Surface,
+                className: classNames([classes.textMiniMenu]),
+                children: [/*#__PURE__*/_jsxs(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+                  children: [updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']]
+                })), miniMenuExtended && /*#__PURE__*/_jsxs(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+                  children: [updateElements['align-left'], updateElements['align-center'], updateElements['align-right'], updateElements['align-justify']]
+                })), miniMenuExtended && /*#__PURE__*/_jsxs(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+                  children: [updateElements['font-color-mini-menu'], updateElements['font-background-mini-menu']]
+                })), miniMenuExtended && /*#__PURE__*/_jsxs(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+                  children: [updateElements['list-ordered'], updateElements['list-unordered']]
+                })), /*#__PURE__*/_jsxs(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+                  children: [updateElements['superscript'], updateElements['subscript']]
+                })), /*#__PURE__*/_jsxs(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+                  children: [updateElements['link-add'], updateElements['link-remove']]
+                })), /*#__PURE__*/_jsx(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+                  children: actionElements['clear']
+                }))]
+              })
+            })
+          })
+        });
       },
       parent: refs.root.current,
       anchor: textSelection?.selection,
@@ -1260,7 +1347,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }, AppendProps));
   }, [open, textSelection, textSelected]);
   const menu = React.useMemo(() => {
-    return /*#__PURE__*/React.createElement(Menu, {
+    return /*#__PURE__*/_jsx(Menu, {
       open: openMenu,
       position: "top",
       alignment: "start",
@@ -1271,7 +1358,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       interactive: true
     });
   }, [openMenu, optionsMention, selectionMenu, label]);
-  let main = /*#__PURE__*/React.createElement(TextField, _extends({
+  let main = /*#__PURE__*/_jsx(TextField, _objectSpread(_objectSpread({
     ref: item_24 => {
       if (ref) {
         if (is('function', ref)) ref(item_24);else ref.current = item_24;
@@ -1311,8 +1398,8 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }),
     InputComponent: Type,
     className: classNames([staticClassName('SmartTextField', theme) && ['onesy-SmartTextField-root', `onesy-SmartTextField-version-${version}`, `onesy-SmartTextField-size-${size}`], className, classes.root])
-  }, additional, other));
-  if (version === 'text') main = /*#__PURE__*/React.createElement(Type, _extends({
+  }, additional), other));
+  if (version === 'text') main = /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread(_objectSpread({
     ref: item_26 => {
       if (ref) {
         if (is('function', ref)) ref(item_26);else ref.current = item_26;
@@ -1336,15 +1423,20 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onMouseDown: onMouseDown,
     spellCheck: false,
     "data-placeholder": placeholder !== undefined ? placeholder : name
-  }, inputProps, {
+  }, inputProps), {}, {
     contentEditable: !readOnly,
     className: classNames([staticClassName('SmartTextField', theme) && ['onesy-SmartTextField-root', `onesy-SmartTextField-version-${version}`, `onesy-SmartTextField-size-${size}`], className, classes.root_type, !multiline && classes.singleLine])
-  }, additional, other));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, main, version === 'text' && /*#__PURE__*/React.createElement(React.Fragment, null, helperText && is('string', helperText) ? /*#__PURE__*/React.createElement(Type, _extends({
-    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
-  }, HelperTextProps, {
-    className: classNames([staticClassName('SmartTextField', theme) && ['onesy-SmartTextField-helper-text', error && 'onesy-SmartTextField-error'], HelperTextProps?.className, classes.helperText, error && classes.error_color])
-  }), textToInnerHTML(helperText)) : helperText), miniMenu, menu);
-});
+  }, additional), other));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [main, version === 'text' && /*#__PURE__*/_jsx(_Fragment, {
+      children: helperText && is('string', helperText) ? /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
+        version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
+      }, HelperTextProps), {}, {
+        className: classNames([staticClassName('SmartTextField', theme) && ['onesy-SmartTextField-helper-text', error && 'onesy-SmartTextField-error'], HelperTextProps?.className, classes.helperText, error && classes.error_color]),
+        children: textToInnerHTML(helperText)
+      })) : helperText
+    }), miniMenu, menu]
+  });
+};
 SmartTextField.displayName = 'onesy-SmartTextField';
 export default SmartTextField;