@onesy/ui-react 1.0.171 → 1.0.173

package/SmartTextField/SmartTextField.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -46,12 +45,13 @@ var _ToggleButtons = _interopRequireDefault(require("../ToggleButtons"));
 var _Menu = _interopRequireDefault(require("../Menu"));
 var _Divider = _interopRequireDefault(require("../Divider"));
 var _utils2 = require("../utils");
-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"],
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -154,7 +154,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-SmartTextField'
 });
-const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const SmartTextField = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0, _theme$elements1, _theme$elements10, _theme$elements11, _theme$elements12, _theme$elements13, _theme$elements14, _theme$elements15, _refs$root$current;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -177,6 +177,7 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Divider = (theme === null || theme === void 0 || (_theme$elements14 = theme.elements) === null || _theme$elements14 === void 0 ? void 0 : _theme$elements14.Divider) || _Divider.default;
   const ColorTextField = (theme === null || theme === void 0 || (_theme$elements15 = theme.elements) === null || _theme$elements15 === void 0 ? void 0 : _theme$elements15.ColorTextField) || _ColorTextField.default;
   const {
+      ref,
       tonal = true,
       color = 'default',
       version = 'text',
@@ -595,26 +596,29 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }, [error_]);
   const label = () => (0, _utils.is)('function', mentionLabel) ? mentionLabel(optionsMention, {
     addTag
-  }) : /*#__PURE__*/_react.default.createElement(Line, {
-    className: classes.menu
-  }, /*#__PURE__*/_react.default.createElement(List, {
-    size: "small",
-    className: classes.list
-  }, optionsMention === null || optionsMention === void 0 ? void 0 : optionsMention.map((item_0, index) => {
-    var _item_0$name;
-    return /*#__PURE__*/_react.default.createElement(ListItem, {
-      key: index,
-      start: /*#__PURE__*/_react.default.createElement(Avatar, {
-        color: (0, _utils.stringToColor)(item_0.name),
-        size: "small"
-      }, (_item_0$name = item_0.name) === null || _item_0$name === void 0 ? void 0 : _item_0$name.slice(0, 1)),
-      primary: /*#__PURE__*/_react.default.createElement(Type, {
-        version: "l3"
-      }, item_0.name),
-      onClick: () => addTag(item_0),
-      button: true
-    });
-  })));
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    className: classes.menu,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
+      size: "small",
+      className: classes.list,
+      children: optionsMention === null || optionsMention === void 0 ? void 0 : optionsMention.map((item_0, index) => {
+        var _item_0$name;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
+          start: /*#__PURE__*/(0, _jsxRuntime.jsx)(Avatar, {
+            color: (0, _utils.stringToColor)(item_0.name),
+            size: "small",
+            children: (_item_0$name = item_0.name) === null || _item_0$name === void 0 ? void 0 : _item_0$name.slice(0, 1)
+          }),
+          primary: /*#__PURE__*/(0, _jsxRuntime.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) {
@@ -813,15 +817,16 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         color: color_
       } = propsItem,
       other_ = (0, _objectWithoutProperties2.default)(propsItem, _excluded2);
-    return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread({
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RichTextEditor', theme) && ['onesy-RichTextEditor-palette-item'], classes.paletteItem]),
       style: {
         background: color_
       }
     }, other_));
   };
