@onesy/ui-react 1.0.59 → 1.0.60

package/esm/SectionCarousel/SectionCarousel.js

@@ -103,6 +103,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?.onesySectionCarousel?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
@@ -237,7 +238,7 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onClick: () => item.to ? navigate(item.to) : window.open(item.link, 'blank')
     }, item.propsButton, {
       className: classNames([staticClassName('SectionCarousel', theme) && ['onesy-SectionCarousel-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/SectionMedia/SectionMedia.js

@@ -55,6 +55,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?.onesySectionMedia?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
@@ -134,7 +135,7 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
     align: "center",
     fullWidth: true,
     className: classNames([staticClassName('SectionMedia', theme) && ['onesy-SectionMedia-name'], classes.name])
-  }, cleanValue(value?.name || 'No name', {
+  }, cleanValue(value?.name || l('No name'), {
     capitalize: true
   }))));
 });

package/esm/SectionTextMedia/SectionTextMedia.js

@@ -30,6 +30,7 @@ const useStyle = styleMethod(theme => ({
 });
 const SectionTextMedia = /*#__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?.onesySectionTextMedia?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Text = React.useMemo(() => theme?.elements?.Text || TextElement, [theme]);
@@ -129,7 +130,7 @@ const SectionTextMedia = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onClick: (button.to || button.link) && window.open(button.to || button.link, 'blank')
   }, button.props, {
     className: classNames([staticClassName('SectionAction', theme) && ['onesy-SectionTextMedia-button'], button.props?.className, classes.button])
-  }), button.text || 'Click here'));
+  }), button.text || l('Click here')));
   return /*#__PURE__*/React.createElement(Section, _extends({
     ref: item => {
       if (ref) {

package/esm/Select/Select.js

@@ -115,6 +115,7 @@ const useStyle = styleMethod(theme => {
 const getValue = value => value?.value !== undefined ? value.value : value;
 const Select = /*#__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?.onesySelect?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
@@ -333,7 +334,7 @@ const Select = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const endIcons = [end, clear && !!(multiple ? value.length : ![undefined, null].includes(value)) && /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onClear,
     size: "small",
-    "aria-label": "Input clear"
+    "aria-label": l('Input clear')
   }, IconButtonProps), /*#__PURE__*/React.createElement(IconClear, IconProps)), ...(!readOnly ? [/*#__PURE__*/React.createElement(IconButton, _extends({
     key: 1,
     size: "regular",

package/esm/Share/Share.js

@@ -162,6 +162,7 @@ const useStyle = styleMethod(theme => ({
 });
 const Share = /*#__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?.onesyShare?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
@@ -284,53 +285,53 @@ const Share = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, []);
   const size = props.size !== undefined ? props.size : mobile ? 'small' : 'regular';
   const options = [{
-    name: 'Facebook',
+    name: l('Facebook'),
     Icon: IconFacebook,
     color: '#316FF6'
   }, {
-    name: 'X',
+    name: l('X'),
     Icon: IconX,
     color: '#000000'
   }, {
-    name: 'Linkedin',
+    name: l('Linkedin'),
     Icon: IconLinkedin,
     color: '#0077b5'
   }, {
-    name: 'Pinterest',
+    name: l('Pinterest'),
     Icon: IconPinterest,
     color: '#bd081c'
   }, {
-    name: 'Reddit',
+    name: l('Reddit'),
     Icon: IconReddit,
     color: '#ff4500'
   }, {
-    name: 'Whatsapp',
+    name: l('Whatsapp'),
     Icon: IconWhatsapp,
     color: '#25d366'
   }, {
-    name: 'Viber',
+    name: l('Viber'),
     Icon: IconViber,
     color: '#7360f2'
   }, {
-    name: 'Email',
+    name: l('Email'),
     Icon: IconEmail,
     title: 'Send email',
     color: theme.palette.color.info[50]
   }, {
-    name: 'Copy',
+    name: l('Copy'),
     Icon: IconCopy,
     title: 'Copy',
     color: theme.palette.color.secondary[50]
   }, {
-    name: 'Print',
+    name: l('Print'),
     Icon: IconPrint,
     title: 'Print',
     color: theme.palette.color.neutral[70]
   }];
   const optionMore = {
-    name: 'More',
+    name: l('More'),
     Icon: IconMore,
-    title: 'More',
+    title: l('More'),
     color: theme.palette.color.quaternary[40]
   };
   const exclude = [...(exclude_ || [])];
@@ -383,7 +384,7 @@ const Share = /*#__PURE__*/React.forwardRef((props_, ref) => {
     };
     if (is('function', render)) return render(item.name, itemProps_);
     return /*#__PURE__*/React.createElement(Tooltip, _extends({
-      label: item.name === 'Copy' && copied ? 'Copied!' : item.title || `Share to ${item.name}`
+      label: item.name === l('Copy') && copied ? l('Copied!') : item.title || `${l('Share to')} ${item.name}`
     }, AppendProps), /*#__PURE__*/React.createElement(Line, _extends({
       key: index,
       onClick: event => onClick(item, event)
@@ -408,7 +409,7 @@ const Share = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }
     }
   }), /*#__PURE__*/React.createElement(Line, null, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: optionMore.title || 'More'
+    name: optionMore.title || l('More')
   }, AppendProps), /*#__PURE__*/React.createElement(Line, {
     className: classNames([staticClassName('Share', theme) && ['onesy-Share-item', 'onesy-Share-visible'], classes.item, classes[`item_size_${size}`]]),
     style: {
@@ -418,7 +419,7 @@ const Share = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, /*#__PURE__*/React.createElement(Interaction, null), /*#__PURE__*/React.createElement(optionMore.Icon, {
     size: "regular"
   }))))), !!moreOptions?.length && mobile && /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: optionMore.title || 'More'
+    name: optionMore.title || l('More')
   }, AppendProps), /*#__PURE__*/React.createElement(Line, {
     onClick: onOpenBottomSheet,
     className: classNames(['onesy-Share-item', 'onesy-Share-visible', classes.item, classes[`item_size_${size}`]]),

package/esm/SmartTextField/SmartTextField.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["version", "size", "valueDefault", "value", "inputProps", "onChange", "error", "name", "placeholder", "edit", "mention", "multiline", "onChangeMention", "optionsMention", "error", "helperText", "mentionLabel", "onKeyDown", "pasteText", "readOnly", "additional", "HelperTextProps", "className"],
   _excluded2 = ["label", "labelButton", "value", "onChange", "onClick", "InputComponent", "InputProps"],
   _excluded3 = ["open", "element", "anchorElement", "onClose", "children"],
-  _excluded4 = ["open", "label", "children"];
+  _excluded4 = ["open", "name", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -104,6 +104,7 @@ const useStyle = styleMethod(theme => ({
 });
 const SmartTextField = /*#__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?.onesySmartTextField?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const TextField = React.useMemo(() => theme?.elements?.TextField || TextFieldElement, [theme]);
@@ -697,7 +698,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
         width: '100%'
       }
     }, /*#__PURE__*/React.createElement(InputComponent, _extends({
-      label: labelInput,
+      name: labelInput,
       version: "outlined",
       size: "small",
       valueDefault: value__,
@@ -740,36 +741,36 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const WrapperToggleButton = React.useCallback(/*#__PURE__*/React.forwardRef((propsWrapperToggleButton, ref_) => {
     const {
         open: open_,
-        label: labelWrapperToogleButton,
+        name: nameWrapperToogleButton,
         children: childrenWrapperToggleButton
       } = propsWrapperToggleButton,
       other_ = _objectWithoutProperties(propsWrapperToggleButton, _excluded4);
     return /*#__PURE__*/React.createElement(Tooltip, _extends({
       open: open_ !== undefined ? open_ : undefined,
-      label: labelWrapperToogleButton
+      name: nameWrapperToogleButton
     }, TooltipProps), /*#__PURE__*/React.cloneElement(childrenWrapperToggleButton, _objectSpread(_objectSpread({}, other_), childrenWrapperToggleButton.props)));
   }), []);
   const updateElements = {
     'italic': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Italic"
+      name: l('Italic')
     }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       selected: refs.textSelected.current.includes('italic'),
       onClick: textMethod('italic')
     }), /*#__PURE__*/React.createElement(IconMaterialFormatItalic, IconProps))),
     'underline': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Underline"
+      name: l('Underline')
     }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       selected: refs.textSelected.current.includes('underline'),
       onClick: textMethod('underline')
     }), /*#__PURE__*/React.createElement(IconMaterialFormatUnderlined, IconProps))),
     'bold': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Bold",
+      name: l('Bold'),
       onClick: textMethod('bold')
     }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       selected: refs.textSelected.current.includes('bold')
     }), /*#__PURE__*/React.createElement(IconMaterialFormatBold, IconProps))),
     'strike-line': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Strike Line",
+      name: l('Strike Line'),
       onClick: textMethod('strike-line')
     }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       selected: refs.textSelected.current.includes('strike-line')
@@ -782,8 +783,8 @@ const SmartTextField = /*#__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: () => {
@@ -800,7 +801,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
         className: classes.inputLink
       }))
     }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Insert Link",
+      name: l('Insert Link'),
       open: refs.open.current.linkMiniMenu ? false : undefined
     }, /*#__PURE__*/React.createElement(ToggleButton, _extends({
       ref: refs.miniMenuElements.linkAdd
@@ -809,14 +810,14 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onClick: () => updateOpen('linkMiniMenu', !refs.open.current.linkMiniMenu)
     }), /*#__PURE__*/React.createElement(IconMaterialAddLink, IconProps)))),
     'link-remove': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Remove Link"
