@onesy/ui-react 1.0.59 → 1.0.60

package/esm/AudioRecorder/AudioRecorder.js

@@ -63,6 +63,7 @@ const useStyle = styleMethod(theme => ({
 });
 const AudioRecorder = /*#__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?.onesyAudioRecorder?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
@@ -299,7 +300,7 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onStart,
     supported
   }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "Voice record"
+    name: l('Voice record')
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onStart,
     disabled: !supported
@@ -307,30 +308,30 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
     in: true,
     add: true
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "Cancel"
+    name: l('Cancel')
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onStop
   }, iconButtonProps), /*#__PURE__*/React.createElement(IconStop, iconProps))), pause && /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "Pause"
+    name: l('Pause')
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onPause
   }, iconButtonProps), /*#__PURE__*/React.createElement(IconPause, iconProps))), /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "Confirm"
+    name: l('Confirm')
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onConfirm
   }, iconButtonProps), /*#__PURE__*/React.createElement(IconConfirm, iconProps))))), status === 'paused' && /*#__PURE__*/React.createElement(Fade, {
     in: true,
     add: true
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "Cancel"
+    name: l('Cancel')
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onStop
   }, iconButtonProps), /*#__PURE__*/React.createElement(IconStop, iconProps))), /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "Resume"
+    name: l('Resume')
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onResume
   }, iconButtonProps), /*#__PURE__*/React.createElement(IconStart, iconProps))), /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "Confirm"
+    name: l('Confirm')
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onConfirm
   }, iconButtonProps), /*#__PURE__*/React.createElement(IconConfirm, iconProps))))));

package/esm/AutoComplete/AutoComplete.js

