@onesy/ui-react 1.0.58 → 1.0.60

package/Select/Select.js

@@ -111,6 +111,7 @@ const getValue = (value) => (value === null || value === void 0 ? void 0 : value
 const Select = react_1.default.forwardRef((props_, ref) => {
     var _a;
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySelect) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const ListItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ListItem) || ListItem_1.default; }, [theme]);
@@ -120,7 +121,7 @@ const Select = react_1.default.forwardRef((props_, ref) => {
     const Chips = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Chips) || Chips_1.default; }, [theme]);
     const TextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.TextField) || TextField_1.default; }, [theme]);
     const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', size = 'regular', version = 'filled', value: value_, valueDefault, onChange: onChange_, options, name, multiple, prefix, sufix, start, end, autoWidth = true, getLabel: getLabel_, fullWidth, chip, clear, readOnly, noSelectText, disabled, renderValues: renderValues_, renderChip, IconClear = IconMaterialCloseW100_1.default, IconDropdown = IconMaterialArrowDropDownW100_1.default, WrapperProps, ChipProps, ChiProps, ListProps = {
+    const { tonal = true, color = 'primary', size = 'regular', version = 'filled', value: value_, valueDefault, onChange: onChange_, options, name, multiple, prefix, sufix, start, end, autoWidth = true, getLabel: getLabel_, fullWidth, chip, clear, readOnly, noSelectText, disabled, renderValues: renderValues_, renderChip, IconClear = IconMaterialCloseW100_1.default, IconDropdown = IconMaterialArrowDropDownW100_1.default, inputProps, InputWrapperProps, WrapperProps, ChipProps, ChiProps, ListProps = {
         style: {
             maxHeight: 250,
             overflowY: 'auto',
@@ -128,7 +129,7 @@ const Select = react_1.default.forwardRef((props_, ref) => {
         }
     }, MenuProps = {
         portal: true
-    }, IconButtonProps, IconProps, className, style, children: children_ } = props, other = __rest(props, ["tonal", "color", "size", "version", "value", "valueDefault", "onChange", "options", "name", "multiple", "prefix", "sufix", "start", "end", "autoWidth", "getLabel", "fullWidth", "chip", "clear", "readOnly", "noSelectText", "disabled", "renderValues", "renderChip", "IconClear", "IconDropdown", "WrapperProps", "ChipProps", "ChiProps", "ListProps", "MenuProps", "IconButtonProps", "IconProps", "className", "style", "children"]);
+    }, IconButtonProps, IconProps, className, style, children: children_ } = props, other = __rest(props, ["tonal", "color", "size", "version", "value", "valueDefault", "onChange", "options", "name", "multiple", "prefix", "sufix", "start", "end", "autoWidth", "getLabel", "fullWidth", "chip", "clear", "readOnly", "noSelectText", "disabled", "renderValues", "renderChip", "IconClear", "IconDropdown", "inputProps", "InputWrapperProps", "WrapperProps", "ChipProps", "ChiProps", "ListProps", "MenuProps", "IconButtonProps", "IconProps", "className", "style", "children"]);
     const children = react_1.default.Children.toArray(children_);
     const [value, setValue] = react_1.default.useState(() => {
         const values = valueDefault !== undefined ? valueDefault : value_;
@@ -296,7 +297,7 @@ const Select = react_1.default.forwardRef((props_, ref) => {
     });
     const endIcons = [
         end,
-        clear && !!(multiple ? value.length : ![undefined, null].includes(value)) && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onClear, size: 'small', "aria-label": 'Input clear' }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconClear, Object.assign({}, IconProps)) }))),
+        clear && !!(multiple ? value.length : ![undefined, null].includes(value)) && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onClear, size: 'small', "aria-label": l('Input clear') }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconClear, Object.assign({}, IconProps)) }))),
         ...(!readOnly ? [
             (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: 'regular', onClick: onClickArrowDown, "aria-expanded": open, "aria-controls": refs.ids.list }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconDropdown, Object.assign({ size: 'large' }, IconProps, { className: (0, style_react_1.classNames)([
                         IconProps === null || IconProps === void 0 ? void 0 : IconProps.className,
@@ -342,11 +343,13 @@ const Select = react_1.default.forwardRef((props_, ref) => {
                     classes.root,
                     open && classes.open,
                     disabled && classes.disabled
-                ]), tonal: tonal, color: color, size: size, version: version, name: name, prefix: prefix, sufix: sufix, start: start, end: endIcons, readOnly: readOnly, endVerticalAlign: 'center', role: 'combobox', "aria-multiselectable": multiple, "aria-controls": refs.ids.list, "aria-expanded": open, "aria-haspopup": 'listbox', "aria-labelledby": name, "aria-disabled": disabled, fullWidth: fullWidth, disabled: disabled, InputWrapperProps: {
-                    className: (0, style_react_1.classNames)([
+                ]), tonal: tonal, color: color, size: size, version: version, name: name, prefix: prefix, sufix: sufix, start: start, end: endIcons, readOnly: readOnly, endVerticalAlign: 'center', role: 'combobox', "aria-multiselectable": multiple, "aria-controls": refs.ids.list, "aria-expanded": open, "aria-haspopup": 'listbox', "aria-labelledby": name, "aria-disabled": disabled, fullWidth: fullWidth, disabled: disabled, InputWrapperProps: Object.assign(Object.assign({ onMouseDown,
+                    onMouseUp,
+                    onClick, onKeyDown: onEnterKeyDown }, InputWrapperProps), { className: (0, style_react_1.classNames)([
                         (0, utils_2.staticClassName)('Select', theme) && [
                             'onesy-Select-input-wrapper'
                         ],
+                        InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : InputWrapperProps.className,
                         classes.inputWrapper,
                         chip && [
                             classes.chip,
@@ -354,15 +357,7 @@ const Select = react_1.default.forwardRef((props_, ref) => {
                         ],
                         open && classes.open,
                         readOnly && classes.readOnly
-                    ]),
-                    onMouseDown,
-                    onMouseUp,
-                    onClick,
-                    onKeyDown: onEnterKeyDown
-                }, inputProps: {
-                    disabled: true,
-                    readOnly: true
-                }, style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, direction: 'row', className: (0, style_react_1.classNames)([
+                    ]) }), inputProps: Object.assign({ disabled: true, readOnly: true }, inputProps), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, direction: 'row', className: (0, style_react_1.classNames)([
                         (0, utils_2.staticClassName)('Select', theme) && [
                             'onesy-Select-input'
                         ],

package/Share/Share.js

@@ -123,6 +123,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-Share' });
 const Share = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyShare) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
@@ -225,18 +226,18 @@ const Share = react_1.default.forwardRef((props_, ref) => {
     }, []);
     const size = props.size !== undefined ? props.size : mobile ? 'small' : 'regular';
     const options = [
-        { name: 'Facebook', Icon: IconFacebook, color: '#316FF6' },
-        { name: 'X', Icon: IconX, color: '#000000' },
-        { name: 'Linkedin', Icon: IconLinkedin, color: '#0077b5' },
-        { name: 'Pinterest', Icon: IconPinterest, color: '#bd081c' },
-        { name: 'Reddit', Icon: IconReddit, color: '#ff4500' },
-        { name: 'Whatsapp', Icon: IconWhatsapp, color: '#25d366' },
-        { name: 'Viber', Icon: IconViber, color: '#7360f2' },
-        { name: 'Email', Icon: IconEmail, title: 'Send email', color: theme.palette.color.info[50] },
-        { name: 'Copy', Icon: IconCopy, title: 'Copy', color: theme.palette.color.secondary[50] },
-        { name: 'Print', Icon: IconPrint, title: 'Print', color: theme.palette.color.neutral[70] }
+        { name: l('Facebook'), Icon: IconFacebook, color: '#316FF6' },
+        { name: l('X'), Icon: IconX, color: '#000000' },
+        { name: l('Linkedin'), Icon: IconLinkedin, color: '#0077b5' },
+        { name: l('Pinterest'), Icon: IconPinterest, color: '#bd081c' },
+        { name: l('Reddit'), Icon: IconReddit, color: '#ff4500' },
+        { name: l('Whatsapp'), Icon: IconWhatsapp, color: '#25d366' },
+        { name: l('Viber'), Icon: IconViber, color: '#7360f2' },
+        { name: l('Email'), Icon: IconEmail, title: 'Send email', color: theme.palette.color.info[50] },
+        { name: l('Copy'), Icon: IconCopy, title: 'Copy', color: theme.palette.color.secondary[50] },
+        { name: l('Print'), Icon: IconPrint, title: 'Print', color: theme.palette.color.neutral[70] }
     ];
-    const optionMore = { name: 'More', Icon: IconMore, title: 'More', color: theme.palette.color.quaternary[40] };
+    const optionMore = { name: l('More'), Icon: IconMore, title: l('More'), color: theme.palette.color.quaternary[40] };
     const exclude = [...(exclude_ || [])];
     if (!mobile)
         exclude.push('whatsapp', 'viber');
@@ -293,7 +294,7 @@ const Share = react_1.default.forwardRef((props_, ref) => {
                 };
                 if ((0, utils_1.is)('function', render))
                     return render(item.name, itemProps_);
-                return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: (item.name === 'Copy' && copied) ? 'Copied!' : item.title || `Share to ${item.name}` }, AppendProps, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ onClick: (event) => onClick(item, event) }, itemProps_, { className: (0, style_react_1.classNames)([
+                return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: (item.name === l('Copy') && copied) ? l('Copied!') : item.title || `${l('Share to')} ${item.name}` }, AppendProps, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ onClick: (event) => onClick(item, event) }, itemProps_, { className: (0, style_react_1.classNames)([
                             (0, utils_2.staticClassName)('Share', theme) && [
                                 'onesy-Share-item',
                                 'onesy-Share-visible',
@@ -312,7 +313,7 @@ const Share = react_1.default.forwardRef((props_, ref) => {
                         maxHeight: 240,
                         overflowY: 'auto'
                     }
-                } }, { children: (0, jsx_runtime_1.jsx)(Line, { children: (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: optionMore.title || 'More' }, AppendProps, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ className: (0, style_react_1.classNames)([
+                } }, { children: (0, jsx_runtime_1.jsx)(Line, { children: (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: optionMore.title || l('More') }, AppendProps, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ className: (0, style_react_1.classNames)([
                                 (0, utils_2.staticClassName)('Share', theme) && [
                                     'onesy-Share-item',
                                     'onesy-Share-visible',
@@ -322,7 +323,7 @@ const Share = react_1.default.forwardRef((props_, ref) => {
                             ]), style: {
                                 color: theme.methods.palette.color.text(optionMore.color),
                                 backgroundColor: optionMore.color
-                            } }, { children: [(0, jsx_runtime_1.jsx)(Interaction, {}), (0, jsx_runtime_1.jsx)(optionMore.Icon, { size: 'regular' })] })) })) }) }))), !!(moreOptions === null || moreOptions === void 0 ? void 0 : moreOptions.length) && mobile && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: optionMore.title || 'More' }, AppendProps, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ onClick: onOpenBottomSheet, className: (0, style_react_1.classNames)([
+                            } }, { children: [(0, jsx_runtime_1.jsx)(Interaction, {}), (0, jsx_runtime_1.jsx)(optionMore.Icon, { size: 'regular' })] })) })) }) }))), !!(moreOptions === null || moreOptions === void 0 ? void 0 : moreOptions.length) && mobile && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: optionMore.title || l('More') }, AppendProps, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ onClick: onOpenBottomSheet, className: (0, style_react_1.classNames)([
                         'onesy-Share-item',
                         'onesy-Share-visible',
                         classes.item,

package/SmartTextField/SmartTextField.js

@@ -105,6 +105,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 const SmartTextField = react_1.default.forwardRef((props_, ref) => {
     var _a;
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySmartTextField) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const TextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.TextField) || TextField_1.default; }, [theme]);
@@ -657,7 +658,7 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
                 classes.inputWrapper
             ]) }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', style: {
                     width: '100%'