-  const Palette = /*#__PURE__*/_react.default.forwardRef((propsPalette, ref_) => {
+  const Palette = propsPalette => {
     const {
+        ref: ref_,
         version: version_,
         onUpdate: onUpdate_,
         onClose
@@ -836,7 +841,7 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       onUpdate_(itemColor);
       onClose();
     };
-    return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
       ref: ref_,
       gap: 1,
       direction: "column",
@@ -844,76 +849,81 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed',
       Component: Surface,
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RichTextEditor', theme) && ['onesy-RichTextEditor-palette'], classes.palette])
-    }, other__0), /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 0.5,
-      style: {
-        maxHeight: 136,
-        padding: '10px 10px 0',
-        overflow: 'hidden auto'
-      }
-    }, /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 0.5,
-      direction: "row",
-      style: {
-        width: '100%'
-      }
-    }, /*#__PURE__*/_react.default.createElement(PaletteItem, {
-      color: "#000000",
-      onClick: () => {
-        onUpdateColor('#000000');
-      }
-    }), /*#__PURE__*/_react.default.createElement(PaletteItem, {
-      color: "#ffffff",
-      onClick: () => {
-        onUpdateColor('#ffffff');
-      }
-    })), Object.keys(_styleReact.colors).filter(item_21 => !['black', 'white'].includes(item_21)).map((item_22, index_0) => /*#__PURE__*/_react.default.createElement(Line, {
-      key: index_0,
-      gap: 0.5,
-      direction: "row",
-      style: {
-        width: '100%'
-      }
-    }, Object.keys(_styleReact.colors[item_22]).map((item_, index_) => /*#__PURE__*/_react.default.createElement(PaletteItem, {
-      key: index_,
-      color: _styleReact.colors[item_22][item_],
-      onClick: () => {
-        onUpdateColor(_styleReact.colors[item_22][item_]);
-      }
-    }))))), /*#__PURE__*/_react.default.createElement(Divider, null), /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 0.5,
-      direction: "row",
-      align: "center",
-      fullWidth: true,
-      style: {
-        padding: '0px 10px 10px'
-      }
-    }, /*#__PURE__*/_react.default.createElement(ColorTextField, (0, _extends2.default)({
-      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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RichTextEditor', theme) && ['onesy-RichTextEditor-text-field-color'], ColorTextFieldProps === null || ColorTextFieldProps === void 0 ? void 0 : ColorTextFieldProps.className, classes.textFieldColor])
-    })), /*#__PURE__*/_react.default.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__*/(0, _jsxRuntime.jsxs)(Line, {
+        gap: 0.5,
+        style: {
+          maxHeight: 136,
+          padding: '10px 10px 0',
+          overflow: 'hidden auto'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 0.5,
+          direction: "row",
+          style: {
+            width: '100%'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PaletteItem, {
+            color: "#000000",
+            onClick: () => {
+              onUpdateColor('#000000');
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PaletteItem, {
+            color: "#ffffff",
+            onClick: () => {
+              onUpdateColor('#ffffff');
+            }
+          })]
+        }), Object.keys(_styleReact.colors).filter(item_21 => !['black', 'white'].includes(item_21)).map((item_22, index_0) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+          gap: 0.5,
+          direction: "row",
+          style: {
+            width: '100%'
+          },
+          children: Object.keys(_styleReact.colors[item_22]).map((item_, index_) => /*#__PURE__*/(0, _jsxRuntime.jsx)(PaletteItem, {
+            color: _styleReact.colors[item_22][item_],
+            onClick: () => {
+              onUpdateColor(_styleReact.colors[item_22][item_]);
+            }
+          }, index_))
+        }, index_0))]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+        gap: 0.5,
+        direction: "row",
+        align: "center",
+        fullWidth: true,
+        style: {
+          padding: '0px 10px 10px'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RichTextEditor', theme) && ['onesy-RichTextEditor-text-field-color'], ColorTextFieldProps === null || ColorTextFieldProps === void 0 ? void 0 : ColorTextFieldProps.className, classes.textFieldColor])
+        })), /*#__PURE__*/(0, _jsxRuntime.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]
   };
@@ -933,8 +943,9 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const ToggleButtonProps = {
     size: 'small'
   };