+      name: l('Remove Link')
     }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       onClick: textMethod('link-remove')
     }), /*#__PURE__*/React.createElement(IconMaterialLinkOff, IconProps)))
   };
   const actionElements = {
     'clear': /*#__PURE__*/React.createElement(WrapperToggleButton, {
-      label: "Clear"
+      name: l('Clear')
     }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       onClick: textMethod('clear')
     }), /*#__PURE__*/React.createElement(IconMaterialFormatClear, IconProps)))
@@ -858,7 +859,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
           justify: "flex-start",
           role: "toolbar",
           color: "themed",
-          "aria-label": "Mini menu",
+          "aria-label": l('Mini menu'),
           Component: Surface,
           className: classNames([classes.textMiniMenu])
         }, /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['link-add'], updateElements['link-remove']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, actionElements['clear'])))));

package/esm/SpeechToText/SpeechToText.js

@@ -28,6 +28,7 @@ const useStyle = styleMethod(theme => ({
 });
 const SpeechToText = /*#__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?.onesySpeechToText?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
@@ -160,10 +161,10 @@ const SpeechToText = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, IconButtonProps);
   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 /*#__PURE__*/React.createElement(Line, _extends({
     ref: item => {

package/esm/SpeedDial/SpeedDial.js

@@ -394,7 +394,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef((props_, ref) => {
     gap: 1,
     direction: "column"
   }, FabWrapperProps), start, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: tooltipLabel
+    name: tooltipLabel
   }, TooltipProps), /*#__PURE__*/React.createElement(Fab, _extends({
     ref: refs.fab,
     tonal: tonal,

package/esm/SpeedDialItem/SpeedDialItem.js

@@ -67,7 +67,7 @@ const SpeedDialItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onFocus,
     TooltipProps
   }, other)) : /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: label,
+    name: label,
     portal: true,
     nowrap: true
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({

package/esm/TableCell/TableCell.js

@@ -102,6 +102,7 @@ const useStyle = styleMethod(theme => ({
 });
 const TableCell = /*#__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?.onesyTableCell?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
@@ -225,7 +226,7 @@ const TableCell = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }), children) : children && /*#__PURE__*/React.cloneElement(children, {
     tabIndex: sort !== undefined ? 0 : undefined
   }), sort && /*#__PURE__*/React.createElement(Tooltip, {
-    name: sortedBy === 'asc' ? 'Ascending' : 'Descending'
+    name: sortedBy === 'asc' ? l('Ascending') : l('Descending')
   }, /*#__PURE__*/React.createElement(IconButton, {
     size: "small",
     onClick: onSort,

package/esm/TablePagination/TablePagination.js

@@ -30,6 +30,7 @@ const useStyle = styleMethod(theme => ({
 });
 const TablePagination = /*#__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?.onesyTablePagination?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
@@ -125,7 +126,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef((props_, ref) => {
     align: "center",
     Component: Line,
     className: classNames([staticClassName('TablePagination', theme) && [`onesy-TablePagination-text`], classes.text])
-  }, /*#__PURE__*/React.createElement("span", null, page * rowsPerPage + 1, " - ", (page + 1) * rowsPerPage || total), " ", /*#__PURE__*/React.createElement("span", null, "of"), " ", /*#__PURE__*/React.createElement("span", null, total)), /*#__PURE__*/React.createElement(Line, {
+  }, /*#__PURE__*/React.createElement("span", null, page * rowsPerPage + 1, " - ", (page + 1) * rowsPerPage || total), " ", /*#__PURE__*/React.createElement("span", null, l('of')), " ", /*#__PURE__*/React.createElement("span", null, total)), /*#__PURE__*/React.createElement(Line, {
     gap: 1,
     direction: "row",
     justify: "flex-start",

package/esm/TextToSpeech/TextToSpeech.js

@@ -28,6 +28,7 @@ const useStyle = styleMethod(theme => ({
 });
 const TextToSpeech = /*#__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?.onesyTextToSpeech?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
@@ -130,12 +131,12 @@ const TextToSpeech = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, IconButtonProps);
   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';
+  if (status === 'paused') name = l('Resume');
   return /*#__PURE__*/React.createElement(Line, _extends({
     ref: item => {
       if (ref) {

package/esm/TimePicker/TimePicker.js

@@ -206,6 +206,7 @@ const useStyle = styleMethod(theme => ({
 });
 const TimePicker = /*#__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?.onesyTimePicker?.props?.default), props__), [props__]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
@@ -243,10 +244,10 @@ const TimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
       autoCloseOnLast: autoCloseOnLast_,
       openMobile = 'select',
       openDesktop = 'select',
-      selectModalSubHeadingText = 'Select time',
-      selectModalSubHeadingTextRange = `Select from${SEPARATOR}to time`,
-      inputModalSubHeadingText = 'Enter time',
-      inputModalSubHeadingTextRange = `Enter from${SEPARATOR}to time`,
+      selectModalSubHeadingText = l('Select time'),
+      selectModalSubHeadingTextRange = `${l('Select from')}${SEPARATOR}${l('to time')}`,
+      inputModalSubHeadingText = l('Enter time'),
+      inputModalSubHeadingTextRange = `${l('Enter from')}${SEPARATOR}${l('to time')}`,
       orientation: orientation_,
       format = '12',
       hour = true,
@@ -687,7 +688,7 @@ const TimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
       size: size,
       version: "text",
       onClick: onOpen,
-      "aria-label": "Choose time",
+      "aria-label": l('Choose time'),
       disabled: disabled || readOnly
     }, iconButtonProps), /*#__PURE__*/React.createElement(Icon_, IconProps));
   }
@@ -730,7 +731,7 @@ const TimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
         onClick: () => onUpdateSelecting('hour', index)
       }), formatDate(value[index], format === '12' ? 'hh' : 'HH')));
       inputs.push(/*#__PURE__*/React.createElement(AdvancedTextField, _extends({
-        helperText: "Hour",
+        helperText: l('Hour'),
         value: formatDate(value[index], format === '12' ? 'hh' : 'HH'),
         onChange: valueNew => onInputModalChange(valueNew, 'hour', index),
         placeholder: "00",
@@ -751,7 +752,7 @@ const TimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
         onClick: () => onUpdateSelecting('minute', index)
       }), formatDate(value[index], 'mm')));
       inputs.push(/*#__PURE__*/React.createElement(AdvancedTextField, _extends({
-        helperText: "Minute",
+        helperText: l('Minute'),
         value: formatDate(value[index], 'mm'),
         onChange: valueNew => onInputModalChange(valueNew, 'minute', index),
         placeholder: "00",
@@ -772,7 +773,7 @@ const TimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
         onClick: () => onUpdateSelecting('second', index)
       }), formatDate(value[index], 'ss')));
       inputs.push(/*#__PURE__*/React.createElement(AdvancedTextField, _extends({
-        helperText: "Second",
+        helperText: l('Second'),
         value: formatDate(value[index], 'ss'),
         onChange: valueNew => onInputModalChange(valueNew, 'second', index),
         placeholder: "00",
@@ -840,22 +841,22 @@ const TimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     direction: "row",
     align: "center"
   }, switch_ && /*#__PURE__*/React.createElement(Tooltip, {
-    label: mode === 'select' ? 'Enter time' : 'Select time'
+    name: mode === 'select' ? l('Enter time') : l('Select time')
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
     tonal: tonal,
     color: "inherit",
     size: size,
     onClick: onModeSwitch,
-    "aria-label": mode === 'select' ? 'Enter time' : 'Select time'
+    "aria-label": mode === 'select' ? l('Enter time') : l('Select time')
   }, iconButtonProps), mode === 'select' ? /*#__PURE__*/React.createElement(IconEnter, IconProps) : /*#__PURE__*/React.createElement(Icon_, IconProps))), today && /*#__PURE__*/React.createElement(Button, _extends({
     onClick: onToday,
     version: "text",
     size: size
-  }, buttonProps), "Now"), clear && /*#__PURE__*/React.createElement(Button, _extends({
+  }, buttonProps), l('Now')), clear && /*#__PURE__*/React.createElement(Button, _extends({
     onClick: onClear,
     version: "text",
     size: size
-  }, buttonProps), "Clear")), /*#__PURE__*/React.createElement(Line, {
+  }, buttonProps), l('Clear'))), /*#__PURE__*/React.createElement(Line, {
     gap: 0,
     direction: "row",
     align: "center"
@@ -865,13 +866,13 @@ const TimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     version: "text",
     size: size,
     onClick: onCancel
-  }, buttonProps), "Cancel"), /*#__PURE__*/React.createElement(Button, _extends({
+  }, buttonProps), l('Cancel')), /*#__PURE__*/React.createElement(Button, _extends({
     tonal: tonal,
     color: color,
     version: "text",
     size: size,
     onClick: onOk
-  }, buttonProps), "Ok")));
+  }, buttonProps), l('Ok'))));
   const element = /*#__PURE__*/React.createElement(Surface, _extends({
     gap: 0,
     direction: "column",
@@ -892,10 +893,10 @@ const TimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-tabs'], TabsProps?.className, classes.tabs, heading_ && classes.tabs_padding])
   }), /*#__PURE__*/React.createElement(Tab, _extends({
     value: 0,
-    label: "From"
+    name: l('From')
   }, TabFromProps)), /*#__PURE__*/React.createElement(Tab, _extends({
     value: 1,
-    label: "To"
+    name: l('To')
   }, TabToProps))), /*#__PURE__*/React.createElement(Line, {
     gap: 0,
     className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-middle'], MiddleProps?.className, classes.middle, classes[`middle_size_${size}`]])
@@ -921,7 +922,7 @@ const TimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     color: color,
     version: "outlined",
     size: size,
-    label: label,
+    name: label,
     mask: mask,
     placeholder: placeholder,
     value: input,
@@ -947,7 +948,7 @@ const TimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     longPress: false,
     maxWidth: "unset",
     noMargin: true,
-    label: /*#__PURE__*/React.createElement(ClickListener, {
+    name: /*#__PURE__*/React.createElement(ClickListener, {
       onClickOutside: onCancel,
       includeParentQueries: ['.onesy-TimePicker-main']
     }, element)

package/esm/Timer/Timer.js

@@ -52,6 +52,7 @@ const useStyle = styleMethod(theme => ({
 });
 const Timer = /*#__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?.onesyTimer?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
@@ -219,7 +220,7 @@ const Timer = /*#__PURE__*/React.forwardRef((props_, ref) => {
     } = _ref;
     return /*#__PURE__*/React.createElement(Tree, _extends({
       openDefault: true,
-      middle: "Flags",
+      middle: l('Flags'),
       indicator: true,
       indicatorPosition: "end",
       parent: refs.root.current,
@@ -261,29 +262,29 @@ const Timer = /*#__PURE__*/React.forwardRef((props_, ref) => {
     in: true,
     add: true
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "Start"
+    name: l('Start')
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onStart
   }, IconButtonProps), /*#__PURE__*/React.createElement(IconStart, null))))), status === 'running' && /*#__PURE__*/React.createElement(Fade, {
     in: true,
     add: true
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "Flag"
+    name: l('Flag')
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onFlag
   }, IconButtonProps), /*#__PURE__*/React.createElement(IconFlag, null))), /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "Pause"
+    name: l('Pause')
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onPause
   }, IconButtonProps), /*#__PURE__*/React.createElement(IconPause, null))))), status === 'paused' && /*#__PURE__*/React.createElement(Fade, {
     in: true,
     add: true
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "Stop"
+    name: l('Stop')
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onStop
   }, IconButtonProps), /*#__PURE__*/React.createElement(IconStop, null))), /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "Resume"