@@ -102,6 +102,7 @@ const getText = value => {
 const getValue = value => value?.value !== undefined ? value.value : value;
 const AutoComplete = /*#__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?.onesyAutoComplete?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Menu = React.useMemo(() => theme?.elements?.Menu || MenuElement, [theme]);
@@ -257,12 +258,12 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
     // reset
     setFree(false);
     if (loading) optionsValue = [{
-      label: 'Loading...',
+      label: l('Loading...'),
       version: 'text'
     }];else if (newOptions) optionsValue = newOptions;else optionsValue = is('function', filter) ? filter(valueInputNew, refs.optionsProps.current) : refs.optionsProps.current.filter(option => isEqualToInput(valueInputNew, option));
     if (!optionsValue.length) {
       if (noOptions) optionsValue.push(noOptionsObject !== undefined ? noOptionsObject : {
-        primary: 'No options',
+        primary: l('No options'),
         version: 'text',
         noOptions: true
       });else {
@@ -466,7 +467,7 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const groups = {};
   if (is('function', groupBy)) {
     optionsToUse.forEach(option => {
-      const valueForGroupBy = groupBy(option) || 'Other';
+      const valueForGroupBy = groupBy(option) || l('Other');
       if (!groups[valueForGroupBy]) groups[valueForGroupBy] = [];
       groups[valueForGroupBy].push(option);
     });
@@ -547,7 +548,7 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onClick: onClear,
     size: "small",
     fontSize: iconFontSize,
-    "aria-label": "Input clear"
+    "aria-label": l('Input clear')
   }, IconButtonProps), /*#__PURE__*/React.createElement(IconClear, IconProps))] : []), /*#__PURE__*/React.createElement(IconButton, _extends({
     key: 3,
     onClick: onClickArrowDown,

package/esm/AutoCompleteCountry/AutoCompleteCountry.js

@@ -18,6 +18,7 @@ const useStyle = styleMethod(theme => ({
 });
 const AutoCompleteCountry = /*#__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?.onesyAutoCompleteCountry?.props?.default), props_), [props_]);
   const AutoComplete = React.useMemo(() => theme?.elements?.AutoComplete || AutoCompleteElement, [theme]);
   const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
@@ -48,6 +49,7 @@ const AutoCompleteCountry = /*#__PURE__*/React.forwardRef((props_, ref) => {
   // }
   const options = React.useMemo(() => {
     return countries.map(item => _objectSpread(_objectSpread({}, item), {}, {
+      name: l(item.name),
       value: item['alpha-2']
     }));
   }, [countries]);

package/esm/AutoCompleteCurrency/AutoCompleteCurrency.js

@@ -15,6 +15,7 @@ const useStyle = styleMethod(theme => ({
 });
 const AutoCompleteCurrency = /*#__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?.onesyAutoCompleteCurrency?.props?.default), props_), [props_]);
   const AutoComplete = React.useMemo(() => theme?.elements?.AutoComplete || AutoCompleteElement, [theme]);
   const {
@@ -39,7 +40,7 @@ const AutoCompleteCurrency = /*#__PURE__*/React.forwardRef((props_, ref) => {
   // }
   const options = React.useMemo(() => {
     return [{
-      name: 'No currency',
+      name: l('No currency'),
       value: ''
     }, ...currencies.map(item => ({
       name: `${item.code} ${item.name} (${item.symbol})`,

package/esm/Breadcrumbs/Breadcrumbs.js

@@ -32,6 +32,7 @@ const useStyle = styleMethod(theme => ({
 });
 const Breadcrumbs = /*#__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?.onesyBreadcrumbs?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
@@ -91,7 +92,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((props_, ref) => {
         color: "default",
         size: "small",
         onClick: onExpandMore,
-        "aria-label": "Expand more path"
+        "aria-label": l('Expand more path')
       }, MoreProps, {
         className: classNames([staticClassName('Breadcrumbs', theme) && ['onesy-Breadcrumbs-expand-more'], MoreProps?.className, classes.expandMore])
       }), /*#__PURE__*/React.createElement(IconMore, {
@@ -127,7 +128,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((props_, ref) => {
     direction: "row",
     align: "center",
     wrap: "wrap",
-    "aria-label": "Breadcrumb",
+    "aria-label": l('Breadcrumb'),
     Component: Component
   }, other, {
     className: classNames([staticClassName('Breadcrumbs', theme) && ['onesy-Breadcrumbs-root'], className, classes.root])

package/esm/BubbleChart/BubbleChart.js

@@ -50,6 +50,7 @@ const useStyle = styleMethod(theme => ({
 });
 const BubbleChart = /*#__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?.onesyBubbleChart?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Chart = React.useMemo(() => theme?.elements?.Chart || ChartElement, [theme]);
@@ -153,7 +154,7 @@ const BubbleChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       style: {
         fontWeight: 600
       }
-    }, "Label"), /*#__PURE__*/React.createElement(Type, {
+    }, l('Label')), /*#__PURE__*/React.createElement(Type, {
       version: "b3",
       style: {
         fontWeight: 600
@@ -168,7 +169,7 @@ const BubbleChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       style: {
         fontWeight: 600
       }
-    }, names?.size || 'Size')), /*#__PURE__*/React.createElement(Line, {
+    }, names?.size || l('Size'))), /*#__PURE__*/React.createElement(Line, {
       gap: 1,
       direction: "column"
     }, groupsSorted.map((group, index) => /*#__PURE__*/React.createElement(Line, {

package/esm/Calendar/Calendar.js

@@ -137,6 +137,7 @@ const useStyle = style(theme => ({
 });
 const Calendar = /*#__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?.onesyCalendar?.props?.default), props__), [props__]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
@@ -446,7 +447,7 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: () => move(false),
     size: size,
-    "aria-label": "Previous month",
+    "aria-label": l('Previous month'),
     disabled: open || +year <= 1970 && month === 'Jan'
   }, optionButtonProps), /*#__PURE__*/React.createElement(IconPrevious, {
     size: size
@@ -461,7 +462,7 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
       size: size,
       className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'month' && classes.arrow_open])
     })),
-    "aria-label": `Select month, current ${month}`
+    "aria-label": `${l('Select month')}, ${l('current')} ${month}`
   }, optionButtonProps, {
     className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps?.className, classes.option, open === 'year' && classes.option_secondary])
   }), month), /*#__PURE__*/React.createElement(Fade, {
@@ -469,7 +470,7 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: () => move(),
     size: size,
-    "aria-label": "Next month",
+    "aria-label": l('Next month'),
     disabled: open || +year === 2099 && month === 'Dec'
   }, optionButtonProps), /*#__PURE__*/React.createElement(IconNext, {
     size: size
@@ -482,7 +483,7 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: () => move(false, 'year'),
     size: size,
-    "aria-label": "Previous year",
+    "aria-label": l('Previous year'),
     disabled: open || +year <= 1970
   }, optionButtonProps), /*#__PURE__*/React.createElement(IconPrevious, {
     size: size
@@ -497,7 +498,7 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
       size: size,
       className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'year' && classes.arrow_open])
     })),
-    "aria-label": `Select year, current ${year}`
+    "aria-label": `${l('Select year')}, ${l('current')} ${year}`
   }, optionButtonProps, {
     className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps?.className, classes.option, open === 'month' && classes.option_secondary])
   }), year), /*#__PURE__*/React.createElement(Fade, {
@@ -505,7 +506,7 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: () => move(true, 'year'),
     size: size,
-    "aria-label": "Next year",
+    "aria-label": l('Next year'),
     disabled: open || +year === 2099
   }, optionButtonProps), /*#__PURE__*/React.createElement(IconNext, {
     size: size
@@ -533,7 +534,7 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
     color: "inherit",
     size: size,
     onClick: () => move(false, menu_month_previous_unit || 'month'),
-    "aria-label": "Previous month",
+    "aria-label": l('Previous month'),
     disabled: !!(open || +year === 1970 && month === 'Jan')
   }, /*#__PURE__*/React.createElement(IconPrevious, {
     size: size
@@ -544,7 +545,7 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
     color: "inherit",
     size: size,
     onClick: () => move(true, menu_month_next_unit || 'month'),
-    "aria-label": "Next month",
+    "aria-label": l('Next month'),
     disabled: !!(open || +year === 2099 && month === 'Dec')
   }, /*#__PURE__*/React.createElement(IconNext, {
     size: size

package/esm/CalendarAvailability/CalendarAvailability.js

@@ -112,6 +112,7 @@ const useStyle = styleMethod(theme => ({
 });
 const CalendarAvailability = /*#__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?.onesyCalendarAvailability?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
@@ -133,7 +134,16 @@ const CalendarAvailability = /*#__PURE__*/React.forwardRef((props_, ref) => {
       times: timesProps,
       events,
       meta,
-      views: viewsProps = ['week', 'day', 'simple'],
+      views: viewsProps = [{
+        name: l('Week'),
+        value: 'week'
+      }, {
+        name: l('Day'),
+        value: 'day'
+      }, {
+        name: l('Simple'),
+        value: 'simple'
+      }],
       onUpdate,
       onRemove,
       onChangeDate: onChangeDateProps,
@@ -232,25 +242,25 @@ const CalendarAvailability = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, []);
   const optionsStatus = React.useMemo(() => {
     return [{
-      name: 'Working',
+      name: l('Working'),
       value: 'working'
     }, {
-      name: 'Not working',
+      name: l('Not working'),
       value: 'not-working'
     }, {
-      name: 'On a break',
+      name: l('On a break'),
       value: 'break'
     }, {
-      name: 'Scheduled',
+      name: l('Scheduled'),
       value: 'pending'
     }, {
-      name: 'Rescheduled',
+      name: l('Rescheduled'),
       value: 'rescheduled'
     }, {
-      name: 'Cancelled',
+      name: l('Cancelled'),
       value: 'canceled'
     }, {
-      name: 'Other',
+      name: l('Other'),
       value: 'other'
     }];
   }, []);
@@ -320,8 +330,8 @@ const CalendarAvailability = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, []);
   const viewOptions = React.useMemo(() => {
     return viewsProps?.map(item => ({
-      name: capitalize(item),
-      value: item
+      name: capitalize(item?.name),
+      value: item?.value
     }));
   }, [viewsProps]);
   const days = React.useMemo(() => {
@@ -393,14 +403,14 @@ const CalendarAvailability = /*#__PURE__*/React.forwardRef((props_, ref) => {
         }));
       }) : /*#__PURE__*/React.createElement(Type, {
         version: "b2"
-      }, "No information for this day")));
+      }, l('No information for this day'))));
     }));
   };
   const simpleExceptionsUI = () => {
     const items = times.flatMap(item => getDatesWeek(item));
     if (!items.length) return /*#__PURE__*/React.createElement(Type, {
       version: "b1"
-    }, "No exceptions this week");
+    }, l('No exceptions this week'));
     return /*#__PURE__*/React.createElement(React.Fragment, null, items.map((itemValue, index) => {
       const day = set(index + 1, 'dayWeek');
       const itemValueFrom = new OnesyDate(itemValue.from);
@@ -496,18 +506,18 @@ const CalendarAvailability = /*#__PURE__*/React.forwardRef((props_, ref) => {
     size: "small",
     onClick: onToday,
     selected: now.days === date.days
-  }, "Today"), /*#__PURE__*/React.createElement(Line, {
+  }, l('Today')), /*#__PURE__*/React.createElement(Line, {
     gap: 0,
     direction: "row",
     align: "center"
   }, /*#__PURE__*/React.createElement(Tooltip, {
-    name: `Previous ${view}`
+    name: `${l('Previous')} ${view}`
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onPrevious
   }, IconButtonProps), /*#__PURE__*/React.createElement(IconPrevious, {
     size: "regular"
   }))), /*#__PURE__*/React.createElement(Tooltip, {
-    name: `Next ${view}`
+    name: `${l('Next')} ${view}`
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onNext
   }, IconButtonProps), /*#__PURE__*/React.createElement(IconNext, {
@@ -525,8 +535,8 @@ const CalendarAvailability = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, startRight, ['week', 'day'].includes(view) && /*#__PURE__*/React.createElement(Label, {
     checked: displayTime,
     onChange: onChangeDisplayTime
-  }, /*#__PURE__*/React.createElement(Switch, null), "Display time"), /*#__PURE__*/React.createElement(Select, {
-    name: "View",
+  }, /*#__PURE__*/React.createElement(Switch, null), l('Display time')), /*#__PURE__*/React.createElement(Select, {
+    name: l('View'),
     value: view,
     onChange: onChangeView,
     options: viewOptions,
@@ -562,7 +572,7 @@ const CalendarAvailability = /*#__PURE__*/React.forwardRef((props_, ref) => {
     gap: 1.5
   }, /*#__PURE__*/React.createElement(Type, {
     version: "t2"
-  }, "Exceptions this week"), /*#__PURE__*/React.createElement(Line, {
+  }, l('Exceptions this week')), /*#__PURE__*/React.createElement(Line, {
     gap: 1
   }, simpleExceptionsUI())))), ['week', 'day'].includes(view) && /*#__PURE__*/React.createElement(CalendarWeek, _extends({
     onOpen: onOpen,
@@ -603,21 +613,21 @@ const CalendarAvailability = /*#__PURE__*/React.forwardRef((props_, ref) => {
     direction: "row",
     align: "center"
   }, startRightModal, onUpdate && /*#__PURE__*/React.createElement(Tooltip, {
-    name: "Update"
+    name: l('Update')
   }, /*#__PURE__*/React.createElement(IconButton, {
     onClick: () => {
       onUpdate(modal?.object);
       onClose();
     }
   }, /*#__PURE__*/React.createElement(IconEdit, IconProps))), onRemove && /*#__PURE__*/React.createElement(Tooltip, {
-    name: "Remove"
+    name: l('Remove')
   }, /*#__PURE__*/React.createElement(IconButton, {
     onClick: () => {
       onRemove(modal?.object);
       onClose();
     }
   }, /*#__PURE__*/React.createElement(IconRemove, IconProps))), /*#__PURE__*/React.createElement(Tooltip, {
-    name: "Close"
+    name: l('Close')
   }, /*#__PURE__*/React.createElement(IconButton, {
     onClick: onClose
   }, /*#__PURE__*/React.createElement(IconClose, IconProps))), endRightModal)), /*#__PURE__*/React.createElement(ModalMain, {

package/esm/CalendarMenu/CalendarMenu.js

@@ -100,6 +100,7 @@ const useStyle = style(theme => ({
 });
 const CalendarMenu = /*#__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?.onesyCalendarAvailability?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Menu = React.useMemo(() => theme?.elements?.Menu || MenuElement, [theme]);
@@ -185,19 +186,19 @@ const CalendarMenu = /*#__PURE__*/React.forwardRef((props_, ref) => {
     size: 'regular'
   };
   const shortcuts = [{
-    name: 'Today',
+    name: l('Today'),
     onClick: () => onChangeDate(new OnesyDate()),
     icon: /*#__PURE__*/React.createElement(IconMaterialWbSunnyRounded, iconProps)
   }, {
-    name: 'Tomorrow',
+    name: l('Tomorrow'),
     onClick: () => onChangeDate(add(1, 'day')),
     icon: /*#__PURE__*/React.createElement(IconMaterialWbTwilightRounded, iconProps)
   }, {
-    name: '7 days',
+    name: l('7 days'),
     onClick: () => onChangeDate(add(7, 'day')),
     icon: /*#__PURE__*/React.createElement(IconMaterialCounter7Rounded, iconProps)
   }, {
-    name: '1 month',
+    name: l('1 month'),
     onClick: () => onChangeDate(add(1, 'month')),
     icon: /*#__PURE__*/React.createElement(IconMaterialCalendarMonthRounded, iconProps)
   }];
@@ -344,8 +345,8 @@ const CalendarMenu = /*#__PURE__*/React.forwardRef((props_, ref) => {
         version: "text",
         size: "small",
         disabled: !value?.[dateProperty]
-      }, "Clear"), !noRemove && /*#__PURE__*/React.createElement(Tooltip, {
-        name: "Remove"
+      }, l('Clear')), !noRemove && /*#__PURE__*/React.createElement(Tooltip, {
+        name: l('Remove')
       }, /*#__PURE__*/React.createElement(IconButton, {
         size: "small",
         onClick: onRemove

package/esm/CalendarMonth/CalendarMonth.js

@@ -178,6 +178,7 @@ const useStyle = style(theme => ({
 });
 const CalendarMonth = /*#__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?.onesyCalendarMonth?.props?.default), props__), [props__]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
@@ -310,13 +311,13 @@ const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
   if (weekStartDay === 'Monday') dayNames.push(7);else dayNames.unshift(7);
   const renderDayNameMethod = is('function', renderDayName) ? renderDayName : order_ => {
     const values = {
-      1: dayNamesFull ? 'Monday' : 'M',
-      2: dayNamesFull ? 'Tuesday' : 'T',
-      3: dayNamesFull ? 'Wednesday' : 'W',
-      4: dayNamesFull ? 'Thursday' : 'T',
-      5: dayNamesFull ? 'Friday' : 'F',
-      6: dayNamesFull ? 'Saturday' : 'S',
-      7: dayNamesFull ? 'Sunday' : 'S'
+      1: dayNamesFull ? l('Monday') : l('Mo'),
+      2: dayNamesFull ? l('Tuesday') : l('Tu'),
+      3: dayNamesFull ? l('Wednesday') : l('We'),
+      4: dayNamesFull ? l('Thursday') : l('Th'),
+      5: dayNamesFull ? l('Friday') : l('Fr'),
+      6: dayNamesFull ? l('Saturday') : l('Sa'),
+      7: dayNamesFull ? l('Sunday') : l('Su')
     };
     return values[order_];
   };

package/esm/CalendarViews/CalendarViews.js

@@ -5,7 +5,7 @@ const _excluded = ["viewDefault", "dateDefault", "times", "events", "views", "re
 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';
-import { capitalize, is } from '@onesy/utils';
+import { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import { add, OnesyDate, endOf, format, remove, startOf } from '@onesy/date';
 import IconMaterialArrowBackIosNew from '@onesy/icons-material-rounded-react/IconMaterialArrowBackIosNewW100';
@@ -105,6 +105,7 @@ const useStyle = styleMethod(theme => ({
 });
 const CalendarViews = /*#__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?.onesyCalendarViews?.props?.default), props_), [props_]);
   const CalendarMonth = React.useMemo(() => theme?.elements?.CalendarMonth || CalendarMonthElement, [theme]);
   const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
@@ -119,7 +120,16 @@ const CalendarViews = /*#__PURE__*/React.forwardRef((props_, ref) => {
       dateDefault,
       times: timesProps,
       events,
-      views: viewsProps = ['month', 'week', 'day'],
+      views: viewsProps = [{
+        name: l('Month'),
+        value: 'month'
+      }, {
+        name: l('Week'),
+        value: 'week'
+      }, {
+        name: l('Day'),
+        value: 'day'
+      }],
       render,
       onTimeClick,
       onChangeView: onChangeViewProps,
@@ -170,8 +180,8 @@ const CalendarViews = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, [events, timesProps]);
   const viewOptions = React.useMemo(() => {
     return viewsProps?.map(item => ({
-      name: capitalize(item),
-      value: item
+      name: item?.name,
+      value: item?.value
     }));
   }, [viewsProps]);
   const formattedDate = React.useMemo(() => {
@@ -229,13 +239,13 @@ const CalendarViews = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, [render, view]);
   const renderDayName = React.useCallback(order => {
     const values = {
-      1: 'Mon',
-      2: 'Tue',
-      3: 'Wed',
-      4: 'Thu',
-      5: 'Fri',
-      6: 'Sat',
-      7: 'Sun'
+      1: l('Mo'),
+      2: l('Tu'),
+      3: l('We'),
+      4: l('Th'),
+      5: l('Fr'),
+      6: l('Sa'),
+      7: l('Su')
     };
     return values[order];
   }, []);
@@ -308,16 +318,16 @@ const CalendarViews = /*#__PURE__*/React.forwardRef((props_, ref) => {
     size: "small",
     onClick: onToday,
     selected: now.days === date.days
-  }, "Today"), /*#__PURE__*/React.createElement(Line, {
+  }, l('Today')), /*#__PURE__*/React.createElement(Line, {
     gap: 0,
     direction: "row",
     align: "center"
   }, /*#__PURE__*/React.createElement(Tooltip, {
-    name: `Previous ${view}`
+    name: `${l('Previous')} ${view}`
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onPrevious
   }, iconButtonProps), /*#__PURE__*/React.createElement(IconPrevious, iconProps))), /*#__PURE__*/React.createElement(Tooltip, {
-    name: `Next ${view}`
+    name: `${l('Next')} ${view}`
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onNext
   }, iconButtonProps), /*#__PURE__*/React.createElement(IconNext, iconProps)))), /*#__PURE__*/React.createElement(Type, {
@@ -331,7 +341,7 @@ const CalendarViews = /*#__PURE__*/React.forwardRef((props_, ref) => {
     flexNo: true,
     className: classNames([classes.aside, classes.overflowX])
   }, startRight, !noViews && /*#__PURE__*/React.createElement(Select, {
-    name: "View",
+    name: l('View'),
     value: view,
     onChange: onChangeView,
     options: viewOptions,

package/esm/Chart/Chart.js

@@ -272,6 +272,7 @@ const useStyle = styleMethod(theme => ({
 });
 const Chart = /*#__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?.onesyChart?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);

package/esm/ColorTextField/ColorTextField.js

@@ -99,6 +99,7 @@ const useStyle = styleMethod(theme => ({
 });
 const ColorTextField = /*#__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?.onesyColorTextField?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const TextField = React.useMemo(() => theme?.elements?.TextField || TextFieldElement, [theme]);
@@ -201,7 +202,7 @@ const ColorTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       fullWidth: true,
       className: classNames([className, classes.root])
     }, other), root, /*#__PURE__*/React.createElement(SliderInput, {
-      name: "Opacity",
+      name: l('Opacity'),
       value: valueOpacity,
       onChange: onChangeOpacity,
       min: 0,