@onesy/ui-react 1.0.163 → 1.0.165

package/esm/RichTextEditor/RichTextEditor.js

@@ -210,26 +210,26 @@ const useStyle = styleMethod(theme => ({
 const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyRichTextEditor?.props?.default), props__), [props__]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
-  const Append = React.useMemo(() => theme?.elements?.Append || AppendElement, [theme]);
-  const Select = React.useMemo(() => theme?.elements?.Select || SelectElement, [theme]);
-  const Switch = React.useMemo(() => theme?.elements?.Switch || SwitchElement, [theme]);
-  const Label = React.useMemo(() => theme?.elements?.Label || LabelElement, [theme]);
-  const NumericTextField = React.useMemo(() => theme?.elements?.NumericTextField || NumericTextFieldElement, [theme]);
-  const ColorTextField = React.useMemo(() => theme?.elements?.ColorTextField || ColorTextFieldElement, [theme]);
-  const ToggleButton = React.useMemo(() => theme?.elements?.ToggleButton || ToggleButtonElement, [theme]);
-  const ToggleButtons = React.useMemo(() => theme?.elements?.ToggleButtons || ToggleButtonsElement, [theme]);
-  const Drawing = React.useMemo(() => theme?.elements?.Drawing || DrawingElement, [theme]);
-  const Divider = React.useMemo(() => theme?.elements?.Divider || DividerElement, [theme]);
-  const ClickListener = React.useMemo(() => theme?.elements?.ClickListener || ClickListenerElement, [theme]);
-  const TextField = React.useMemo(() => theme?.elements?.TextField || TextFieldElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
-  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyRichTextEditor?.props?.default), props__);
+  const Line = theme?.elements?.Line || LineElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
+  const Fade = theme?.elements?.Fade || FadeElement;
+  const Append = theme?.elements?.Append || AppendElement;
+  const Select = theme?.elements?.Select || SelectElement;
+  const Switch = theme?.elements?.Switch || SwitchElement;
+  const Label = theme?.elements?.Label || LabelElement;
+  const NumericTextField = theme?.elements?.NumericTextField || NumericTextFieldElement;
+  const ColorTextField = theme?.elements?.ColorTextField || ColorTextFieldElement;
+  const ToggleButton = theme?.elements?.ToggleButton || ToggleButtonElement;
+  const ToggleButtons = theme?.elements?.ToggleButtons || ToggleButtonsElement;
+  const Drawing = theme?.elements?.Drawing || DrawingElement;
+  const Divider = theme?.elements?.Divider || DividerElement;
+  const ClickListener = theme?.elements?.ClickListener || ClickListenerElement;
+  const TextField = theme?.elements?.TextField || TextFieldElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Button = theme?.elements?.Button || ButtonElement;
+  const ListItem = theme?.elements?.ListItem || ListItemElement;
   const {
       tonal = true,
       color = 'default',
@@ -397,11 +397,11 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
     const children_ = Array.from(element.children);
     const toRemove = [];
     const other_ = [];
-    children_.forEach((item, index) => {
-      item.tagName === 'SPAN' && !item.innerHTML || item.tagName === 'BR' && index > 0 && children_[index - 1].tagName === 'SPAN' && !children_[index - 1].innerHTML ? toRemove.push(item) : other_.push(item);
+    children_.forEach((item_0, index) => {
+      item_0.tagName === 'SPAN' && !item_0.innerHTML || item_0.tagName === 'BR' && index > 0 && children_[index - 1].tagName === 'SPAN' && !children_[index - 1].innerHTML ? toRemove.push(item_0) : other_.push(item_0);
     });
-    toRemove.forEach(item => item.remove());
-    other_.forEach(item => clear(item));
+    toRemove.forEach(item_1 => item_1.remove());
+    other_.forEach(item_2 => clear(item_2));
   };
   const onUpdate = event => {
     // Clear from empty element values
@@ -413,64 +413,64 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
       [property]: itemValue
     }));
   };