-                } }, { children: [(0, jsx_runtime_1.jsx)(InputComponent, Object.assign({ label: labelInput, version: 'outlined', size: 'small', valueDefault: value__, onChange: onChange__ }, InputProps, { style: {
+                } }, { children: [(0, jsx_runtime_1.jsx)(InputComponent, Object.assign({ name: labelInput, version: 'outlined', size: 'small', valueDefault: value__, onChange: onChange__ }, InputProps, { style: {
                             width: 'unset',
                             flex: '1 1 auto'
                         } })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ color: 'inherit', version: 'text', size: 'small', onClick: onClick }, { children: labelButton }))] })) })));
@@ -672,15 +673,15 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
                 ]) }, { children: (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: open_, add: true }, { children: react_1.default.cloneElement(element) })) }))), anchorElement: anchorElement, portal: true, alignment: 'center', position: 'bottom' }, AppendProps, { children: react_1.default.cloneElement(childrenWrapperAppend, Object.assign(Object.assign({}, other_), childrenWrapperAppend.props)) })));
     }, []);
     const WrapperToggleButton = react_1.default.useCallback(react_1.default.forwardRef((propsWrapperToggleButton, ref_) => {
-        const { open: open_, label: labelWrapperToogleButton, children: childrenWrapperToggleButton } = propsWrapperToggleButton, other_ = __rest(propsWrapperToggleButton, ["open", "label", "children"]);
-        return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ open: open_ !== undefined ? open_ : undefined, label: labelWrapperToogleButton }, TooltipProps, { children: react_1.default.cloneElement(childrenWrapperToggleButton, Object.assign(Object.assign({}, other_), childrenWrapperToggleButton.props)) })));
+        const { open: open_, name: nameWrapperToogleButton, children: childrenWrapperToggleButton } = propsWrapperToggleButton, other_ = __rest(propsWrapperToggleButton, ["open", "name", "children"]);
+        return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ open: open_ !== undefined ? open_ : undefined, name: nameWrapperToogleButton }, TooltipProps, { children: react_1.default.cloneElement(childrenWrapperToggleButton, Object.assign(Object.assign({}, other_), childrenWrapperToggleButton.props)) })));
     }), []);
     const updateElements = {
-        'italic': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ label: 'Italic' }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('italic'), onClick: textMethod('italic') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatItalicW100_1.default, Object.assign({}, IconProps)) })) }))),
-        'underline': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ label: 'Underline' }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('underline'), onClick: textMethod('underline') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatUnderlinedW100_1.default, Object.assign({}, IconProps)) })) }))),
-        'bold': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ label: 'Bold', onClick: textMethod('bold') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('bold') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatBoldW100_1.default, Object.assign({}, IconProps)) })) }))),
-        'strike-line': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ label: 'Strike Line', onClick: textMethod('strike-line') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('strike-line') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialStrikethroughSW100_1.default, Object.assign({}, IconProps)) })) }))),
-        'link-add': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.linkMiniMenu, anchorElement: refs.miniMenuElements.linkAdd, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('linkMiniMenu', false), include: [refs.miniMenuElements.linkAdd] }, { children: (0, jsx_runtime_1.jsx)(Input, { ref: refs.miniMenuElements.linkAddInput, label: 'Link', labelButton: 'Add', value: refs.inputValues.current.link, onChange: (valueNew) => updateInputValues('link', valueNew), onClick: () => {
+        'italic': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Italic') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('italic'), onClick: textMethod('italic') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatItalicW100_1.default, Object.assign({}, IconProps)) })) }))),
+        'underline': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Underline') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('underline'), onClick: textMethod('underline') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatUnderlinedW100_1.default, Object.assign({}, IconProps)) })) }))),
+        'bold': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Bold'), onClick: textMethod('bold') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('bold') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatBoldW100_1.default, Object.assign({}, IconProps)) })) }))),
+        'strike-line': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Strike Line'), onClick: textMethod('strike-line') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('strike-line') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialStrikethroughSW100_1.default, Object.assign({}, IconProps)) })) }))),
+        'link-add': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.linkMiniMenu, anchorElement: refs.miniMenuElements.linkAdd, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('linkMiniMenu', false), include: [refs.miniMenuElements.linkAdd] }, { children: (0, jsx_runtime_1.jsx)(Input, { ref: refs.miniMenuElements.linkAddInput, name: l('Link'), labelButton: l('Add'), value: refs.inputValues.current.link, onChange: (valueNew) => updateInputValues('link', valueNew), onClick: () => {
                         if (refs.range.current) {
                             const selection_ = refs.rootWindow.current.getSelection();
                             if (!selection_)
@@ -691,11 +692,11 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
                         textMethod('link-add')(refs.inputValues.current.link);
                         updateOpen('linkMiniMenu', false);
                         updateInputValues('link', '');
-                    }, className: classes.inputLink }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ label: 'Insert Link', open: refs.open.current.linkMiniMenu ? false : undefined }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.miniMenuElements.linkAdd }, ToggleButtonProps, { selected: refs.open.current.linkMiniMenu, onClick: () => updateOpen('linkMiniMenu', !refs.open.current.linkMiniMenu) }, { children: (0, jsx_runtime_1.jsx)(IconMaterialAddLinkW100_1.default, Object.assign({}, IconProps)) })) })) }))),
-        'link-remove': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ label: 'Remove Link' }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: textMethod('link-remove') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialLinkOffW100_1.default, Object.assign({}, IconProps)) })) })))
+                    }, className: classes.inputLink }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Insert Link'), open: refs.open.current.linkMiniMenu ? false : undefined }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.miniMenuElements.linkAdd }, ToggleButtonProps, { selected: refs.open.current.linkMiniMenu, onClick: () => updateOpen('linkMiniMenu', !refs.open.current.linkMiniMenu) }, { children: (0, jsx_runtime_1.jsx)(IconMaterialAddLinkW100_1.default, Object.assign({}, IconProps)) })) })) }))),
+        'link-remove': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Remove Link') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: textMethod('link-remove') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialLinkOffW100_1.default, Object.assign({}, IconProps)) })) })))
     };
     const actionElements = {
-        'clear': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ label: 'Clear' }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: textMethod('clear') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatClearW100_1.default, Object.assign({}, IconProps)) })) })))
+        'clear': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Clear') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: textMethod('clear') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatClearW100_1.default, Object.assign({}, IconProps)) })) })))
     };
     const miniMenu = react_1.default.useMemo(() => {
         return ((0, jsx_runtime_1.jsx)(Append, Object.assign({ open: !!textSelection, element: (body) => {
@@ -717,7 +718,7 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
                         classes.textMiniMenuWrapper
                     ]) }, { children: (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !!textSelection, add: true }, { children: (0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => {
                                 setTextSelection(null);
-                            }, include: [refs.miniMenu, refs.miniMenu.current, refs.miniMenuElements.linkAddInput, refs.miniMenuElements.linkAddInput.current] }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start', role: 'toolbar', color: 'themed', "aria-label": 'Mini menu', Component: Surface, className: (0, style_react_1.classNames)([
+                            }, include: [refs.miniMenu, refs.miniMenu.current, refs.miniMenuElements.linkAddInput, refs.miniMenuElements.linkAddInput.current] }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start', role: 'toolbar', color: 'themed', "aria-label": l('Mini menu'), Component: Surface, className: (0, style_react_1.classNames)([
                                     classes.textMiniMenu
                                 ]) }, { children: [(0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']] })), (0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['link-add'], updateElements['link-remove']] })), (0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: actionElements['clear'] }))] })) })) })) })));
             }, parent: refs.root.current, anchor: textSelection === null || textSelection === void 0 ? void 0 : textSelection.selection, portal: true, alignment: 'center', position: 'bottom', clearOnClose: true }, AppendProps)));