-  const Input = /*#__PURE__*/_react.default.forwardRef((propsInput, ref__0) => {
+  const Input = propsInput => {
     const {
+        ref: ref__0,
         label: labelInput,
         labelButton,
         value: value__,
@@ -945,41 +956,44 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         InputProps
       } = propsInput,
       other__1 = (0, _objectWithoutProperties2.default)(propsInput, _excluded4);
-    return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
       ref: ref__0,
       gap: 1,
       direction: "column",
       color: "themed",
       Component: Surface
-    }, other__1, {
-      className: (0, _styleReact.classNames)([other__1 === null || other__1 === void 0 ? void 0 : other__1.className, classes.inputWrapper])
-    }), /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 0.5,
-      direction: "row",
-      align: "center",
-      style: {
-        width: '100%'
-      }
-    }, /*#__PURE__*/_react.default.createElement(InputComponent, (0, _extends2.default)({
-      name: labelInput,
-      version: "outlined",
-      size: "small",
-      valueDefault: value__,
-      onChange: onChange__,
-      placeholder: placeholderInputProps,
-      flex: true
-    }, InputProps, {
-      style: {
-        width: 'unset',
-        flex: '1 1 auto'
-      }
-    })), /*#__PURE__*/_react.default.createElement(Button, {
-      color: "inherit",
-      version: "text",
-      size: "small",
-      onClick: onClick
-    }, labelButton)));
-  });
+    }, other__1), {}, {
+      className: (0, _styleReact.classNames)([other__1 === null || other__1 === void 0 ? void 0 : other__1.className, classes.inputWrapper]),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+        gap: 0.5,
+        direction: "row",
+        align: "center",
+        style: {
+          width: '100%'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(Button, {
+          color: "inherit",
+          version: "text",
+          size: "small",
+          onClick: onClick,
+          children: labelButton
+        })]
+      })
+    }));
+  };
   const WrapperAppend = propsWrapper => {
     const {
         open: open_,
@@ -989,245 +1003,300 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         children: childrenWrapperAppend
       } = propsWrapper,
       other__2 = (0, _objectWithoutProperties2.default)(propsWrapper, _excluded5);
-    return /*#__PURE__*/_react.default.createElement(Append, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Append, _objectSpread(_objectSpread({
       open: open_,
-      element: /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SmartTextField', theme) && ['onesy-SmartTextField-mini-menu-additional'], classes.textMiniMenuAdditionalMenu])
-      }, /*#__PURE__*/_react.default.createElement(Fade, {
-        in: open_,
-        add: true
-      }, /*#__PURE__*/_react.default.cloneElement(element_1))),
+      element: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SmartTextField', theme) && ['onesy-SmartTextField-mini-menu-additional'], classes.textMiniMenuAdditionalMenu]),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+          in: open_,
+          add: true,
+          children: /*#__PURE__*/_react.default.cloneElement(element_1)
+        })
+      }),
       anchorElement: anchorElement,
       portal: true,
       alignment: "center",
       position: "bottom"
-    }, AppendProps), /*#__PURE__*/_react.default.cloneElement(childrenWrapperAppend, _objectSpread(_objectSpread({}, other__2), childrenWrapperAppend.props)));
+    }, AppendProps), {}, {
+      children: /*#__PURE__*/_react.default.cloneElement(childrenWrapperAppend, _objectSpread(_objectSpread({}, other__2), childrenWrapperAppend.props))
+    }));
   };
-  const WrapperToggleButton = /*#__PURE__*/_react.default.forwardRef((propsWrapperToggleButton, ref__1) => {
+  const WrapperToggleButton = propsWrapperToggleButton => {
     const {
+        ref: ref__1,
         open: open__0,
         name: nameWrapperToogleButton,
         children: childrenWrapperToggleButton
       } = propsWrapperToggleButton,
       other__3 = (0, _objectWithoutProperties2.default)(propsWrapperToggleButton, _excluded6);
-    return /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
       ref: ref__1,
       open: open__0 !== undefined ? open__0 : undefined,
       name: nameWrapperToogleButton
-    }, TooltipProps), /*#__PURE__*/_react.default.cloneElement(childrenWrapperToggleButton, _objectSpread(_objectSpread({}, other__3), childrenWrapperToggleButton.props)));
-  });
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/_react.default.cloneElement(childrenWrapperToggleButton, _objectSpread(_objectSpread({}, other__3), childrenWrapperToggleButton.props))
+    }));
+  };
   const updateElements = {
-    'italic': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-      name: l('Italic')
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('italic'),
-      onClick: textMethod('italic')
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatItalicW.default, IconProps))),
-    'underline': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-      name: l('Underline')
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('underline'),
-      onClick: textMethod('underline')
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatUnderlinedW.default, IconProps))),
-    'bold': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+    'italic': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+      name: l('Italic'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('italic'),
+        onClick: textMethod('italic'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialFormatItalicW.default, _objectSpread({}, IconProps))
+      }))
+    }),
+    'underline': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+      name: l('Underline'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('underline'),
+        onClick: textMethod('underline'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialFormatUnderlinedW.default, _objectSpread({}, IconProps))
+      }))
+    }),
+    'bold': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
       name: l('Bold'),
-      onClick: textMethod('bold')
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('bold')
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatBoldW.default, IconProps))),
-    'superscript': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      onClick: textMethod('bold'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('bold'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialFormatBoldW.default, _objectSpread({}, IconProps))
+      }))
+    }),
+    'superscript': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
       name: l('Superscript'),