-  const updateOpen = (property, itemValue) => {
-    setOpen(values => _objectSpread(_objectSpread({}, values), {}, {
-      [property]: itemValue
+  const updateOpen = (property_0, itemValue_0) => {
+    setOpen(values_0 => _objectSpread(_objectSpread({}, values_0), {}, {
+      [property_0]: itemValue_0
     }));
   };
   const paste = async () => {
     const value_ = await navigator.clipboard.read();
     if (value_) {
-      let values = '';
-      for (const item of Array.from(value_)) {
-        const valueItem = await item.getType('text/html');
-        values += await valueItem.text();
+      let values_1 = '';
+      for (const item_3 of Array.from(value_)) {
+        const valueItem = await item_3.getType('text/html');
+        values_1 += await valueItem.text();
       }
-      refs.rootDocument.current.execCommand('insertHTML', undefined, values);
+      refs.rootDocument.current.execCommand('insertHTML', undefined, values_1);
     }
   };
-  const method = React.useCallback(command => argument => {
-    switch (command) {
+  const method = command_0 => argument => {
+    switch (command_0) {
       // updates
       case 'italic':
         refs.rootDocument.current.execCommand('italic');
-        if (query('italic')) setSelected(values => [...values, 'italic']);else setSelected(values => values.filter(item => item !== 'italic'));
+        if (query('italic')) setSelected(values_24 => [...values_24, 'italic']);else setSelected(values_25 => values_25.filter(item_21 => item_21 !== 'italic'));
         break;
       case 'underline':
         refs.rootDocument.current.execCommand('underline');
-        if (query('underline')) setSelected(values => [...values, 'underline']);else setSelected(values => values.filter(item => item !== 'underline'));
+        if (query('underline')) setSelected(values_22 => [...values_22, 'underline']);else setSelected(values_23 => values_23.filter(item_20 => item_20 !== 'underline'));
         break;
       case 'bold':
         refs.rootDocument.current.execCommand('bold');
-        if (query('bold')) setSelected(values => [...values, 'bold']);else setSelected(values => values.filter(item => item !== 'bold'));
+        if (query('bold')) setSelected(values_20 => [...values_20, 'bold']);else setSelected(values_21 => values_21.filter(item_19 => item_19 !== 'bold'));
         break;
       case 'strike-line':
         refs.rootDocument.current.execCommand('strikeThrough');
-        if (query('strikeThrough')) setSelected(values => [...values, 'strike-line']);else setSelected(values => values.filter(item => item !== 'strike-line'));
+        if (query('strikeThrough')) setSelected(values_18 => [...values_18, 'strike-line']);else setSelected(values_19 => values_19.filter(item_18 => item_18 !== 'strike-line'));
         break;
       case 'align-left':
         refs.rootDocument.current.execCommand('justifyLeft');
-        if (query('justifyLeft')) setSelected(values => [...values.filter(item => !item.includes('align')), 'align-left']);else setSelected(values => values.filter(item => item !== 'align-left'));
+        if (query('justifyLeft')) setSelected(values_16 => [...values_16.filter(item_16 => !item_16.includes('align')), 'align-left']);else setSelected(values_17 => values_17.filter(item_17 => item_17 !== 'align-left'));
         break;
       case 'align-center':
         refs.rootDocument.current.execCommand('justifyCenter');
-        if (query('justifyCenter')) setSelected(values => [...values.filter(item => !item.includes('align')), 'align-center']);else setSelected(values => values.filter(item => item !== 'align-center'));
+        if (query('justifyCenter')) setSelected(values_14 => [...values_14.filter(item_14 => !item_14.includes('align')), 'align-center']);else setSelected(values_15 => values_15.filter(item_15 => item_15 !== 'align-center'));
         break;
       case 'align-right':
         refs.rootDocument.current.execCommand('justifyRight');
-        if (query('justifyRight')) setSelected(values => [...values.filter(item => !item.includes('align')), 'align-right']);else setSelected(values => values.filter(item => item !== 'align-right'));
+        if (query('justifyRight')) setSelected(values_12 => [...values_12.filter(item_12 => !item_12.includes('align')), 'align-right']);else setSelected(values_13 => values_13.filter(item_13 => item_13 !== 'align-right'));
         break;
       case 'align-justify':
         refs.rootDocument.current.execCommand('justifyFull');
-        if (query('justifyFull')) setSelected(values => [...values.filter(item => !item.includes('align')), 'align-justify']);else setSelected(values => values.filter(item => item !== 'align-justify'));
+        if (query('justifyFull')) setSelected(values_10 => [...values_10.filter(item_10 => !item_10.includes('align')), 'align-justify']);else setSelected(values_11 => values_11.filter(item_11 => item_11 !== 'align-justify'));
         break;
       case 'superscript':
         refs.rootDocument.current.execCommand('superscript');
-        if (query('superscript')) setSelected(values => [...values, 'superscript']);else setSelected(values => values.filter(item => item !== 'superscript'));
+        if (query('superscript')) setSelected(values_8 => [...values_8, 'superscript']);else setSelected(values_9 => values_9.filter(item_9 => item_9 !== 'superscript'));
         break;
       case 'subscript':
         refs.rootDocument.current.execCommand('subscript');
-        if (query('subscript')) setSelected(values => [...values, 'subscript']);else setSelected(values => values.filter(item => item !== 'subscript'));
+        if (query('subscript')) setSelected(values_6 => [...values_6, 'subscript']);else setSelected(values_7 => values_7.filter(item_8 => item_8 !== 'subscript'));
         break;
       case 'indent':
         refs.rootDocument.current.execCommand('indent');
@@ -503,11 +503,11 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         break;
       case 'list-ordered':
         refs.rootDocument.current.execCommand('insertOrderedList');
-        if (query('insertOrderedList')) setSelected(values => [...values.filter(item => !item.includes('list')), 'list-ordered']);else setSelected(values => values.filter(item => item !== 'list-ordered'));
+        if (query('insertOrderedList')) setSelected(values_4 => [...values_4.filter(item_6 => !item_6.includes('list')), 'list-ordered']);else setSelected(values_5 => values_5.filter(item_7 => item_7 !== 'list-ordered'));
         break;
       case 'list-unordered':
         refs.rootDocument.current.execCommand('insertUnorderedList');
-        if (query('insertUnorderedList')) setSelected(values => [...values.filter(item => !item.includes('list')), 'list-unordered']);else setSelected(values => values.filter(item => item !== 'list-unordered'));
+        if (query('insertUnorderedList')) setSelected(values_2 => [...values_2.filter(item_4 => !item_4.includes('list')), 'list-unordered']);else setSelected(values_3 => values_3.filter(item_5 => item_5 !== 'list-unordered'));
         break;
       case 'horizontal-rule':
         refs.rootDocument.current.execCommand('insertHorizontalRule');
@@ -553,8 +553,8 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
       default:
         break;
     }
-  }, []);
-  const includes = (...args) => !is('array', exclude) || args.some(item => !exclude.includes(item));
+  };
+  const includes = (...args_0) => !is('array', exclude) || args_0.some(item_22 => !exclude.includes(item_22));
 
   // italic, underline, bold
   // updates toolbar
@@ -611,78 +611,78 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
   const IconProps = _objectSpread({
     size: 'small'
   }, IconProps_);
-  const WrapperToggleButton = React.useCallback(/*#__PURE__*/React.forwardRef((props_, ref_) => {
+  const WrapperToggleButton = /*#__PURE__*/React.forwardRef((props_, ref_) => {
     const {
         open: open_,
         name,
-        children: children_
+        children: children__0
       } = props_,
-      other_ = _objectWithoutProperties(props_, _excluded2);
+      other__0 = _objectWithoutProperties(props_, _excluded2);
     return /*#__PURE__*/React.createElement(Tooltip, _extends({
       open: open_ !== undefined ? open_ : undefined,
       name: name
-    }, TooltipProps), /*#__PURE__*/React.cloneElement(children_, _objectSpread(_objectSpread({}, other_), children_.props)));
-  }), []);
-  const WrapperAppend = React.useCallback(props_ => {
+    }, TooltipProps), /*#__PURE__*/React.cloneElement(children__0, _objectSpread(_objectSpread({}, other__0), children__0.props)));
+  });
+  const WrapperAppend = props__0 => {
     const {
-        open: open_,
-        element,
+        open: open__0,
+        element: element_0,
         anchorElement,
         onClose,
-        children: children_
-      } = props_,
-      other_ = _objectWithoutProperties(props_, _excluded3);
+        children: children__1
+      } = props__0,
+      other__1 = _objectWithoutProperties(props__0, _excluded3);
     return /*#__PURE__*/React.createElement(Append, _extends({
-      open: open_,
+      open: open__0,
       element: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Fade, {
-        in: open_,
+        in: open__0,
         add: true
-      }, /*#__PURE__*/React.cloneElement(element))),
+      }, /*#__PURE__*/React.cloneElement(element_0))),
       anchorElement: anchorElement,
       portal: true,
       alignment: "center",
       position: "bottom"
-    }, AppendProps), /*#__PURE__*/React.cloneElement(children_, _objectSpread(_objectSpread({}, other_), children_.props)));
-  }, []);
-  const onMouseDown = React.useCallback(() => {
-    const selection_ = refs.rootWindow.current.getSelection();
-    if (selection_.anchorNode && !selection_.anchorNode?.className?.includes('TextField')) refs.range.current = selection_.getRangeAt(0);
-  }, []);
-  const onMouseUp = React.useCallback(() => {
+    }, AppendProps), /*#__PURE__*/React.cloneElement(children__1, _objectSpread(_objectSpread({}, other__1), children__1.props)));
+  };
+  const onMouseDown = () => {
+    const selection__0 = refs.rootWindow.current.getSelection();
+    if (selection__0.anchorNode && !selection__0.anchorNode?.className?.includes('TextField')) refs.range.current = selection__0.getRangeAt(0);
+  };
+  const onMouseUp = () => {
     if (refs.range.current) {
-      const selection_ = refs.rootWindow.current.getSelection();
-      selection_.removeAllRanges();
-      selection_.addRange(refs.range.current);
+      const selection__1 = refs.rootWindow.current.getSelection();
+      selection__1.removeAllRanges();
+      selection__1.addRange(refs.range.current);
     }
-  }, []);
-  const PaletteItem = React.useCallback(props_ => {
+  };
+  const PaletteItem = props__1 => {
     const {
         color: color_
-      } = props_,
-      other_ = _objectWithoutProperties(props_, _excluded4);
+      } = props__1,
+      other__2 = _objectWithoutProperties(props__1, _excluded4);
     return /*#__PURE__*/React.createElement("span", _extends({
       className: classNames([staticClassName('RichTextEditor', theme) && ['onesy-RichTextEditor-palette-item'], classes.paletteItem]),
       style: {
         background: color_
       }
-    }, other_));
-  }, []);
-  const Palette = React.useCallback(/*#__PURE__*/React.forwardRef((props_, ref_) => {
+    }, other__2));
+  };
+  const Palette = /*#__PURE__*/React.forwardRef((props__2, ref__0) => {
     const {
         version: version_,
         onUpdate: onUpdate_,
-        onClose
-      } = props_,
-      other_ = _objectWithoutProperties(props_, _excluded5);
+        onClose: onClose_0
+      } = props__2,
+      other__3 = _objectWithoutProperties(props__2, _excluded5);
     return /*#__PURE__*/React.createElement(Line, _extends({
-      ref: ref_,
+      ref: ref__0,
       gap: 1,
       direction: "column",
       tonal: tonal,
       color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed',
       Component: Surface,
       className: classNames([staticClassName('RichTextEditor', theme) && ['onesy-RichTextEditor-palette'], classes.palette])
-    }, other_), /*#__PURE__*/React.createElement(Line, {
+    }, other__3), /*#__PURE__*/React.createElement(Line, {
       gap: 0.5,
       onMouseUp: onMouseUp,
       onMouseDown: onMouseDown
@@ -696,32 +696,32 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
       color: "#000000",
       onClick: () => {
         onUpdate_('#000000');
-        onClose();
+        onClose_0();
       }
     }), /*#__PURE__*/React.createElement(PaletteItem, {
       color: "#ffffff",
       onClick: () => {
         onUpdate_('#ffffff');
-        onClose();
+        onClose_0();
       }
-    })), Object.keys(colors).filter(item => !['black', 'white'].includes(item)).map((item, index) => /*#__PURE__*/React.createElement(Line, {
-      key: index,
+    })), Object.keys(colors).filter(item_23 => !['black', 'white'].includes(item_23)).map((item_24, index_0) => /*#__PURE__*/React.createElement(Line, {
+      key: index_0,
       gap: 0.5,
       direction: "row",
       style: {
         width: '100%'
       }
-    }, Object.keys(colors[item]).map((item_, index_) => /*#__PURE__*/React.createElement(PaletteItem, {
+    }, Object.keys(colors[item_24]).map((item_, index_) => /*#__PURE__*/React.createElement(PaletteItem, {
       key: index_,
-      color: colors[item][item_],
+      color: colors[item_24][item_],
       onClick: () => {
         if (refs.range.current) {
-          const selection_ = refs.rootWindow.current.getSelection();
-          selection_.removeAllRanges();
-          selection_.addRange(refs.range.current);
+          const selection__2 = refs.rootWindow.current.getSelection();
+          selection__2.removeAllRanges();
+          selection__2.addRange(refs.range.current);
         }
-        onUpdate_(colors[item][item_]);
-        onClose();
+        onUpdate_(colors[item_24][item_]);
+        onClose_0();
       }
     }))))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Line, {
       gap: 0.5,
@@ -747,16 +747,16 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
       size: "small",
       onClick: () => {
         if (refs.range.current) {
-          const selection_ = refs.rootWindow.current.getSelection();
-          selection_.removeAllRanges();
-          selection_.addRange(refs.range.current);
+          const selection__3 = refs.rootWindow.current.getSelection();
+          selection__3.removeAllRanges();
+          selection__3.addRange(refs.range.current);
         }
         onUpdate_(refs.inputValues.current[version_]);
-        onClose();
+        onClose_0();
       }
     }, "Apply")));