package/SpeechToText/SpeechToText.js

@@ -37,6 +37,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-SpeechToText' });
 const SpeechToText = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySpeechToText) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
@@ -146,10 +147,10 @@ const SpeechToText = react_1.default.forwardRef((props_, ref) => {
     if (!supported)
         return null;
     let IconToUse = Icon_;
-    let name = 'Speech to text';
+    let name = l('Speech to text');
     if (status === 'started') {
         IconToUse = IconStop;
-        name = 'Stop';
+        name = l('Stop');
     }
     return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: (item) => {
             if (ref) {

package/SpeedDial/SpeedDial.js

@@ -391,7 +391,7 @@ const SpeedDial = react_1.default.forwardRef((props_, ref) => {
                         onBlur,
                         onFocus,
                         TooltipProps: Object.assign({}, TooltipProps)
-                    }) }), index))) }))), (0, jsx_runtime_1.jsx)(FabTransitionComponent, Object.assign({ in: inProp }, FabTransitionComponentProps, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'column' }, FabWrapperProps, { children: [start, (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: tooltipLabel }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(Fab, Object.assign({ ref: refs.fab, tonal: tonal, color: color, version: version, onClick: onClick, onBlur: onBlur, onFocus: onFocus, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: (0, style_react_1.classNames)([
+                    }) }), index))) }))), (0, jsx_runtime_1.jsx)(FabTransitionComponent, Object.assign({ in: inProp }, FabTransitionComponentProps, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'column' }, FabWrapperProps, { children: [start, (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: tooltipLabel }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(Fab, Object.assign({ ref: refs.fab, tonal: tonal, color: color, version: version, onClick: onClick, onBlur: onBlur, onFocus: onFocus, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: (0, style_react_1.classNames)([
                                     (0, utils_2.staticClassName)('SpeedDial', theme) && [
                                         `onesy-SpeedDial-fab`
                                     ],

package/SpeedDialItem/SpeedDialItem.js

@@ -63,7 +63,7 @@ const SpeedDialItem = react_1.default.forwardRef((props_, ref) => {
             render(Object.assign({ onBlur,
                 onFocus,
                 TooltipProps }, other)) :
-            (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: label, portal: true, nowrap: true }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onBlur: onBlur, onFocus: onFocus }, other, { children: (0, jsx_runtime_1.jsx)(Icon, {}) })) })) })));
+            (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: label, portal: true, nowrap: true }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onBlur: onBlur, onFocus: onFocus }, other, { children: (0, jsx_runtime_1.jsx)(Icon, {}) })) })) })));
 });
 SpeedDialItem.displayName = 'onesy-SpeedDialItem';
 exports.default = SpeedDialItem;

