@onesy/ui-react 1.0.58 → 1.0.60

package/esm/RichTextEditor/RichTextEditor.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "value", "onChange", "render", "miniMenu", "miniMenuInclude", "exclude", "updates", "actions", "fontFamilies", "addFontFamilies", "IconItalic", "IconUnderline", "IconBold", "IconStrikeLine", "IconColor", "IconBackground", "IconAlignLeft", "IconAlignCenter", "IconAlignRight", "IconAlignJustify", "IconIndent", "IconOutdent", "IconSuperscript", "IconSubscript", "IconListOrdered", "IconListUnordered", "IconHorizontalRule", "IconLinkAdd", "IconLinkRemove", "IconQuote", "IconImage", "IconVideo", "IconVideoYoutube", "IconTable", "IconCode", "IconDrawing", "IconCopy", "IconCut", "IconPaste", "IconDelete", "IconClear", "IconSelectAll", "IconSave", "IconPrint", "IconUndo", "IconRedo", "AppendProps", "ToolbarProps", "ToolbarUpdatesProps", "ToolbarActionsProps", "ToggleButtonProps", "ToggleButtonsProps", "DividerProps", "SelectProps", "ListItemProps", "TooltipProps", "MiniMenuProps", "DrawingProps", "IconProps", "ColorTextFieldProps", "Component", "className", "children"],
-  _excluded2 = ["open", "label", "children"],
+  _excluded2 = ["open", "name", "children"],
   _excluded3 = ["open", "element", "anchorElement", "onClose", "children"],
   _excluded4 = ["color"],
   _excluded5 = ["version", "onUpdate", "onClose"],
@@ -224,6 +224,7 @@ 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]);
@@ -639,13 +640,13 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
   const WrapperToggleButton = React.useCallback(/*#__PURE__*/React.forwardRef((props_, ref_) => {
     const {
         open: open_,
-        label,
+        name,
         children: children_
       } = props_,
       other_ = _objectWithoutProperties(props_, _excluded2);
     return /*#__PURE__*/React.createElement(Tooltip, _extends({
       open: open_ !== undefined ? open_ : undefined,
-      label: label
+      name: name
     }, TooltipProps), /*#__PURE__*/React.cloneElement(children_, _objectSpread(_objectSpread({}, other_), children_.props)));
   }), []);
   const WrapperAppend = React.useCallback(props_ => {
@@ -758,7 +759,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
     }, /*#__PURE__*/React.createElement(ColorTextField, _extends({
       tonal: tonal,
       color: color,
-      label: "Custom color",
+      name: l('Custom color'),
       version: "outlined",
       size: "small",
       value: refs.inputValues.current[version_],
@@ -810,7 +811,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
     }, /*#__PURE__*/React.createElement(InputComponent, _extends({
       tonal: tonal,
       color: color,
-      label: label,
+      name: label,
       version: "outlined",
       size: "small",
       value: value__,
@@ -850,32 +851,32 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
   const font_versions = [{
     label: /*#__PURE__*/React.createElement(Type, {
       version: "b2"
-    }, "Normal text"),
+    }, l('Normal text')),
     value: 'p'
   }, {
     label: /*#__PURE__*/React.createElement(Type, {
       version: "h1"
-    }, "Heading 1"),
+    }, l('Heading 1')),
     value: 'h1'
   }, {
     label: /*#__PURE__*/React.createElement(Type, {
       version: "h2"
-    }, "Heading 2"),
+    }, l('Heading 2')),
     value: 'h2'
   }, {
     label: /*#__PURE__*/React.createElement(Type, {
       version: "h3"
-    }, "Heading 3"),
+    }, l('Heading 3')),
     value: 'h3'
   }, {
     label: /*#__PURE__*/React.createElement(Type, {
       version: "t1"
-    }, "Heading 4"),
+    }, l('Heading 4')),
     value: 'h4'
   }, {
     label: /*#__PURE__*/React.createElement(Type, {
       version: "t2"
-    }, "Heading 5"),
+    }, l('Heading 5')),
     value: 'h5'
   }];
   const queryValueUpdate = () => {
@@ -953,7 +954,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
   }, []);
   const updateElements = {
     'font-version': /*#__PURE__*/React.createElement(Select, _extends({
-      label: "Font Version",
+      name: l('Font Version'),
       valueDefault: font_versions.find(item => item.value.includes('p')).value,
       value: inputValues['font-version'],
       onChange: valueNew => {
@@ -974,7 +975,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
       button: true
     }, ListItemProps)))),
     'font-family': /*#__PURE__*/React.createElement(Select, _extends({
-      label: "Font Family",
+      name: l('Font Family'),
       valueDefault: font_families.find(item => item.label.includes('DM Sans')).value,
       value: inputValues['font-family'],
       onChange: valueNew => {
@@ -998,7 +999,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
       }
     }, ListItemProps)))),
     'font-size': /*#__PURE__*/React.createElement(Select, _extends({
-      label: "Font Size",
+      name: l('Font Size'),
       valueDefault: +font_sizes.find(item => item.label.includes('14')).value,
       value: inputValues['font-size'],
       onChange: valueNew => {
@@ -1016,25 +1017,25 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
       button: true
     }, ListItemProps)))),
     'italic': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Italic"