-      onClick: textMethod('superscript')
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('superscript')
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialSuperscriptW.default, IconProps))),
-    'subscript': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      onClick: textMethod('superscript'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('superscript'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialSuperscriptW.default, _objectSpread({}, IconProps))
+      }))
+    }),
+    'subscript': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
       name: l('Subscript'),
-      onClick: textMethod('subscript')
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('subscript')
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialSubscriptW.default, IconProps))),
-    'strike-line': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      onClick: textMethod('subscript'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('subscript'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialSubscriptW.default, _objectSpread({}, IconProps))
+      }))
+    }),
+    'strike-line': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
       name: l('Strike Line'),
-      onClick: textMethod('strike-line')
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('strike-line')
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialStrikethroughSW.default, IconProps))),
-    'link-add': /*#__PURE__*/_react.default.createElement(WrapperAppend, {
+      onClick: textMethod('strike-line'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('strike-line'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialStrikethroughSW.default, _objectSpread({}, IconProps))
+      }))
+    }),
+    'link-add': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperAppend, {
       open: refs.open.current.linkMiniMenu,
       anchorElement: refs.miniMenuElements.linkAdd,
-      element: /*#__PURE__*/_react.default.createElement(ClickListener, {
+      element: /*#__PURE__*/(0, _jsxRuntime.jsx)(ClickListener, {
         onClickOutside: () => updateOpen('linkMiniMenu', false),
-        include: [refs.miniMenuElements.linkAdd]
-      }, /*#__PURE__*/_react.default.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+        name: l('Insert Link'),
+        open: refs.open.current.linkMiniMenu ? false : undefined,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({
+          ref: refs.miniMenuElements.linkAdd
+        }, ToggleButtonProps), {}, {
+          selected: refs.open.current.linkMiniMenu,
+          onClick: () => updateOpen('linkMiniMenu', !refs.open.current.linkMiniMenu),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialAddLinkW.default, _objectSpread({}, IconProps))
+        }))
+      })
+    }),
+    'link-remove': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+      name: l('Remove Link'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        onClick: textMethod('link-remove'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialLinkOffW.default, _objectSpread({}, IconProps))
       }))