package/TableCell/TableCell.js

@@ -102,6 +102,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-TableCell' });
 const TableCell = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyTableCell) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
@@ -211,7 +212,7 @@ const TableCell = react_1.default.forwardRef((props_, ref) => {
                             TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className
                         ]) }, { children: children }))) : (children && react_1.default.cloneElement(children, {
                         tabIndex: sort !== undefined ? 0 : undefined
-                    })), sort && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({ name: sortedBy === 'asc' ? 'Ascending' : 'Descending' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: 'small', onClick: onSort, disabled: disabled, className: (0, style_react_1.classNames)([
+                    })), sort && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({ name: sortedBy === 'asc' ? l('Ascending') : l('Descending') }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: 'small', onClick: onSort, disabled: disabled, className: (0, style_react_1.classNames)([
                                 (0, utils_2.staticClassName)('TableCell', theme) && [
                                     `onesy-TableCell-sort-icon-button`
                                 ],

package/TablePagination/TablePagination.js

@@ -39,6 +39,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-TablePagination' });
 const TablePagination = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyTablePagination) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
@@ -94,7 +95,7 @@ const TablePagination = react_1.default.forwardRef((props_, ref) => {
                         `onesy-TablePagination-text`
                     ],
                     classes.text
-                ]) }, { children: [(0, jsx_runtime_1.jsxs)("span", { children: [(page * rowsPerPage) + 1, " - ", ((page + 1) * rowsPerPage) || total] }), " ", (0, jsx_runtime_1.jsx)("span", { children: "of" }), " ", (0, jsx_runtime_1.jsx)("span", { children: total })] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', justify: 'flex-start', align: 'center' }, { children: [first && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => update(0), disabled: page === 0 }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconFirst, {}) }))), before && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => update((0, utils_1.clamp)(page - 1, 0, maxPage)), disabled: page === 0 }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconBefore, {}) }))), next && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => update((0, utils_1.clamp)(page + 1, 0, maxPage)), disabled: page === maxPage }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconNext, {}) }))), last && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => update(maxPage), disabled: page === maxPage }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconLast, {}) })))] }))] })));
+                ]) }, { children: [(0, jsx_runtime_1.jsxs)("span", { children: [(page * rowsPerPage) + 1, " - ", ((page + 1) * rowsPerPage) || total] }), " ", (0, jsx_runtime_1.jsx)("span", { children: l('of') }), " ", (0, jsx_runtime_1.jsx)("span", { children: total })] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', justify: 'flex-start', align: 'center' }, { children: [first && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => update(0), disabled: page === 0 }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconFirst, {}) }))), before && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => update((0, utils_1.clamp)(page - 1, 0, maxPage)), disabled: page === 0 }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconBefore, {}) }))), next && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => update((0, utils_1.clamp)(page + 1, 0, maxPage)), disabled: page === maxPage }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconNext, {}) }))), last && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => update(maxPage), disabled: page === maxPage }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconLast, {}) })))] }))] })));
 });
 TablePagination.displayName = 'onesy-TablePagination';
 exports.default = TablePagination;