-  }), []);
-  const Input = React.useCallback(/*#__PURE__*/React.forwardRef((props_, ref_) => {
+  });
+  const Input = /*#__PURE__*/React.forwardRef((props__3, ref__1) => {
     const {
         label,
         labelButton,
@@ -765,17 +765,17 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         onClick,
         InputComponent = TextField,
         InputProps
-      } = props_,
-      other_ = _objectWithoutProperties(props_, _excluded6);
+      } = props__3,
+      other__4 = _objectWithoutProperties(props__3, _excluded6);
     return /*#__PURE__*/React.createElement(Line, _extends({
-      ref: ref_,
+      ref: ref__1,
       gap: 1,
       direction: "column",
       tonal: tonal,
       color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed',
       Component: Surface,
       className: classNames([staticClassName('RichTextEditor', theme) && ['onesy-RichTextEditor-palette'], classes.palette])
-    }, other_), /*#__PURE__*/React.createElement(Line, {
+    }, other__4), /*#__PURE__*/React.createElement(Line, {
       gap: 0.5,
       direction: "row",
       align: "center",
@@ -798,7 +798,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
       size: "small",
       onClick: onClick
     }, labelButton)));
-  }), []);
+  });
   const font_families = [...fontFamilies, ...addFontFamilies];
   const font_sizes = [{
     label: '11',
@@ -893,47 +893,47 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
       name: 'list-unordered',
       command: 'insertUnorderedList'
     }];