-    }, /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-      name: l('Insert Link'),
-      open: refs.open.current.linkMiniMenu ? false : undefined
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({
-      ref: refs.miniMenuElements.linkAdd
-    }, ToggleButtonProps, {
-      selected: refs.open.current.linkMiniMenu,
-      onClick: () => updateOpen('linkMiniMenu', !refs.open.current.linkMiniMenu)
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialAddLinkW.default, IconProps)))),
-    'link-remove': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-      name: l('Remove Link')
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
-      onClick: textMethod('link-remove')
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialLinkOffW.default, IconProps))),
-    'font-color': /*#__PURE__*/_react.default.createElement(WrapperAppend, {
+    }),
+    'font-color': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperAppend, {
       open: refs.open.current.color,
       anchorElement: refs.elements.color.current,
-      element: /*#__PURE__*/_react.default.createElement(ClickListener, {
+      element: /*#__PURE__*/(0, _jsxRuntime.jsx)(ClickListener, {
         onClickOutside: () => updateOpen('color', false),
-        include: [refs.elements.color.current]
-      }, /*#__PURE__*/_react.default.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__*/(0, _jsxRuntime.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.default.createElement(WrapperToggleButton, {
-      name: l('Text Color'),
-      open: refs.open.current.color ? false : undefined
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({
-      ref: refs.elements.color
-    }, ToggleButtonProps, {
-      selected: refs.open.current.color,
-      onClick: () => updateOpen('color', !refs.open.current.color)
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatColorTextW.default, IconProps)))),
-    'font-color-mini-menu': /*#__PURE__*/_react.default.createElement(WrapperAppend, {
+        })
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+        name: l('Text Color'),
+        open: refs.open.current.color ? false : undefined,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({
+          ref: refs.elements.color
+        }, ToggleButtonProps), {}, {
+          selected: refs.open.current.color,
+          onClick: () => updateOpen('color', !refs.open.current.color),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialFormatColorTextW.default, _objectSpread({}, IconProps))
+        }))
+      })
+    }),
+    'font-color-mini-menu': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperAppend, {
       open: refs.open.current.colorMiniMenu,
       anchorElement: refs.miniMenuElements.color,
-      element: /*#__PURE__*/_react.default.createElement(ClickListener, {
+      element: /*#__PURE__*/(0, _jsxRuntime.jsx)(ClickListener, {
         onClickOutside: () => updateOpen('colorMiniMenu', false),
-        include: [refs.miniMenuElements.color]
-      }, /*#__PURE__*/_react.default.createElement(Palette, {
-        ref: refs.miniMenuElements.colorPalette,
-        version: "font-color",
-        onClose: () => updateOpen('colorMiniMenu', false),
-        onUpdate: textMethod('font-color')
-      }))
-    }, /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-      name: l('Text Color'),
-      open: refs.open.current.colorMiniMenu ? false : undefined
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({
-      ref: refs.miniMenuElements.color
-    }, ToggleButtonProps, {
-      selected: refs.open.current.colorMiniMenu,
-      onClick: () => updateOpen('colorMiniMenu', !refs.open.current.colorMiniMenu)
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatColorTextW.default, IconProps)))),
-    'font-background': /*#__PURE__*/_react.default.createElement(WrapperAppend, {
+        include: [refs.miniMenuElements.color],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Palette, {
+          ref: refs.miniMenuElements.colorPalette,
+          version: "font-color",
+          onClose: () => updateOpen('colorMiniMenu', false),
+          onUpdate: textMethod('font-color')
+        })
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+        name: l('Text Color'),
+        open: refs.open.current.colorMiniMenu ? false : undefined,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({
+          ref: refs.miniMenuElements.color
+        }, ToggleButtonProps), {}, {
+          selected: refs.open.current.colorMiniMenu,
+          onClick: () => updateOpen('colorMiniMenu', !refs.open.current.colorMiniMenu),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialFormatColorTextW.default, _objectSpread({}, IconProps))
+        }))
+      })
+    }),
+    'font-background': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperAppend, {
       open: refs.open.current.background,
       anchorElement: refs.elements.background.current,
-      element: /*#__PURE__*/_react.default.createElement(ClickListener, {
+      element: /*#__PURE__*/(0, _jsxRuntime.jsx)(ClickListener, {
         onClickOutside: () => updateOpen('background', false),
-        include: [refs.elements.background.current]
-      }, /*#__PURE__*/_react.default.createElement(Palette, {
-        version: "font-background",
-        onClose: () => updateOpen('background', false),
-        onUpdate: textMethod('font-background')
-      }))
-    }, /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-      name: l('Background Color'),
-      open: refs.open.current.background ? false : undefined
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({
-      ref: refs.elements.background
-    }, ToggleButtonProps, {
-      selected: refs.open.current.background,
-      onClick: () => updateOpen('background', !refs.open.current.background)
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatColorFillW.default, IconProps)))),
-    'font-background-mini-menu': /*#__PURE__*/_react.default.createElement(WrapperAppend, {
+        include: [refs.elements.background.current],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Palette, {
+          version: "font-background",
+          onClose: () => updateOpen('background', false),
+          onUpdate: textMethod('font-background')
+        })
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+        name: l('Background Color'),
+        open: refs.open.current.background ? false : undefined,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({
+          ref: refs.elements.background
+        }, ToggleButtonProps), {}, {
+          selected: refs.open.current.background,
+          onClick: () => updateOpen('background', !refs.open.current.background),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialFormatColorFillW.default, _objectSpread({}, IconProps))
+        }))
+      })
+    }),
+    'font-background-mini-menu': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperAppend, {
       open: refs.open.current.backgroundMiniMenu,
       anchorElement: refs.miniMenuElements.background,
-      element: /*#__PURE__*/_react.default.createElement(ClickListener, {
+      element: /*#__PURE__*/(0, _jsxRuntime.jsx)(ClickListener, {
         onClickOutside: () => updateOpen('backgroundMiniMenu', false),
-        include: [refs.miniMenuElements.background]
-      }, /*#__PURE__*/_react.default.createElement(Palette, {
-        ref: refs.miniMenuElements.backgroundPalette,
-        version: "font-background",
-        onClose: () => updateOpen('backgroundMiniMenu', false),
-        onUpdate: textMethod('font-background')
+        include: [refs.miniMenuElements.background],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Palette, {
+          ref: refs.miniMenuElements.backgroundPalette,
+          version: "font-background",
+          onClose: () => updateOpen('backgroundMiniMenu', false),
+          onUpdate: textMethod('font-background')
+        })
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+        name: l('Text Color'),
+        open: refs.open.current.backgroundMiniMenu ? false : undefined,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({
+          ref: refs.miniMenuElements.background
+        }, ToggleButtonProps), {}, {
+          selected: refs.open.current.backgroundMiniMenu,
+          onClick: () => updateOpen('backgroundMiniMenu', !refs.open.current.backgroundMiniMenu),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialFormatColorFillW.default, _objectSpread({}, IconProps))
+        }))
+      })
+    }),
+    'align-left': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+      name: l('Align Left'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('align-left'),
+        onClick: textMethod('align-left'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialFormatAlignLeftW.default, _objectSpread({}, IconProps))
+      }))
+    }),
+    'align-center': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+      name: l('Align Center'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('align-center'),
+        onClick: textMethod('align-center'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialFormatAlignCenterW.default, _objectSpread({}, IconProps))
+      }))
+    }),
+    'align-right': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+      name: l('Align Right'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('align-right'),
+        onClick: textMethod('align-right'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialFormatAlignRightW.default, _objectSpread({}, IconProps))
       }))