+      name: l('Italic')
     }, is('function', render) ? render('italic', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       selected: refs.selected.current.includes('italic'),
       onClick: method('italic')
     }), /*#__PURE__*/React.createElement(IconItalic, IconProps))),
     'underline': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Underline"
+      name: l('Underline')
     }, is('function', render) ? render('underline', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       selected: refs.selected.current.includes('underline'),
       onClick: method('underline')
     }), /*#__PURE__*/React.createElement(IconUnderline, IconProps))),
     'bold': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Bold",
+      name: l('Bold'),
       onClick: method('bold')
     }, is('function', render) ? render('bold', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       selected: refs.selected.current.includes('bold')
     }), /*#__PURE__*/React.createElement(IconBold, IconProps))),
     'strike-line': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Strike Line",
+      name: l('Strike Line'),
       onClick: method('strike-line')
     }, is('function', render) ? render('strike-line', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       selected: refs.selected.current.includes('strike-line')
@@ -1051,7 +1052,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         onUpdate: method('font-color')
       }))
     }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Text Color",
+      name: l('Text Color'),
       open: refs.open.current.color ? false : undefined
     }, is('function', render) ? render('font-color', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({
       ref: refs.elements.color
@@ -1072,7 +1073,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         onUpdate: method('font-color')
       }))
     }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Text Color",
+      name: l('Text Color'),
       open: refs.open.current.colorMiniMenu ? false : undefined
     }, is('function', render) ? render('font-color', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({
       ref: refs.miniMenuElements.color
@@ -1092,7 +1093,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         onUpdate: method('font-background')
       }))
     }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Background Color",
+      name: l('Background Color'),
       open: refs.open.current.background ? false : undefined
     }, is('function', render) ? render('font-background', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({
       ref: refs.elements.background
@@ -1113,7 +1114,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         onUpdate: method('font-background')
       }))
     }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Text Color",
+      name: l('Text Color'),
       open: refs.open.current.backgroundMiniMenu ? false : undefined
     }, is('function', render) ? render('font-background', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({
       ref: refs.miniMenuElements.background
@@ -1122,65 +1123,65 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
       onClick: () => updateOpen('backgroundMiniMenu', !refs.open.current.backgroundMiniMenu)
     }), /*#__PURE__*/React.createElement(IconBackground, IconProps)))),
     'align-left': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Align Left"
+      name: l('Align Left')
     }, is('function', render) ? render('align-left', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       selected: refs.selected.current.includes('align-left'),
       onClick: method('align-left')
     }), /*#__PURE__*/React.createElement(IconAlignLeft, IconProps))),
     'align-center': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Align Center"
+      name: l('Align Center')
     }, is('function', render) ? render('align-center', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       selected: refs.selected.current.includes('align-center'),
       onClick: method('align-center')
     }), /*#__PURE__*/React.createElement(IconAlignCenter, IconProps))),
     'align-right': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Align Right"
+      name: l('Align Right')
     }, is('function', render) ? render('align-right', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       selected: refs.selected.current.includes('align-right'),
       onClick: method('align-right')
     }), /*#__PURE__*/React.createElement(IconAlignRight, IconProps))),
     'align-justify': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Align Justify"
+      name: l('Align Justify')
     }, is('function', render) ? render('align-justify', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       selected: refs.selected.current.includes('align-justify'),
       onClick: method('align-justify')
     }), /*#__PURE__*/React.createElement(IconAlignJustify, IconProps))),
     'indent': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Indent"
+      name: l('Indent')
     }, is('function', render) ? render('indent', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       onClick: method('indent')
     }), /*#__PURE__*/React.createElement(IconIndent, IconProps))),
     'outdent': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Outdent"