+    name: l('Resume')
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onResume
   }, IconButtonProps), /*#__PURE__*/React.createElement(IconStart, null)))))));

package/esm/VideoPlayer/VideoPlayer.js

@@ -153,6 +153,7 @@ const useStyle = styleMethod(theme => ({
 });
 const VideoPlayer = /*#__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?.onesyVideoPlayer?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
@@ -604,7 +605,7 @@ const VideoPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
         }),
         primary: /*#__PURE__*/React.createElement(Type, {
           version: "b3"
-        }, "Back"),
+        }, l('Back')),
         onClick: () => setOpenMenu(null)
       }, itemProps)));
     }
@@ -616,11 +617,11 @@ const VideoPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
         }),
         primary: /*#__PURE__*/React.createElement(Type, {
           version: "b3"
-        }, "Playback speed"),
+        }, l('Playback speed')),
         end: /*#__PURE__*/React.createElement(Type, {
           version: "b3",
           priority: "secondary"
-        }, playbackSpeed === 1 ? 'Normal' : playbackSpeed),
+        }, playbackSpeed === 1 ? l('Normal') : playbackSpeed),
         onClick: () => setOpenMenu('playbackSpeed')
       }, itemProps)));
       if (quality_) items.push(/*#__PURE__*/React.createElement(ListItem, _extends({
@@ -630,11 +631,11 @@ const VideoPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
         }),
         primary: /*#__PURE__*/React.createElement(Type, {
           version: "b3"
-        }, "Quality"),
+        }, l('Quality')),
         end: /*#__PURE__*/React.createElement(Type, {
           version: "b3",
           priority: "secondary"
-        }, !quality ? 'Original' : `${quality?.meta?.resolution}p`),
+        }, !quality ? l('Original') : `${quality?.meta?.resolution}p`),
         onClick: () => setOpenMenu('quality')
       }, itemProps)));
     } else if (openMenu === 'quality') {
@@ -664,7 +665,7 @@ const VideoPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
           key: option,
           primary: /*#__PURE__*/React.createElement(Type, {
             version: "b3"
-          }, option === 1 ? 'Normal' : option),
+          }, option === 1 ? l('Normal') : option),
           onClick: () => onPlaybackSpeed(option),
           selected: playbackSpeed === option
         }, itemProps)));