-    }, /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-      name: l('Text Color'),
-      open: refs.open.current.backgroundMiniMenu ? false : undefined
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({
-      ref: refs.miniMenuElements.background
-    }, ToggleButtonProps, {
-      selected: refs.open.current.backgroundMiniMenu,
-      onClick: () => updateOpen('backgroundMiniMenu', !refs.open.current.backgroundMiniMenu)
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatColorFillW.default, IconProps)))),
-    'align-left': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-      name: l('Align Left')
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('align-left'),
-      onClick: textMethod('align-left')
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatAlignLeftW.default, IconProps))),
-    'align-center': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-      name: l('Align Center')
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('align-center'),
-      onClick: textMethod('align-center')
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatAlignCenterW.default, IconProps))),
-    'align-right': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-      name: l('Align Right')
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('align-right'),
-      onClick: textMethod('align-right')
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatAlignRightW.default, IconProps))),
-    'align-justify': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-      name: l('Align Justify')
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('align-justify'),
-      onClick: textMethod('align-justify')
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatAlignJustifyW.default, IconProps))),
-    'list-ordered': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-      name: l('List Ordered')
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('list-ordered'),
-      onClick: textMethod('list-ordered')
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatListNumberedW.default, IconProps))),
-    'list-unordered': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-      name: l('List Unordered')
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
-      selected: refs.textSelected.current.includes('list-unordered'),
-      onClick: textMethod('list-unordered')
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatListBulletedW.default, IconProps)))
+    }),
+    'align-justify': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+      name: l('Align Justify'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('align-justify'),
+        onClick: textMethod('align-justify'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialFormatAlignJustifyW.default, _objectSpread({}, IconProps))
+      }))
+    }),
+    'list-ordered': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+      name: l('List Ordered'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('list-ordered'),
+        onClick: textMethod('list-ordered'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialFormatListNumberedW.default, _objectSpread({}, IconProps))
+      }))
+    }),
+    'list-unordered': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+      name: l('List Unordered'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        selected: refs.textSelected.current.includes('list-unordered'),
+        onClick: textMethod('list-unordered'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialFormatListBulletedW.default, _objectSpread({}, IconProps))
+      }))
+    })
   };
   const actionElements = {
-    'clear': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
-      name: l('Clear')
-    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
-      onClick: textMethod('clear')
-    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatClearW.default, IconProps)))
+    'clear': /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperToggleButton, {
+      name: l('Clear'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({}, ToggleButtonProps), {}, {
+        onClick: textMethod('clear'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialFormatClearW.default, _objectSpread({}, IconProps))
+      }))
+    })
   };
   const miniMenu = _react.default.useMemo(() => {
-    return /*#__PURE__*/_react.default.createElement(Append, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Append, _objectSpread({
       open: !!textSelection,
       element: body => {
         const {
@@ -1235,7 +1304,7 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
           values: values_26,
           style: styleAppend
         } = body;
-        return /*#__PURE__*/_react.default.createElement("div", {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           ref: item_23 => {
             if (ref__2) {
               if ((0, _utils.is)('function', ref__2)) ref__2(item_23);else ref__2.current = item_23;
@@ -1247,27 +1316,45 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
           } : undefined), styleAppend), {}, {
             zIndex: 1500
           }),
-          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SmartTextField', theme) && ['onesy-SmartTextField-mini-menu-wrapper'], classes.textMiniMenuWrapper])
-        }, /*#__PURE__*/_react.default.createElement(Fade, {
-          in: !!textSelection,
-          add: true
-        }, /*#__PURE__*/_react.default.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.default.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: (0, _styleReact.classNames)([classes.textMiniMenu])
-        }, /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']), miniMenuExtended && /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, updateElements['align-left'], updateElements['align-center'], updateElements['align-right'], updateElements['align-justify']), miniMenuExtended && /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, updateElements['font-color-mini-menu'], updateElements['font-background-mini-menu']), miniMenuExtended && /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, updateElements['list-ordered'], updateElements['list-unordered']), /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, updateElements['superscript'], updateElements['subscript']), /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, updateElements['link-add'], updateElements['link-remove']), /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, actionElements['clear'])))));
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SmartTextField', theme) && ['onesy-SmartTextField-mini-menu-wrapper'], classes.textMiniMenuWrapper]),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+            in: !!textSelection,
+            add: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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: (0, _styleReact.classNames)([classes.textMiniMenu]),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+                  children: [updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']]
+                })), miniMenuExtended && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+                  children: [updateElements['align-left'], updateElements['align-center'], updateElements['align-right'], updateElements['align-justify']]
+                })), miniMenuExtended && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+                  children: [updateElements['font-color-mini-menu'], updateElements['font-background-mini-menu']]
+                })), miniMenuExtended && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+                  children: [updateElements['list-ordered'], updateElements['list-unordered']]
+                })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+                  children: [updateElements['superscript'], updateElements['subscript']]
+                })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+                  children: [updateElements['link-add'], updateElements['link-remove']]
+                })), /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButtons, _objectSpread(_objectSpread({}, ToggleButtonsProps), {}, {
+                  children: actionElements['clear']
+                }))]
+              })
+            })
+          })
+        });
       },
       parent: refs.root.current,
       anchor: textSelection === null || textSelection === void 0 ? void 0 : textSelection.selection,