package/TextField/TextField.d.ts

@@ -39,6 +39,7 @@ export type ITextField = Omit<IBaseElement, 'onChange'> & {
     footer?: IElement;
     controlled?: boolean;
     restoreSelection?: boolean;
+    maxLength?: number;
     minWidth?: number;
     subscription?: OnesySubscription;
     minimal?: boolean;

package/TextToSpeech/TextToSpeech.js

@@ -37,6 +37,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-TextToSpeech' });
 const TextToSpeech = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyTextToSpeech) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
@@ -124,13 +125,13 @@ const TextToSpeech = react_1.default.forwardRef((props_, ref) => {
     if (!supported)
         return null;
     let IconToUse = Icon_;
-    let name = 'Text to speech';
+    let name = l('Text to speech');
     if (['started', 'resumed'].includes(status)) {
         IconToUse = IconPause;
-        name = 'Pause';
+        name = l('Pause');
     }
     if (status === 'paused')
-        name = 'Resume';
+        name = l('Resume');
     return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: (item) => {
             if (ref) {
                 if ((0, utils_1.is)('function', ref))

package/TimePicker/TimePicker.js

@@ -200,6 +200,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-TimePicker' });
 const TimePicker = react_1.default.forwardRef((props__, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyTimePicker) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props__)); }, [props__]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
@@ -216,7 +217,7 @@ const TimePicker = react_1.default.forwardRef((props__, ref) => {
     const Clock = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Clock) || Clock_1.default; }, [theme]);
     const Tab = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tab) || Tab_1.default; }, [theme]);
     const Tabs = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tabs) || Tabs_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', version: version_ = 'auto', value: value_, valueDefault, onChange, selecting: selecting_, selectingDefault, onChangeSelecting, size = 'regular', range, now, label, min, max, validate, autoNext: autoNext_, autoCloseOnLast: autoCloseOnLast_, openMobile = 'select', openDesktop = 'select', selectModalSubHeadingText = 'Select time', selectModalSubHeadingTextRange = `Select from${DatePicker_1.SEPARATOR}to time`, inputModalSubHeadingText = 'Enter time', inputModalSubHeadingTextRange = `Enter from${DatePicker_1.SEPARATOR}to time`, orientation: orientation_, format = '12', hour = true, minute = true, second = false, switch: switch__, static: static_, today, clear = true, placeholder: placeholder_, heading: heading_ = true, actions: actions_ = true, fullWidth, readOnly, disabled, valid: valid_, onClick: onClick_, onClose: onClose_, onCancel: onCancel_, onNow: onNow_, onToday: onToday_, onClear: onClear_, onOk: onOk_, renderValue, Icon: Icon_ = IconMaterialScheduleW100_1.default, IconEnter = IconMaterialKeyboardAltW100_1.default, WrapperProps, MainProps, ModalProps, MiddleProps, ButtonProps, TooltipProps, ToggleButtonsProps, ToggleButtonProps, IconButtonProps, InputProps, ClockProps, TabsProps, TabFromProps, TabToProps, AdvancedTextFieldProps, IconProps, className } = props, other = __rest(props, ["tonal", "color", "version", "value", "valueDefault", "onChange", "selecting", "selectingDefault", "onChangeSelecting", "size", "range", "now", "label", "min", "max", "validate", "autoNext", "autoCloseOnLast", "openMobile", "openDesktop", "selectModalSubHeadingText", "selectModalSubHeadingTextRange", "inputModalSubHeadingText", "inputModalSubHeadingTextRange", "orientation", "format", "hour", "minute", "second", "switch", "static", "today", "clear", "placeholder", "heading", "actions", "fullWidth", "readOnly", "disabled", "valid", "onClick", "onClose", "onCancel", "onNow", "onToday", "onClear", "onOk", "renderValue", "Icon", "IconEnter", "WrapperProps", "MainProps", "ModalProps", "MiddleProps", "ButtonProps", "TooltipProps", "ToggleButtonsProps", "ToggleButtonProps", "IconButtonProps", "InputProps", "ClockProps", "TabsProps", "TabFromProps", "TabToProps", "AdvancedTextFieldProps", "IconProps", "className"]);