-    updateOptionValues.forEach(item => {
-      if (query(item.command)) selected_.push(item.name);
+    updateOptionValues.forEach(item_25 => {
+      if (query(item_25.command)) selected_.push(item_25.name);
     });
 
     // Font version
     const fontVersion = query('formatBlock');
-    const fontVersionValue = font_versions.find(item_ => item_.value === fontVersion) || font_versions[0];
+    const fontVersionValue = font_versions.find(item__0 => item__0.value === fontVersion) || font_versions[0];
     inputValues_['font-version'] = fontVersionValue?.value;
 
     // Font family
     const fontFamily = query('fontName');
-    const fontFamilyValue = font_families.find(item_ => fontFamily?.includes(item_.label)) || font_families.find(item_ => item_.label === 'DM Sans');
+    const fontFamilyValue = font_families.find(item__2 => fontFamily?.includes(item__2.label)) || font_families.find(item__1 => item__1.label === 'DM Sans');
     inputValues_['font-family'] = fontFamilyValue?.value;
 
     // Font version
     const fontSize = query('fontSize');
-    const fontSizeValue = font_sizes.find(item_ => item_.value === fontSize) || font_sizes.find(item_ => item_.label === '14');
+    const fontSizeValue = font_sizes.find(item__4 => item__4.value === fontSize) || font_sizes.find(item__3 => item__3.label === '14');
     inputValues_['font-size'] = fontSizeValue?.value;
     setInputValues(inputValues_);
     setSelected(selected_);
   };
-  const onMouseUpValue = React.useCallback(() => {
+  const onMouseUpValue = () => {
     queryValueUpdate();
     setTimeout(() => {
-      const selection_ = refs.rootWindow.current.getSelection();
-      if (!selection_.anchorNode || !refs.value.current.contains(selection_.anchorNode)) return setSelection('');
-      const rect = selection_.getRangeAt(0).getBoundingClientRect();
+      const selection__4 = refs.rootWindow.current.getSelection();
+      if (!selection__4.anchorNode || !refs.value.current.contains(selection__4.anchorNode)) return setSelection('');
+      const rect = selection__4.getRangeAt(0).getBoundingClientRect();
       setSelection(Math.round(rect.width) ? rect : '');
     });
-  }, []);
-  const onMouseDownValue = React.useCallback(() => {
+  };
+  const onMouseDownValue = () => {
     queryValueUpdate();
-  }, []);
+  };
   const updateElements = {
     'font-version': /*#__PURE__*/React.createElement(Select, _extends({
       name: l('Font Version'),
-      valueDefault: font_versions.find(item => item.value.includes('p')).value,
+      valueDefault: font_versions.find(item_26 => item_26.value.includes('p')).value,
       value: inputValues['font-version'],
-      onChange: valueNew => {
-        updateInputValues('font-version', valueNew);
-        method('font-version')(valueNew);
+      onChange: valueNew_0 => {
+        updateInputValues('font-version', valueNew_0);
+        method('font-version')(valueNew_0);
       },
       onMouseUp: onMouseUp,
       onMouseDown: onMouseDown
@@ -942,19 +942,19 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
       style: {
         minWidth: '150px'
       }
-    }), font_versions.map(item => /*#__PURE__*/React.createElement(ListItem, _extends({
-      key: item.value,
-      primary: item.label,
-      value: item.value,
+    }), font_versions.map(item_27 => /*#__PURE__*/React.createElement(ListItem, _extends({
+      key: item_27.value,
+      primary: item_27.label,
+      value: item_27.value,
       button: true
     }, ListItemProps)))),
     'font-family': /*#__PURE__*/React.createElement(Select, _extends({
       name: l('Font Family'),
-      valueDefault: font_families.find(item => item.label.includes('DM Sans')).value,
+      valueDefault: font_families.find(item_28 => item_28.label.includes('DM Sans')).value,
       value: inputValues['font-family'],
-      onChange: valueNew => {
-        updateInputValues('font-family', valueNew);
-        method('font-family')(valueNew);
+      onChange: valueNew_1 => {
+        updateInputValues('font-family', valueNew_1);
+        method('font-family')(valueNew_1);
       },
       onMouseUp: onMouseUp,
       onMouseDown: onMouseDown
@@ -963,31 +963,31 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
       style: {
         minWidth: '140px'
       }
-    }), font_families.map(item => /*#__PURE__*/React.createElement(ListItem, _extends({
-      key: item.value,
-      primary: item.label,
-      value: item.value,
+    }), font_families.map(item_29 => /*#__PURE__*/React.createElement(ListItem, _extends({
+      key: item_29.value,
+      primary: item_29.label,
+      value: item_29.value,
       button: true,
       style: {
-        fontFamily: item.value
+        fontFamily: item_29.value
       }
     }, ListItemProps)))),
     'font-size': /*#__PURE__*/React.createElement(Select, _extends({
       name: l('Font Size'),
-      valueDefault: +font_sizes.find(item => item.label.includes('14')).value,
+      valueDefault: +font_sizes.find(item_30 => item_30.label.includes('14')).value,
       value: inputValues['font-size'],
-      onChange: valueNew => {
-        updateInputValues('font-size', +valueNew);
-        method('font-size')(+valueNew);
+      onChange: valueNew_2 => {
+        updateInputValues('font-size', +valueNew_2);
+        method('font-size')(+valueNew_2);
       },
       onMouseUp: onMouseUp,
       onMouseDown: onMouseDown
     }, SelectProps, {
       className: classNames([staticClassName('RichTextEditor', theme) && ['onesy-RichTextEditor-select'], SelectProps?.className, classes.select])
-    }), font_sizes.map(item => /*#__PURE__*/React.createElement(ListItem, _extends({
-      key: item.value,
-      primary: item.label,
-      value: item.value,
+    }), font_sizes.map(item_31 => /*#__PURE__*/React.createElement(ListItem, _extends({
+      key: item_31.value,
+      primary: item_31.label,
+      value: item_31.value,
       button: true
     }, ListItemProps)))),
     'italic': /*#__PURE__*/React.createElement(WrapperToggleButton, {
@@ -1168,12 +1168,12 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         name: l('Link'),
         labelButton: l('Add'),
         value: refs.inputValues.current.link,
-        onChange: valueNew => updateInputValues('link', valueNew),
+        onChange: valueNew_3 => updateInputValues('link', valueNew_3),
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__5 = refs.rootWindow.current.getSelection();
+            selection__5.removeAllRanges();
+            selection__5.addRange(refs.range.current);
           }
           method('link-add')(refs.inputValues.current.link);
           updateOpen('link', false);
@@ -1200,12 +1200,12 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         name: l('Link'),
         labelButton: l('Add'),
         value: refs.inputValues.current.link,
-        onChange: valueNew => updateInputValues('link', valueNew),
+        onChange: valueNew_4 => updateInputValues('link', valueNew_4),
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__6 = refs.rootWindow.current.getSelection();
+            selection__6.removeAllRanges();
+            selection__6.addRange(refs.range.current);
           }
           method('link-add')(refs.inputValues.current.link);
           updateOpen('linkMiniMenu', false);
@@ -1236,15 +1236,15 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         name: l('Quote'),
         labelButton: l('Add'),
         value: refs.inputValues.current.quote,
-        onChange: valueNew => updateInputValues('quote', valueNew),
+        onChange: valueNew_5 => updateInputValues('quote', valueNew_5),
         InputProps: {
           multiline: true
         },
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__7 = refs.rootWindow.current.getSelection();
+            selection__7.removeAllRanges();
+            selection__7.addRange(refs.range.current);
           }
           method('html')(`<blockquote>${refs.inputValues.current.quote}</blockquote>`);
           updateOpen('quote', false);
@@ -1286,7 +1286,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         increment: false,
         decrement: false,
         value: refs.inputValues.current.tableRows,
-        onChange: valueNew => updateInputValues('tableRows', valueNew)
+        onChange: valueNew_6 => updateInputValues('tableRows', valueNew_6)
       }), "\xD7", /*#__PURE__*/React.createElement(NumericTextField, {
         name: l('Columns'),
         tonal: tonal,
@@ -1296,7 +1296,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         increment: false,
         decrement: false,
         value: refs.inputValues.current.tableColumns,
-        onChange: valueNew => updateInputValues('tableColumns', valueNew)
+        onChange: valueNew_7 => updateInputValues('tableColumns', valueNew_7)
       })), /*#__PURE__*/React.createElement(Line, {
         gap: 1,
         direction: "row",
@@ -1311,7 +1311,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         tonal: tonal,
         color: props.color !== undefined ? props.color : 'default',
         checked: refs.inputValues.current.tableHeader,
-        onChange: valueNew => updateInputValues('tableHeader', valueNew)
+        onChange: valueNew_8 => updateInputValues('tableHeader', valueNew_8)
       }), l('Header')), /*#__PURE__*/React.createElement(Button, {
         tonal: tonal,
         color: "inherit",
@@ -1319,9 +1319,9 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         size: "small",
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__8 = refs.rootWindow.current.getSelection();
+            selection__8.removeAllRanges();
+            selection__8.addRange(refs.range.current);
           }
           let table = `<table>`;
           if (refs.inputValues.current.tableHeader && refs.inputValues.current.tableColumns > 0) {
@@ -1361,12 +1361,12 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         name: l('Image'),
         labelButton: l('Add'),
         value: refs.inputValues.current.image,
-        onChange: valueNew => updateInputValues('image', valueNew),
+        onChange: valueNew_9 => updateInputValues('image', valueNew_9),
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__9 = refs.rootWindow.current.getSelection();
+            selection__9.removeAllRanges();
+            selection__9.addRange(refs.range.current);
           }
           method('image')(refs.inputValues.current.image);
           updateOpen('image', false);
@@ -1392,12 +1392,12 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         name: l('Video'),
         labelButton: l('Add'),
         value: refs.inputValues.current.video,
-        onChange: valueNew => updateInputValues('video', valueNew),
+        onChange: valueNew_10 => updateInputValues('video', valueNew_10),
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__10 = refs.rootWindow.current.getSelection();
+            selection__10.removeAllRanges();
+            selection__10.addRange(refs.range.current);
           }
           method('html')(`<video controls><source src='${refs.inputValues.current.video}' /></video>`);
           updateOpen('video', false);
@@ -1423,12 +1423,12 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         name: l('Youtube Video ID'),
         labelButton: l('Add'),
         value: refs.inputValues.current.videoYoutube,
-        onChange: valueNew => updateInputValues('videoYoutube', valueNew),
+        onChange: valueNew_11 => updateInputValues('videoYoutube', valueNew_11),
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__11 = refs.rootWindow.current.getSelection();
+            selection__11.removeAllRanges();
+            selection__11.addRange(refs.range.current);
           }
           method('html')(`<iframe width="560" height="315" src="https://www.youtube.com/embed/${refs.inputValues.current.videoYoutube}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`);
           updateOpen('videoYoutube', false);
@@ -1491,9 +1491,9 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         size: "small",
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__12 = refs.rootWindow.current.getSelection();
+            selection__12.removeAllRanges();
+            selection__12.addRange(refs.range.current);
           }
 
           // Get svg html element
@@ -1509,8 +1509,8 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
           svgClone.style.boxShadow = 'none';
           const pointers = Array.from(svgClone.querySelectorAll('.onesy-Drawing-pointer'));
           pointers.forEach(pointer => pointer.remove());
-          const valueNew = svgClone.outerHTML;
-          method('html')(valueNew);
+          const valueNew_12 = svgClone.outerHTML;
+          method('html')(valueNew_12);
           updateOpen('drawing', false);
         }
       }, l('Add')))))