@@ -1278,7 +1365,7 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }, AppendProps));
   }, [open, textSelection, textSelected]);
   const menu = _react.default.useMemo(() => {
-    return /*#__PURE__*/_react.default.createElement(Menu, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu, {
       open: openMenu,
       position: "top",
       alignment: "start",
@@ -1289,7 +1376,7 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       interactive: true
     });
   }, [openMenu, optionsMention, selectionMenu, label]);
-  let main = /*#__PURE__*/_react.default.createElement(TextField, (0, _extends2.default)({
+  let main = /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, _objectSpread(_objectSpread({
     ref: item_24 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_24);else ref.current = item_24;
@@ -1329,8 +1416,8 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }),
     InputComponent: Type,
     className: (0, _styleReact.classNames)([(0, _utils2.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.default.createElement(Type, (0, _extends2.default)({
+  }, additional), other));
+  if (version === 'text') main = /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread(_objectSpread({
     ref: item_26 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_26);else ref.current = item_26;
@@ -1354,15 +1441,20 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     onMouseDown: onMouseDown,
     spellCheck: false,
     "data-placeholder": placeholder !== undefined ? placeholder : name
-  }, inputProps, {
+  }, inputProps), {}, {
     contentEditable: !readOnly,
     className: (0, _styleReact.classNames)([(0, _utils2.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.default.createElement(_react.default.Fragment, null, main, version === 'text' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, helperText && (0, _utils.is)('string', helperText) ? /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
-  }, HelperTextProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SmartTextField', theme) && ['onesy-SmartTextField-helper-text', error && 'onesy-SmartTextField-error'], HelperTextProps === null || HelperTextProps === void 0 ? void 0 : HelperTextProps.className, classes.helperText, error && classes.error_color])
-  }), (0, _utils.textToInnerHTML)(helperText)) : helperText), miniMenu, menu);
-});
+  }, additional), other));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [main, version === 'text' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: helperText && (0, _utils.is)('string', helperText) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
+        version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
+      }, HelperTextProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SmartTextField', theme) && ['onesy-SmartTextField-helper-text', error && 'onesy-SmartTextField-error'], HelperTextProps === null || HelperTextProps === void 0 ? void 0 : HelperTextProps.className, classes.helperText, error && classes.error_color]),
+        children: (0, _utils.textToInnerHTML)(helperText)
+      })) : helperText
+    }), miniMenu, menu]
+  });
+};
 SmartTextField.displayName = 'onesy-SmartTextField';
 var _default = exports.default = SmartTextField;