+    const { tonal = true, color = 'primary', version: version_ = 'auto', value: value_, valueDefault, onChange, selecting: selecting_, selectingDefault, onChangeSelecting, size = 'regular', range, now, label, min, max, validate, autoNext: autoNext_, autoCloseOnLast: autoCloseOnLast_, openMobile = 'select', openDesktop = 'select', selectModalSubHeadingText = l('Select time'), selectModalSubHeadingTextRange = `${l('Select from')}${DatePicker_1.SEPARATOR}${l('to time')}`, inputModalSubHeadingText = l('Enter time'), inputModalSubHeadingTextRange = `${l('Enter from')}${DatePicker_1.SEPARATOR}${l('to time')}`, orientation: orientation_, format = '12', hour = true, minute = true, second = false, switch: switch__, static: static_, today, clear = true, placeholder: placeholder_, heading: heading_ = true, actions: actions_ = true, fullWidth, readOnly, disabled, valid: valid_, onClick: onClick_, onClose: onClose_, onCancel: onCancel_, onNow: onNow_, onToday: onToday_, onClear: onClear_, onOk: onOk_, renderValue, Icon: Icon_ = IconMaterialScheduleW100_1.default, IconEnter = IconMaterialKeyboardAltW100_1.default, WrapperProps, MainProps, ModalProps, MiddleProps, ButtonProps, TooltipProps, ToggleButtonsProps, ToggleButtonProps, IconButtonProps, InputProps, ClockProps, TabsProps, TabFromProps, TabToProps, AdvancedTextFieldProps, IconProps, className } = props, other = __rest(props, ["tonal", "color", "version", "value", "valueDefault", "onChange", "selecting", "selectingDefault", "onChangeSelecting", "size", "range", "now", "label", "min", "max", "validate", "autoNext", "autoCloseOnLast", "openMobile", "openDesktop", "selectModalSubHeadingText", "selectModalSubHeadingTextRange", "inputModalSubHeadingText", "inputModalSubHeadingTextRange", "orientation", "format", "hour", "minute", "second", "switch", "static", "today", "clear", "placeholder", "heading", "actions", "fullWidth", "readOnly", "disabled", "valid", "onClick", "onClose", "onCancel", "onNow", "onToday", "onClear", "onOk", "renderValue", "Icon", "IconEnter", "WrapperProps", "MainProps", "ModalProps", "MiddleProps", "ButtonProps", "TooltipProps", "ToggleButtonsProps", "ToggleButtonProps", "IconButtonProps", "InputProps", "ClockProps", "TabsProps", "TabFromProps", "TabToProps", "AdvancedTextFieldProps", "IconProps", "className"]);
     const { classes } = useStyle();
     const refs = {
         root: react_1.default.useRef(undefined),
@@ -566,7 +567,7 @@ const TimePicker = react_1.default.forwardRef((props__, ref) => {
     const clock = (index = 0) => ((0, jsx_runtime_1.jsx)(Clock, Object.assign({ size: size, format: format, value: value[index] || new date_1.OnesyDate(), dayTime: dayTime[index] || (0, date_1.format)(new date_1.OnesyDate(), 'a'), selecting: selecting[index], onChange: valueNew => onChangeClock(valueNew, index), onChangeSelecting: valueNew => onChangeSelectingClock(valueNew, index), onDoneSelecting: onDoneSelecting, renderValue: renderValue, valid: valid, hour: hour, minute: minute, second: second, autoNext: autoNext, disabled: disabled }, ClockProps)));
     const moreProps = {};
     if (version === 'desktop') {
-        moreProps.end = ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: color, size: size, version: 'text', onClick: onOpen, "aria-label": 'Choose time', disabled: disabled || readOnly }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(Icon_, Object.assign({}, IconProps)) })));
+        moreProps.end = ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: color, size: size, version: 'text', onClick: onOpen, "aria-label": l('Choose time'), disabled: disabled || readOnly }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(Icon_, Object.assign({}, IconProps)) })));
     }
     const makeInputs = (index = 0) => {
         const inputProps = Object.assign({ tonal,
@@ -610,7 +611,7 @@ const TimePicker = react_1.default.forwardRef((props__, ref) => {
         const inputs = [];
         if (hour) {
             buttons.push((0, jsx_runtime_1.jsx)(Button, Object.assign({}, buttonProps_, { selected: selecting[index] === 'hour', onClick: () => onUpdateSelecting('hour', index) }, { children: (0, date_1.format)(value[index], format === '12' ? 'hh' : 'HH') })));
-            inputs.push((0, jsx_runtime_1.jsx)(AdvancedTextField, Object.assign({ helperText: 'Hour', value: (0, date_1.format)(value[index], format === '12' ? 'hh' : 'HH'), onChange: (valueNew) => onInputModalChange(valueNew, 'hour', index), placeholder: '00', mask: [
+            inputs.push((0, jsx_runtime_1.jsx)(AdvancedTextField, Object.assign({ helperText: l('Hour'), value: (0, date_1.format)(value[index], format === '12' ? 'hh' : 'HH'), onChange: (valueNew) => onInputModalChange(valueNew, 'hour', index), placeholder: '00', mask: [
                     ...(format === '12' ? [
                         { pattern: '[0-1]' },
                         (item, result, valueInput) => /^([0][0-9]|1[0-2]).*/.test(valueInput)
@@ -626,7 +627,7 @@ const TimePicker = react_1.default.forwardRef((props__, ref) => {
                 inputs.push(separator);
             }
             buttons.push((0, jsx_runtime_1.jsx)(Button, Object.assign({}, buttonProps_, { selected: selecting[index] === 'minute', onClick: () => onUpdateSelecting('minute', index) }, { children: (0, date_1.format)(value[index], 'mm') })));
-            inputs.push((0, jsx_runtime_1.jsx)(AdvancedTextField, Object.assign({ helperText: 'Minute', value: (0, date_1.format)(value[index], 'mm'), onChange: (valueNew) => onInputModalChange(valueNew, 'minute', index), placeholder: '00', mask: [
+            inputs.push((0, jsx_runtime_1.jsx)(AdvancedTextField, Object.assign({ helperText: l('Minute'), value: (0, date_1.format)(value[index], 'mm'), onChange: (valueNew) => onInputModalChange(valueNew, 'minute', index), placeholder: '00', mask: [
                     { pattern: '[0-5]' },
                     { pattern: '[0-9]' }
                 ] }, inputProps)));
@@ -637,7 +638,7 @@ const TimePicker = react_1.default.forwardRef((props__, ref) => {
                 inputs.push(separator);
             }
             buttons.push((0, jsx_runtime_1.jsx)(Button, Object.assign({}, buttonProps_, { selected: selecting[index] === 'second', onClick: () => onUpdateSelecting('second', index) }, { children: (0, date_1.format)(value[index], 'ss') })));
-            inputs.push((0, jsx_runtime_1.jsx)(AdvancedTextField, Object.assign({ helperText: 'Second', value: (0, date_1.format)(value[index], 'ss'), onChange: (valueNew) => onInputModalChange(valueNew, 'second', index), placeholder: '00', mask: [
+            inputs.push((0, jsx_runtime_1.jsx)(AdvancedTextField, Object.assign({ helperText: l('Second'), value: (0, date_1.format)(value[index], 'ss'), onChange: (valueNew) => onInputModalChange(valueNew, 'second', index), placeholder: '00', mask: [
                     { pattern: '[0-5]' },
                     { pattern: '[0-9]' }
                 ] }, inputProps)));
@@ -675,7 +676,7 @@ const TimePicker = react_1.default.forwardRef((props__, ref) => {
             ],
             classes.footer,
             classes[`footer_size_${size}`]
-        ]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [switch_ && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: mode === 'select' ? 'Enter time' : 'Select time' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: 'inherit', size: size, onClick: onModeSwitch, "aria-label": mode === 'select' ? 'Enter time' : 'Select time' }, iconButtonProps, { children: mode === 'select' ? (0, jsx_runtime_1.jsx)(IconEnter, Object.assign({}, IconProps)) : (0, jsx_runtime_1.jsx)(Icon_, Object.assign({}, IconProps)) })) }))), today && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onToday, version: 'text', size: size }, buttonProps, { children: "Now" }))), clear && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onClear, version: 'text', size: size }, buttonProps, { children: "Clear" })))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: tonal, color: color, version: 'text', size: size, onClick: onCancel }, buttonProps, { children: "Cancel" })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: tonal, color: color, version: 'text', size: size, onClick: onOk }, buttonProps, { children: "Ok" }))] }))] })));
+        ]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [switch_ && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: mode === 'select' ? l('Enter time') : l('Select time') }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: 'inherit', size: size, onClick: onModeSwitch, "aria-label": mode === 'select' ? l('Enter time') : l('Select time') }, iconButtonProps, { children: mode === 'select' ? (0, jsx_runtime_1.jsx)(IconEnter, Object.assign({}, IconProps)) : (0, jsx_runtime_1.jsx)(Icon_, Object.assign({}, IconProps)) })) }))), today && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onToday, version: 'text', size: size }, buttonProps, { children: l('Now') }))), clear && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onClear, version: 'text', size: size }, buttonProps, { children: l('Clear') })))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: tonal, color: color, version: 'text', size: size, onClick: onCancel }, buttonProps, { children: l('Cancel') })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: tonal, color: color, version: 'text', size: size, onClick: onOk }, buttonProps, { children: l('Ok') }))] }))] })));
     const element = ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ gap: 0, direction: 'column', align: 'center', Component: Line }, MainProps, { className: (0, style_react_1.classNames)([
             (0, utils_2.staticClassName)('TimePicker', theme) && [
                 'onesy-TimePicker-main'
@@ -696,7 +697,7 @@ const TimePicker = react_1.default.forwardRef((props__, ref) => {
                     TabsProps === null || TabsProps === void 0 ? void 0 : TabsProps.className,
                     classes.tabs,
                     heading_ && classes.tabs_padding
-                ]) }, { children: [(0, jsx_runtime_1.jsx)(Tab, Object.assign({ value: 0, label: 'From' }, TabFromProps)), (0, jsx_runtime_1.jsx)(Tab, Object.assign({ value: 1, label: 'To' }, TabToProps))] }))), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, className: (0, style_react_1.classNames)([
+                ]) }, { children: [(0, jsx_runtime_1.jsx)(Tab, Object.assign({ value: 0, name: l('From') }, TabFromProps)), (0, jsx_runtime_1.jsx)(Tab, Object.assign({ value: 1, name: l('To') }, TabToProps))] }))), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, className: (0, style_react_1.classNames)([
                     (0, utils_2.staticClassName)('TimePicker', theme) && [
                         'onesy-TimePicker-middle'
                     ],
@@ -730,7 +731,7 @@ const TimePicker = react_1.default.forwardRef((props__, ref) => {
                             ref.current = item;
                     }
                     refs.root.current = item;
-                }, tonal: tonal, color: color, version: 'outlined', size: size, label: label, mask: mask, placeholder: placeholder, value: input, onChange: onInputChange, endVerticalAlign: 'center', error: error, fullWidth: fullWidth, readOnly: readOnly, disabled: disabled }, moreProps, other, AdvancedTextFieldProps)), version === 'mobile' && ((0, jsx_runtime_1.jsx)(Modal, Object.assign({ open: open, modalWrapperSurface: false, TransitionComponent: Slide, onClose: onClose }, ModalProps, { children: element }))), version === 'desktop' && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ open: open, portal: true, anchorElement: refs.root.current, alignment: 'center', position: 'bottom', hover: false, focus: false, longPress: false, maxWidth: 'unset', noMargin: true, label: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: onCancel, includeParentQueries: ['.onesy-TimePicker-main'] }, { children: element }))) }, TooltipProps)))] })));
+                }, tonal: tonal, color: color, version: 'outlined', size: size, name: label, mask: mask, placeholder: placeholder, value: input, onChange: onInputChange, endVerticalAlign: 'center', error: error, fullWidth: fullWidth, readOnly: readOnly, disabled: disabled }, moreProps, other, AdvancedTextFieldProps)), version === 'mobile' && ((0, jsx_runtime_1.jsx)(Modal, Object.assign({ open: open, modalWrapperSurface: false, TransitionComponent: Slide, onClose: onClose }, ModalProps, { children: element }))), version === 'desktop' && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ open: open, portal: true, anchorElement: refs.root.current, alignment: 'center', position: 'bottom', hover: false, focus: false, longPress: false, maxWidth: 'unset', noMargin: true, name: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: onCancel, includeParentQueries: ['.onesy-TimePicker-main'] }, { children: element }))) }, TooltipProps)))] })));
 });
 TimePicker.displayName = 'onesy-TimePicker';
 exports.default = TimePicker;