+      name: l('Outdent')
     }, is('function', render) ? render('outdent', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       onClick: method('outdent')
     }), /*#__PURE__*/React.createElement(IconOutdent, IconProps))),
     'superscript': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Superscript"
+      name: l('Superscript')
     }, is('function', render) ? render('superscript', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       selected: refs.selected.current.includes('superscript'),
       onClick: method('superscript')
     }), /*#__PURE__*/React.createElement(IconSuperscript, IconProps))),
     'subscript': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Subscript"
+      name: l('Subscript')
     }, is('function', render) ? render('subscript', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       selected: refs.selected.current.includes('subscript'),
       onClick: method('subscript')
     }), /*#__PURE__*/React.createElement(IconSubscript, IconProps))),
     'list-ordered': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "List Ordered"
+      name: l('List Ordered')
     }, is('function', render) ? render('list-ordered', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       selected: refs.selected.current.includes('list-ordered'),
       onClick: method('list-ordered')
     }), /*#__PURE__*/React.createElement(IconListOrdered, IconProps))),
     'list-unordered': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "List Unordered"
+      name: l('List Unordered')
     }, is('function', render) ? render('list-unordered', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       selected: refs.selected.current.includes('list-unordered'),
       onClick: method('list-unordered')
     }), /*#__PURE__*/React.createElement(IconListUnordered, IconProps))),
     'horizontal-rule': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Insert Horizontal Rule",
+      name: l('Insert Horizontal Rule'),
       onClick: method('horizontal-rule')
     }, is('function', render) ? render('horizontal-rule', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, ToggleButtonProps, /*#__PURE__*/React.createElement(IconHorizontalRule, IconProps))),
     'link-add': /*#__PURE__*/React.createElement(WrapperAppend, {
@@ -1190,8 +1191,8 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         onClickOutside: () => updateOpen('link', false),
         include: [refs.elements.linkAdd.current]
       }, /*#__PURE__*/React.createElement(Input, {
-        label: "Link",
-        labelButton: "Add",
+        name: l('Link'),
+        labelButton: l('Add'),
         value: refs.inputValues.current.link,
         onChange: valueNew => updateInputValues('link', valueNew),
         onClick: () => {
@@ -1206,7 +1207,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         }
       }))
     }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Insert Link",
+      name: l('Insert Link'),
       open: refs.open.current.link ? false : undefined
     }, is('function', render) ? render('font-color', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({
       ref: refs.elements.linkAdd
@@ -1222,8 +1223,8 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         include: [refs.miniMenuElements.linkAdd]
       }, /*#__PURE__*/React.createElement(Input, {
         ref: refs.miniMenuElements.linkAddInput,
-        label: "Link",
-        labelButton: "Add",
+        name: l('Link'),
+        labelButton: l('Add'),
         value: refs.inputValues.current.link,
         onChange: valueNew => updateInputValues('link', valueNew),
         onClick: () => {
@@ -1238,7 +1239,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         }
       }))
     }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Insert Link",
+      name: l('Insert Link'),
       open: refs.open.current.linkMiniMenu ? false : undefined
     }, is('function', render) ? render('font-color', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({
       ref: refs.miniMenuElements.linkAdd
@@ -1247,7 +1248,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
       onClick: () => updateOpen('linkMiniMenu', !refs.open.current.linkMiniMenu)
     }), /*#__PURE__*/React.createElement(IconLinkAdd, IconProps)))),
     'link-remove': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Remove Link"
+      name: l('Remove Link')
     }, is('function', render) ? render('link-remove', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       onClick: method('link-remove')
     }), /*#__PURE__*/React.createElement(IconLinkRemove, IconProps))),
@@ -1258,8 +1259,8 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         onClickOutside: () => updateOpen('quote', false),
         include: [refs.elements.quote.current]
       }, /*#__PURE__*/React.createElement(Input, {
-        label: "Quote",
-        labelButton: "Add",
+        name: l('Quote'),
+        labelButton: l('Add'),
         value: refs.inputValues.current.quote,
         onChange: valueNew => updateInputValues('quote', valueNew),
         InputProps: {
@@ -1277,7 +1278,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         }
       }))
     }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Insert Quote",