@@ -1533,15 +1533,15 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         name: l('Code'),
         labelButton: l('Add'),
         value: refs.inputValues.current.code,
-        onChange: valueNew => updateInputValues('code', valueNew),
+        onChange: valueNew_13 => updateInputValues('code', valueNew_13),
         InputProps: {
           multiline: true
         },
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__13 = refs.rootWindow.current.getSelection();
+            selection__13.removeAllRanges();
+            selection__13.addRange(refs.range.current);
           }
           method('html')(`<pre><code>${refs.inputValues.current.code}</code></pre>`);
           updateOpen('code', false);
@@ -1566,11 +1566,11 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
     }), /*#__PURE__*/React.createElement(IconClear, IconProps)))
   };
   return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: item => {
+    ref: item_32 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_32);else ref.current = item_32;
       }
-      refs.root.current = item;
+      refs.root.current = item_32;
     },
     gap: 0,
     Component: Component,
@@ -1669,17 +1669,17 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
   }))), miniMenu && !!refs.miniMenuInclude.current.length && /*#__PURE__*/React.createElement(Append, _extends({
     open: selection,
     element: ({
-      ref: ref_,
-      values,
+      ref: ref__2,
+      values: values_26,
       style
     }) => /*#__PURE__*/React.createElement("div", {
-      ref: item => {
-        if (ref_) {
-          if (is('function', ref_)) ref_(item);else ref_.current = item;
-          refs.miniMenu.current = item;
+      ref: item_33 => {
+        if (ref__2) {
+          if (is('function', ref__2)) ref__2(item_33);else ref__2.current = item_33;
+          refs.miniMenu.current = item_33;
         }
       },
-      style: _objectSpread(_objectSpread({}, values?.x === 0 && values?.y === 0 ? {
+      style: _objectSpread(_objectSpread({}, values_26?.x === 0 && values_26?.y === 0 ? {
         visibility: 'hidden'
       } : undefined), style)
     }, /*#__PURE__*/React.createElement(Fade, {