package/Timer/Timer.js

@@ -61,6 +61,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-Timer' });
 const Timer = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyTimer) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const Fade = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fade) || Fade_1.default; }, [theme]);
@@ -185,7 +186,7 @@ const Timer = react_1.default.forwardRef((props_, ref) => {
                     ],
                     classes.flags_wrapper
                 ]) }, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Surface, Object.assign({ tonal: tonal, color: color }, { children: ({ palette }) => {
-                            return ((0, jsx_runtime_1.jsx)(Tree, Object.assign({ openDefault: true, middle: 'Flags', indicator: true, indicatorPosition: 'end', parent: refs.root.current, TreeProps: {
+                            return ((0, jsx_runtime_1.jsx)(Tree, Object.assign({ openDefault: true, middle: l('Flags'), indicator: true, indicatorPosition: 'end', parent: refs.root.current, TreeProps: {
                                     className: (0, style_react_1.classNames)([
                                         (0, utils_2.staticClassName)('Timer', theme) && [
                                             'onesy-Timer-flags'
@@ -202,7 +203,7 @@ const Timer = react_1.default.forwardRef((props_, ref) => {
                         'onesy-Timer-actions'
                     ],
                     classes.actions
-                ]) }, { children: [status === 'initial' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Start' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStart }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStart, {}) })) })) }) }))), status === 'running' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Flag' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onFlag }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconFlag, {}) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Pause' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onPause }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPause, {}) })) }))] }) }))), status === 'paused' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Stop' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStop }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStop, {}) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Resume' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onResume }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStart, {}) })) }))] }) })))] }))] })));
+                ]) }, { children: [status === 'initial' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Start') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStart }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStart, {}) })) })) }) }))), status === 'running' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Flag') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onFlag }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconFlag, {}) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Pause') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onPause }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPause, {}) })) }))] }) }))), status === 'paused' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Stop') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStop }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStop, {}) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Resume') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onResume }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStart, {}) })) }))] }) })))] }))] })));
 });
 Timer.displayName = 'onesy-Timer';
 exports.default = Timer;

package/VideoPlayer/VideoPlayer.js

@@ -163,6 +163,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 const VideoPlayer = react_1.default.forwardRef((props_, ref) => {
     var _a, _b, _c;
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyVideoPlayer) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
@@ -569,13 +570,13 @@ const VideoPlayer = react_1.default.forwardRef((props_, ref) => {
         };
         const items = [];
         if (openMenu) {
-            items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ start: ((0, jsx_runtime_1.jsx)(IconBack, { size: 'very small' })), primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: "Back" }))), onClick: () => setOpenMenu(null) }, itemProps), 'back'));
+            items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ start: ((0, jsx_runtime_1.jsx)(IconBack, { size: 'very small' })), primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: l('Back') }))), onClick: () => setOpenMenu(null) }, itemProps), 'back'));
         }
         if (!openMenu) {
             if (playbackSpeed_)
-                items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ start: ((0, jsx_runtime_1.jsx)(IconPlaybackSpeed, { size: 'small' })), primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: "Playback speed" }))), end: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', priority: 'secondary' }, { children: playbackSpeed === 1 ? 'Normal' : playbackSpeed }))), onClick: () => setOpenMenu('playbackSpeed') }, itemProps), 'playbackSpeed'));
+                items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ start: ((0, jsx_runtime_1.jsx)(IconPlaybackSpeed, { size: 'small' })), primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: l('Playback speed') }))), end: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', priority: 'secondary' }, { children: playbackSpeed === 1 ? l('Normal') : playbackSpeed }))), onClick: () => setOpenMenu('playbackSpeed') }, itemProps), 'playbackSpeed'));
             if (quality_)