+      name: l('Insert Quote'),
       open: refs.open.current.quote ? false : undefined
     }, is('function', render) ? render('quote', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({
       ref: refs.elements.quote
@@ -1303,7 +1304,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         align: "center",
         justify: "center"
       }, /*#__PURE__*/React.createElement(NumericTextField, {
-        label: "Rows",
+        name: l('Rows'),
         tonal: tonal,
         color: color,
         size: "small",
@@ -1313,7 +1314,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         value: refs.inputValues.current.tableRows,
         onChange: valueNew => updateInputValues('tableRows', valueNew)
       }), "\xD7", /*#__PURE__*/React.createElement(NumericTextField, {
-        label: "Columns",
+        name: l('Columns'),
         tonal: tonal,
         color: color,
         size: "small",
@@ -1337,7 +1338,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         color: props.color !== undefined ? props.color : 'default',
         checked: refs.inputValues.current.tableHeader,
         onChange: valueNew => updateInputValues('tableHeader', valueNew)
-      }), "Header"), /*#__PURE__*/React.createElement(Button, {
+      }), l('Header')), /*#__PURE__*/React.createElement(Button, {
         tonal: tonal,
         color: "inherit",
         version: "text",
@@ -1366,9 +1367,9 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
           updateInputValues('tableColumns', '');
           updateInputValues('tableHeader', '');
         }
-      }, "Add"))))
+      }, l('Add')))))
     }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Insert Table",
+      name: l('Insert Table'),
       open: refs.open.current.table ? false : undefined
     }, is('function', render) ? render('table', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({
       ref: refs.elements.table
@@ -1383,8 +1384,8 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         onClickOutside: () => updateOpen('image', false),
         include: [refs.elements.image.current]
       }, /*#__PURE__*/React.createElement(Input, {
-        label: "Image",
-        labelButton: "Add",
+        name: l('Image'),
+        labelButton: l('Add'),
         value: refs.inputValues.current.image,
         onChange: valueNew => updateInputValues('image', valueNew),
         onClick: () => {
@@ -1399,7 +1400,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         }
       }))
     }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Insert Image",
+      name: l('Insert Image'),
       open: refs.open.current.image ? false : undefined
     }, is('function', render) ? render('image', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({
       ref: refs.elements.image
@@ -1414,8 +1415,8 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         onClickOutside: () => updateOpen('video', false),
         include: [refs.elements.video.current]
       }, /*#__PURE__*/React.createElement(Input, {
-        label: "Video",
-        labelButton: "Add",
+        name: l('Video'),
+        labelButton: l('Add'),
         value: refs.inputValues.current.video,
         onChange: valueNew => updateInputValues('video', valueNew),
         onClick: () => {
@@ -1430,7 +1431,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         }
       }))
     }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Insert Video",
+      name: l('Insert Video'),
       open: refs.open.current.video ? false : undefined
     }, is('function', render) ? render('video', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({
       ref: refs.elements.video
@@ -1445,8 +1446,8 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         onClickOutside: () => updateOpen('videoYoutube', false),
         include: [refs.elements.videoYoutube.current]
       }, /*#__PURE__*/React.createElement(Input, {
-        label: "Youtube Video ID",
-        labelButton: "Add",
+        name: l('Youtube Video ID'),
+        labelButton: l('Add'),
         value: refs.inputValues.current.videoYoutube,
         onChange: valueNew => updateInputValues('videoYoutube', valueNew),
         onClick: () => {
@@ -1461,7 +1462,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         }
       }))
     }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Insert Youtube Video",
+      name: l('Insert Youtube Video'),
       open: refs.open.current.videoYoutube ? false : undefined
     }, is('function', render) ? render('videoYoutube', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({
       ref: refs.elements.videoYoutube
@@ -1538,9 +1539,9 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
           method('html')(valueNew);
           updateOpen('drawing', false);
         }
-      }, "Add"))))
+      }, l('Add')))))
     }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Insert Drawing",
+      name: l('Insert Drawing'),
       open: refs.open.current.drawing ? false : undefined
     }, is('function', render) ? render('drawing', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({
       ref: refs.elements.drawing
@@ -1555,8 +1556,8 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         onClickOutside: () => updateOpen('code', false),
         include: [refs.elements.code.current]
       }, /*#__PURE__*/React.createElement(Input, {
-        label: "Code",
-        labelButton: "Add",
+        name: l('Code'),
+        labelButton: l('Add'),
         value: refs.inputValues.current.code,
         onChange: valueNew => updateInputValues('code', valueNew),
         InputProps: {
@@ -1574,7 +1575,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         }
       }))
     }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Insert Code",
