@onesy/ui-react 1.0.58 → 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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "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"];
+const _excluded = ["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"];
 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';
@@ -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]);
@@ -151,6 +152,8 @@ const Select = /*#__PURE__*/React.forwardRef((props_, ref) => {
       renderChip,
       IconClear = IconMaterialClose,
       IconDropdown = IconMaterialArrowDropDown,
+      inputProps,
+      InputWrapperProps,
       WrapperProps,
       ChipProps,
       ChiProps,
@@ -331,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",
@@ -389,17 +392,18 @@ const Select = /*#__PURE__*/React.forwardRef((props_, ref) => {
     "aria-disabled": disabled,
     fullWidth: fullWidth,
     disabled: disabled,
-    InputWrapperProps: {
-      className: classNames([staticClassName('Select', theme) && ['onesy-Select-input-wrapper'], classes.inputWrapper, chip && [classes.chip, classes[`inputWrapper_chip_size_${size}`]], open && classes.open, readOnly && classes.readOnly]),
+    InputWrapperProps: _objectSpread(_objectSpread({
       onMouseDown,
       onMouseUp,
       onClick,
       onKeyDown: onEnterKeyDown
-    },
-    inputProps: {
+    }, InputWrapperProps), {}, {
+      className: classNames([staticClassName('Select', theme) && ['onesy-Select-input-wrapper'], InputWrapperProps?.className, classes.inputWrapper, chip && [classes.chip, classes[`inputWrapper_chip_size_${size}`]], open && classes.open, readOnly && classes.readOnly])
+    }),
+    inputProps: _objectSpread({
       disabled: true,
       readOnly: true
-    },
+    }, inputProps),
     style: _objectSpread(_objectSpread({}, style), styles.root)
   }, other), /*#__PURE__*/React.createElement(Line, {
     gap: 0,

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)))))));