-                items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ start: ((0, jsx_runtime_1.jsx)(IconQuality, { size: 'small' })), primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: "Quality" }))), end: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', priority: 'secondary' }, { children: !quality ? 'Original' : `${(_a = quality === null || quality === void 0 ? void 0 : quality.meta) === null || _a === void 0 ? void 0 : _a.resolution}p` }))), onClick: () => setOpenMenu('quality') }, itemProps), 'quality'));
+                items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ start: ((0, jsx_runtime_1.jsx)(IconQuality, { size: 'small' })), primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: l('Quality') }))), end: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', priority: 'secondary' }, { children: !quality ? l('Original') : `${(_a = quality === null || quality === void 0 ? void 0 : quality.meta) === null || _a === void 0 ? void 0 : _a.resolution}p` }))), onClick: () => setOpenMenu('quality') }, itemProps), 'quality'));
         }
         else if (openMenu === 'quality') {
             items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: `${meta === null || meta === void 0 ? void 0 : meta.resolution}p (original)` }))), onClick: () => quality ? onQuality(null) : undefined, selected: !quality }, itemProps), 'original'));
@@ -588,7 +589,7 @@ const VideoPlayer = react_1.default.forwardRef((props_, ref) => {
         else if (openMenu === 'playbackSpeed') {
             const options = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
             options.forEach(option => {
-                items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: option === 1 ? 'Normal' : option }))), onClick: () => onPlaybackSpeed(option), selected: playbackSpeed === option }, itemProps), option));
+                items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: option === 1 ? l('Normal') : option }))), onClick: () => onPlaybackSpeed(option), selected: playbackSpeed === option }, itemProps), option));
             });
         }
         return items;

package/Widgets/Widgets.js

@@ -95,6 +95,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-Widgets' });
 const Widgets = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyWidgets) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const SpeedDial = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.SpeedDial) || SpeedDial_1.default; }, [theme]);
     const SpeedDialItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.SpeedDialItem) || SpeedDialItem_1.default; }, [theme]);
@@ -138,9 +139,9 @@ const Widgets = react_1.default.forwardRef((props_, ref) => {
     refs.value.current.close = close;
     refs.value.current.closeAll = closeAll;
     const widgetsToUse = [...(widgets || [])].reverse();
-    return ((0, jsx_runtime_1.jsxs)(Context_1.default.Provider, Object.assign({ value: refs.value.current }, { children: [(widgets === null || widgets === void 0 ? void 0 : widgets.length) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SpeedDial, Object.assign({ ref: ref, direction: 'top', position: 'bottom', alignment: 'start', Icon: Icon_, noRotate: true }, SpeedDialProps, { children: widgets.map((item, index) => {
+    return ((0, jsx_runtime_1.jsxs)(Context_1.default.Provider, Object.assign({ value: refs.value.current }, { children: [(widgets === null || widgets === void 0 ? void 0 : widgets.length) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SpeedDial, Object.assign({ ref: ref, direction: 'top', position: 'bottom', alignment: 'start', Icon: Icon_, noRotate: true }, SpeedDialProps, other, { children: widgets.map((item, index) => {
                             const valueItem = item.value !== undefined ? item.value : item.label;
-                            return ((0, jsx_runtime_1.jsx)(SpeedDialItem, { onClick: () => !openItems.includes(valueItem) ? open(valueItem) : close(valueItem), label: !openItems.includes(valueItem) ? item.label : `Close ${item.label}`, Icon: item.Icon }, index));
+                            return ((0, jsx_runtime_1.jsx)(SpeedDialItem, { onClick: () => !openItems.includes(valueItem) ? open(valueItem) : close(valueItem), label: !openItems.includes(valueItem) ? item.label : `${l('Close')} ${item.label}`, Icon: item.Icon }, index));
                         }) })), widgetsToUse.map((item, index) => {
                         const valueItem = item.value !== undefined ? item.value : item.label;
                         const WidgetWrapper = Move;