+      name: l('Insert Code'),
       open: refs.open.current.code ? false : undefined
     }, is('function', render) ? render('code', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({
       ref: refs.elements.code
@@ -1585,7 +1586,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
   };
   const actionElements = {
     'clear': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Clear"
+      name: l('Clear')
     }, is('function', render) ? render('clear', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       onClick: method('clear')
     }), /*#__PURE__*/React.createElement(IconClear, IconProps)))
@@ -1617,7 +1618,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
     align: "center",
     justify: "flex-start",
     role: "toolbar",
-    "aria-label": "Updates"
+    "aria-label": l('Updates')
   }, ToolbarUpdatesProps, {
     className: classNames([staticClassName('RichTextEditor', theme) && ['onesy-RichTextEditor-toolbar'], ToolbarUpdatesProps?.className, classes.toolbar, classes.toolbar_updates])
   }), includes('font-family', 'font-size', 'font-version') && /*#__PURE__*/React.createElement(Line, {
@@ -1633,7 +1634,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
     align: "center",
     justify: "flex-start",
     role: "toolbar",
-    "aria-label": "Actions"
+    "aria-label": l('Actions')
   }, ToolbarActionsProps, {
     className: classNames([staticClassName('RichTextEditor', theme) && ['onesy-RichTextEditor-toolbar'], ToolbarActionsProps?.className, classes.toolbar, classes.toolbar_actions])
   }), /*#__PURE__*/React.createElement(Line, {
@@ -1649,19 +1650,19 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
     align: "center",
     justify: "flex-start"
   }, includes('copy', 'cut', 'paste', 'delete') && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, includes('copy') && /*#__PURE__*/React.createElement(WrapperToggleButton, {
-    label: "Copy"
+    name: l('Copy')
   }, is('function', render) ? render('copy', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
     onClick: method('copy')
   }), /*#__PURE__*/React.createElement(IconCopy, IconProps))), includes('cut') && /*#__PURE__*/React.createElement(WrapperToggleButton, {
-    label: "Cut"
+    name: l('Cut')
   }, is('function', render) ? render('cut', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
     onClick: method('cut')
   }), /*#__PURE__*/React.createElement(IconCut, IconProps))), includes('paste') && /*#__PURE__*/React.createElement(WrapperToggleButton, {
-    label: "Paste"
+    name: l('Paste')
   }, is('function', render) ? render('paste', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
     onClick: method('paste')
   }), /*#__PURE__*/React.createElement(IconPaste, IconProps))), includes('delete') && /*#__PURE__*/React.createElement(WrapperToggleButton, {
-    label: "Delete"
+    name: l('Delete')
   }, is('function', render) ? render('delete', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
     onClick: method('delete')
   }), /*#__PURE__*/React.createElement(IconDelete, IconProps))))), /*#__PURE__*/React.createElement(Line, {
@@ -1670,23 +1671,23 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
     align: "center",
     justify: "flex-start"
   }, includes('clear', 'select-all') && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, includes('clear') && actionElements['clear'], includes('select-all') && /*#__PURE__*/React.createElement(WrapperToggleButton, {
-    label: "Select All"
+    name: l('Select All')
   }, is('function', render) ? render('select-all', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
     onClick: method('select-all')
   }), /*#__PURE__*/React.createElement(IconSelectAll, IconProps)))), includes('undo', 'redo') && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, includes('undo') && /*#__PURE__*/React.createElement(WrapperToggleButton, {
-    label: "Undo"
+    name: l('Undo')
   }, is('function', render) ? render('undo', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
     onClick: method('undo')
   }), /*#__PURE__*/React.createElement(IconUndo, IconProps))), includes('redo') && /*#__PURE__*/React.createElement(WrapperToggleButton, {
-    label: "Redo"
+    name: l('Redo')
   }, is('function', render) ? render('redo', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
     onClick: method('redo')
   }), /*#__PURE__*/React.createElement(IconRedo, IconProps)))), includes('save', 'print') && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, includes('save') && /*#__PURE__*/React.createElement(WrapperToggleButton, {
-    label: "Save"
+    name: l('Save')
   }, is('function', render) ? render('save', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
     onClick: () => save(refs.value.current)
   }), /*#__PURE__*/React.createElement(IconSave, IconProps))), includes('print') && /*#__PURE__*/React.createElement(WrapperToggleButton, {
-    label: "Print"
+    name: l('Print')
   }, is('function', render) ? render('print', ToggleButtonProps, refs.value.current, method) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
     onClick: () => print(refs.value.current)
   }), /*#__PURE__*/React.createElement(IconPrint, IconProps))))))), /*#__PURE__*/React.createElement(Divider, _extends({}, DividerProps, {
@@ -1723,7 +1724,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
         align: "center",
         justify: "flex-start",
         role: "toolbar",
-        "aria-label": "Mini menu",
+        "aria-label": l('Mini menu'),
         Component: Surface
       }, MiniMenuProps, {
         className: classNames([staticClassName('RichTextEditor', theme) && ['onesy-RichTextEditor-mini-menu'], MiniMenuProps?.className, classes.miniMenu])

package/esm/ScreenCapture/ScreenCapture.js

@@ -37,6 +37,7 @@ const useStyle = styleMethod(theme => ({
 });
 const ScreenCapture = /*#__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?.onesyScreenCapture?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
@@ -365,7 +366,7 @@ const ScreenCapture = /*#__PURE__*/React.forwardRef((props_, ref) => {
     align: "center",
     justify: "center"
   }, view && /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "View"
+    name: l('View')
   }, tooltipProps, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onView,
     loading: loading.includes('view'),
@@ -374,7 +375,7 @@ const ScreenCapture = /*#__PURE__*/React.forwardRef((props_, ref) => {
     add: true,
     in: true
   }) : /*#__PURE__*/React.createElement(IconView, null))), free && /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: canvas ? 'Save' : 'Free form'
+    name: canvas ? l('Save') : l('Free form')
   }, tooltipProps, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: event => canvas ? onFreeSave(event) : onFree(event),
     loading: loading.includes('free'),
@@ -383,7 +384,7 @@ const ScreenCapture = /*#__PURE__*/React.forwardRef((props_, ref) => {
     add: true,
     in: true
   }) : canvas ? /*#__PURE__*/React.createElement(IconDownload, null) : /*#__PURE__*/React.createElement(IconFree, null)))), /*#__PURE__*/React.createElement(TextField, _extends({
-    label: "Name",
+    name: l('Name'),
     value: name,
     onChange: onChange
   }, textFieldProps, TextFieldProps)), canvas && /*#__PURE__*/React.createElement(Portal, {

package/esm/SectionAction/SectionAction.js

@@ -18,6 +18,7 @@ const useStyle = styleMethod(theme => ({
 });
 const Element = /*#__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?.onesySectionAction?.props?.default), props_), [props_]);
   const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
   const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
@@ -52,7 +53,7 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onClick: to || link ? () => to ? navigate(to) : window.open(link, 'blank') : undefined
   }, ButtonProps, {
     className: classNames([staticClassName('SectionAction', theme) && ['onesy-SectionAction-item-button'], ButtonProps?.className, classes.button])
-  }), text || 'Click here'));
+  }), text || l('Click here')));
 });
 Element.displayName = 'onesy-SectionAction';
 export default Element;

package/esm/SectionBoxes/SectionBoxes.js

@@ -71,6 +71,7 @@ const useStyle = styleMethod(theme => ({
 });
 const Element = /*#__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?.onesySectionBoxes?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
@@ -190,7 +191,7 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onClick: () => item.to ? navigate(item.to) : window.open(item.link, 'blank')
     }, item.propsButton, {
       className: classNames([staticClassName('SectionBoxes', theme) && ['onesy-SectionBoxes-item-button'], item.propsButton?.className, classes.button])
-    }), item.buttonText || 'Click here')));
+    }), item.buttonText || l('Click here'))));
   }, [theme, size]);
   return /*#__PURE__*/React.createElement(Section, _extends({
     ref: item => {

package/esm/SectionCards/SectionCards.js

@@ -81,6 +81,7 @@ const useStyle = styleMethod(theme => ({
 });
 const Element = /*#__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?.onesySectionCards?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
@@ -207,7 +208,7 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onClick: () => item.to ? navigate(item.to) : window.open(item.link, 'blank')
     }, item.propsButton, {
       className: classNames([staticClassName('SectionCards', theme) && ['onesy-SectionCards-item-button'], item.propsButton?.className, classes.button])
-    }), item.buttonText || 'Click here'))));
+    }), item.buttonText || l('Click here')))));
   }, [theme, size]);
   return /*#__PURE__*/React.createElement(Section, _extends({
     ref: item => {