@onesy/ui-react 1.0.58 → 1.0.60

package/AudioPlayer/AudioPlayer.js

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

package/AudioRecorder/AudioRecorder.js

@@ -73,6 +73,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 const AudioRecorder = react_1.default.forwardRef((props_, ref) => {
     var _a;
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyAudioRecorder) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const Fade = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fade) || Fade_1.default; }, [theme]);
@@ -260,7 +261,7 @@ const AudioRecorder = react_1.default.forwardRef((props_, ref) => {
                                     'onesy-AudioRecorder-time'
                                 ],
                                 classes.time
-                            ]) }, { children: value_ })))] })) }))), status === 'initial' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, utils_1.is)('function', renderMain) ? renderMain({ onStart, supported }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Voice record' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStart, disabled: !supported }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(Icon_, Object.assign({}, iconProps)) })) })) }) }) }))), status === 'running' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Cancel' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStop }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStop, Object.assign({}, iconProps)) })) })), pause && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Pause' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onPause }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPause, Object.assign({}, iconProps)) })) }))), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Confirm' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onConfirm }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconConfirm, Object.assign({}, iconProps)) })) }))] }) }))), status === 'paused' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Cancel' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStop }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStop, Object.assign({}, iconProps)) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Resume' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onResume }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStart, Object.assign({}, iconProps)) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Confirm' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onConfirm }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconConfirm, Object.assign({}, iconProps)) })) }))] }) })))] })));
+                            ]) }, { children: value_ })))] })) }))), status === 'initial' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, utils_1.is)('function', renderMain) ? renderMain({ onStart, supported }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Voice record') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStart, disabled: !supported }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(Icon_, Object.assign({}, iconProps)) })) })) }) }) }))), status === 'running' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Cancel') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStop }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStop, Object.assign({}, iconProps)) })) })), pause && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Pause') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onPause }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPause, Object.assign({}, iconProps)) })) }))), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Confirm') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onConfirm }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconConfirm, Object.assign({}, iconProps)) })) }))] }) }))), status === 'paused' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Cancel') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStop }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStop, Object.assign({}, iconProps)) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Resume') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onResume }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStart, Object.assign({}, iconProps)) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Confirm') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onConfirm }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconConfirm, Object.assign({}, iconProps)) })) }))] }) })))] })));
 });
 AudioRecorder.displayName = 'onesy-AudioRecorder';
 exports.default = AudioRecorder;

package/AutoComplete/AutoComplete.js

@@ -102,6 +102,7 @@ const getValue = (value) => (value === null || value === void 0 ? void 0 : value
 const AutoComplete = react_1.default.forwardRef((props_, ref) => {
     var _a;
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyAutoComplete) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const Menu = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Menu) || Menu_1.default; }, [theme]);
@@ -192,14 +193,14 @@ const AutoComplete = react_1.default.forwardRef((props_, ref) => {
         // reset
         setFree(false);
         if (loading)
-            optionsValue = [{ label: 'Loading...', version: 'text' }];
+            optionsValue = [{ label: l('Loading...'), version: 'text' }];
         else if (newOptions)
             optionsValue = newOptions;
         else
             optionsValue = (0, utils_1.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', version: 'text', noOptions: true });
+                optionsValue.push(noOptionsObject !== undefined ? noOptionsObject : { primary: l('No options'), version: 'text', noOptions: true });
             else {
                 setOpen(false);
                 setFree(true);
@@ -412,7 +413,7 @@ const AutoComplete = react_1.default.forwardRef((props_, ref) => {
     const groups = {};
     if ((0, utils_1.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);
@@ -488,7 +489,7 @@ const AutoComplete = react_1.default.forwardRef((props_, ref) => {
             ...(loading ? [
                 (0, jsx_runtime_1.jsx)(RoundProgress, { className: classes.roundProgress, size: 'small' }, 1)
             ] : []),
-            ...(clear ? [!!(multiple ? value.length : valueInput) && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onClear, size: 'small', fontSize: utils_2.iconFontSize, "aria-label": 'Input clear' }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconClear, Object.assign({}, IconProps)) })))] : []),
+            ...(clear ? [!!(multiple ? value.length : valueInput) && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onClear, size: 'small', fontSize: utils_2.iconFontSize, "aria-label": l('Input clear') }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconClear, Object.assign({}, IconProps)) })))] : []),
             (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onClickArrowDown, size: 'small', fontSize: utils_2.iconFontSize, "aria-expanded": open, "aria-controls": refs.ids.list, InteractionProps: {
                     clear: !!(multiple ? value.length : valueInput)
                 } }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconDropdown, Object.assign({}, IconProps, { className: (0, style_react_1.classNames)([

package/AutoCompleteCountry/AutoCompleteCountry.js

@@ -27,6 +27,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-AutoCompleteCountry' });
 const AutoCompleteCountry = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyAutoCompleteCountry) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const AutoComplete = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.AutoComplete) || AutoComplete_1.default; }, [theme]);
     const ListItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ListItem) || ListItem_1.default; }, [theme]);
@@ -45,7 +46,7 @@ const AutoCompleteCountry = react_1.default.forwardRef((props_, ref) => {
     //   tlds: string[];
     // }
     const options = react_1.default.useMemo(() => {
-        return utils_1.countries.map(item => (Object.assign(Object.assign({}, item), { value: item['alpha-2'] })));
+        return utils_1.countries.map(item => (Object.assign(Object.assign({}, item), { name: l(item.name), value: item['alpha-2'] })));
     }, [utils_1.countries]);
     const valueInputDefault = react_1.default.useMemo(() => {
         var _a;

package/AutoCompleteCurrency/AutoCompleteCurrency.js

@@ -24,6 +24,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-AutoCompleteCurrency' });
 const AutoCompleteCurrency = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyAutoCompleteCurrency) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const AutoComplete = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.AutoComplete) || AutoComplete_1.default; }, [theme]);
     const { valueInputDefault: valueInputDefault_, size = 'regular', className, children } = props, other = __rest(props, ["valueInputDefault", "size", "className", "children"]);
@@ -39,7 +40,7 @@ const AutoCompleteCurrency = react_1.default.forwardRef((props_, ref) => {
     // }
     const options = react_1.default.useMemo(() => {
         return [
-            { name: 'No currency', value: '' },
+            { name: l('No currency'), value: '' },
             ...utils_1.currencies.map(item => ({
                 name: `${item.code} ${item.name} (${item.symbol})`,
                 value: item.code

package/Breadcrumbs/Breadcrumbs.js

@@ -41,6 +41,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-Breadcrumbs' });
 const Breadcrumbs = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyBreadcrumbs) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
@@ -83,7 +84,7 @@ const Breadcrumbs = react_1.default.forwardRef((props_, ref) => {
             }
             items = [
                 ...start,
-                (0, utils_1.is)('function', renderMore) ? renderMore(onExpandMore) : (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ color: 'default', size: 'small', onClick: onExpandMore, "aria-label": 'Expand more path' }, MoreProps, { className: (0, style_react_1.classNames)([
+                (0, utils_1.is)('function', renderMore) ? renderMore(onExpandMore) : (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ color: 'default', size: 'small', onClick: onExpandMore, "aria-label": l('Expand more path') }, MoreProps, { className: (0, style_react_1.classNames)([
                         (0, utils_2.staticClassName)('Breadcrumbs', theme) && [
                             'onesy-Breadcrumbs-expand-more'
                         ],
@@ -116,7 +117,7 @@ const Breadcrumbs = react_1.default.forwardRef((props_, ref) => {
                     ref.current = item;
             }
             refs.root.current = item;
-        }, gap: 1, direction: 'row', align: 'center', wrap: 'wrap', "aria-label": 'Breadcrumb', Component: Component }, other, { className: (0, style_react_1.classNames)([
+        }, gap: 1, direction: 'row', align: 'center', wrap: 'wrap', "aria-label": l('Breadcrumb'), Component: Component }, other, { className: (0, style_react_1.classNames)([
             (0, utils_2.staticClassName)('Breadcrumbs', theme) && [
                 'onesy-Breadcrumbs-root'
             ],

package/BubbleChart/BubbleChart.js

@@ -60,6 +60,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 const BubbleChart = react_1.default.forwardRef((props_, ref) => {
     var _a, _b, _c, _d;
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyBubbleChart) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const Chart = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Chart) || Chart_1.default; }, [theme]);
@@ -95,13 +96,13 @@ const BubbleChart = react_1.default.forwardRef((props_, ref) => {
                     width: '100%'
                 } }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', style: {
                                     fontWeight: 600
-                                } }, { children: "Label" })), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', style: {
+                                } }, { children: l('Label') })), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', style: {
                                     fontWeight: 600
                                 } }, { children: (names === null || names === void 0 ? void 0 : names.y) || 'y' })), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', style: {
                                     fontWeight: 600
                                 } }, { children: (names === null || names === void 0 ? void 0 : names.x) || 'x' })), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', style: {
                                     fontWeight: 600
-                                } }, { children: (names === null || names === void 0 ? void 0 : names.size) || 'Size' }))] })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, direction: 'column' }, { children: groupsSorted.map((group, index) => {
+                                } }, { children: (names === null || names === void 0 ? void 0 : names.size) || l('Size') }))] })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, direction: 'column' }, { children: groupsSorted.map((group, index) => {
                             var _a, _b;
                             return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'column', style: {
                                     width: '100%'

package/Calendar/Calendar.js

@@ -146,6 +146,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-Calendar' });
 const Calendar = react_1.default.forwardRef((props__, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyCalendar) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props__)); }, [props__]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
@@ -354,33 +355,33 @@ const Calendar = react_1.default.forwardRef((props__, ref) => {
                         'onesy-Calendar-header'
                     ],
                     classes.header
-                ]) }, { children: menu === 'month-year' ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(false), size: size, "aria-label": 'Previous month', disabled: open || (+year <= 1970 && month === 'Jan') }, optionButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPrevious, { size: size }) })) })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ version: 'text', onClick: () => onOpen(), fontSize: utils_2.iconFontSize, size: size, end: ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: open !== 'year' }, { children: (0, jsx_runtime_1.jsx)(IconDropDown, { size: size, className: (0, style_react_1.classNames)([
+                ]) }, { children: menu === 'month-year' ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(false), size: size, "aria-label": l('Previous month'), disabled: open || (+year <= 1970 && month === 'Jan') }, optionButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPrevious, { size: size }) })) })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ version: 'text', onClick: () => onOpen(), fontSize: utils_2.iconFontSize, size: size, end: ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: open !== 'year' }, { children: (0, jsx_runtime_1.jsx)(IconDropDown, { size: size, className: (0, style_react_1.classNames)([
                                                 (0, utils_2.staticClassName)('Calendar', theme) && [
                                                     'onesy-Calendar-arrow'
                                                 ],
                                                 classes.arrow,
                                                 open === 'month' && classes.arrow_open
-                                            ]) }) }))), "aria-label": `Select month, current ${month}` }, optionButtonProps, { className: (0, style_react_1.classNames)([
+                                            ]) }) }))), "aria-label": `${l('Select month')}, ${l('current')} ${month}` }, optionButtonProps, { className: (0, style_react_1.classNames)([
                                         (0, utils_2.staticClassName)('Calendar', theme) && [
                                             'onesy-Calendar-option'
                                         ],
                                         optionButtonProps === null || optionButtonProps === void 0 ? void 0 : optionButtonProps.className,
                                         classes.option,
                                         open === 'year' && classes.option_secondary
-                                    ]) }, { children: month })), (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(), size: size, "aria-label": 'Next month', disabled: open || (+year === 2099 && month === 'Dec') }, optionButtonProps, { children: (0, jsx_runtime_1.jsx)(IconNext, { size: size }) })) }))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(false, 'year'), size: size, "aria-label": 'Previous year', disabled: open || +year <= 1970 }, optionButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPrevious, { size: size }) })) })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ version: 'text', onClick: () => onOpen('year'), fontSize: utils_2.iconFontSize, size: size, end: ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: open !== 'month' }, { children: (0, jsx_runtime_1.jsx)(IconDropDown, { size: size, className: (0, style_react_1.classNames)([
+                                    ]) }, { children: month })), (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(), size: size, "aria-label": l('Next month'), disabled: open || (+year === 2099 && month === 'Dec') }, optionButtonProps, { children: (0, jsx_runtime_1.jsx)(IconNext, { size: size }) })) }))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(false, 'year'), size: size, "aria-label": l('Previous year'), disabled: open || +year <= 1970 }, optionButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPrevious, { size: size }) })) })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ version: 'text', onClick: () => onOpen('year'), fontSize: utils_2.iconFontSize, size: size, end: ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: open !== 'month' }, { children: (0, jsx_runtime_1.jsx)(IconDropDown, { size: size, className: (0, style_react_1.classNames)([
                                                 (0, utils_2.staticClassName)('Calendar', theme) && [
                                                     'onesy-Calendar-arrow'
                                                 ],
                                                 classes.arrow,
                                                 open === 'year' && classes.arrow_open
-                                            ]) }) }))), "aria-label": `Select year, current ${year}` }, optionButtonProps, { className: (0, style_react_1.classNames)([
+                                            ]) }) }))), "aria-label": `${l('Select year')}, ${l('current')} ${year}` }, optionButtonProps, { className: (0, style_react_1.classNames)([
                                         (0, utils_2.staticClassName)('Calendar', theme) && [
                                             'onesy-Calendar-option'
                                         ],
                                         optionButtonProps === null || optionButtonProps === void 0 ? void 0 : optionButtonProps.className,
                                         classes.option,
                                         open === 'month' && classes.option_secondary
-                                    ]) }, { children: year })), (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(true, 'year'), size: size, "aria-label": 'Next year', disabled: open || +year === 2099 }, optionButtonProps, { children: (0, jsx_runtime_1.jsx)(IconNext, { size: size }) })) }))] }))] }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button, Object.assign({ tonal: tonal, color: 'inherit', size: size, version: 'text', onClick: () => onOpen('year'), fontSize: utils_2.iconFontSize, end: ((0, jsx_runtime_1.jsx)(IconDropDown, { size: size, className: (0, style_react_1.classNames)([
+                                    ]) }, { children: year })), (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(true, 'year'), size: size, "aria-label": l('Next year'), disabled: open || +year === 2099 }, optionButtonProps, { children: (0, jsx_runtime_1.jsx)(IconNext, { size: size }) })) }))] }))] }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button, Object.assign({ tonal: tonal, color: 'inherit', size: size, version: 'text', onClick: () => onOpen('year'), fontSize: utils_2.iconFontSize, end: ((0, jsx_runtime_1.jsx)(IconDropDown, { size: size, className: (0, style_react_1.classNames)([
                                     (0, utils_2.staticClassName)('Calendar', theme) && [
                                         'onesy-Calendar-arrow'
                                     ],
@@ -392,7 +393,7 @@ const Calendar = react_1.default.forwardRef((props__, ref) => {
                                 ],
                                 optionButtonProps === null || optionButtonProps === void 0 ? void 0 : optionButtonProps.className,
                                 classes.option
-                            ]) }, { children: [(0, date_1.format)(calendar, 'MMMM'), " ", (0, date_1.format)(calendar, 'YYYY')] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: 'inherit', size: size, onClick: () => move(false, menu_month_previous_unit || 'month'), "aria-label": 'Previous month', disabled: !!(open || (+year === 1970 && month === 'Jan')) }, { children: (0, jsx_runtime_1.jsx)(IconPrevious, { size: size }) })) })), (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: 'inherit', size: size, onClick: () => move(true, menu_month_next_unit || 'month'), "aria-label": 'Next month', disabled: !!(open || (+year === 2099 && month === 'Dec')) }, { children: (0, jsx_runtime_1.jsx)(IconNext, { size: size }) })) }))] }))] }) })), !open && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true }, { children: main() }))), open && ((0, jsx_runtime_1.jsx)(Divider, { tonal: false, className: (0, style_react_1.classNames)([
+                            ]) }, { children: [(0, date_1.format)(calendar, 'MMMM'), " ", (0, date_1.format)(calendar, 'YYYY')] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: 'inherit', size: size, onClick: () => move(false, menu_month_previous_unit || 'month'), "aria-label": l('Previous month'), disabled: !!(open || (+year === 1970 && month === 'Jan')) }, { children: (0, jsx_runtime_1.jsx)(IconPrevious, { size: size }) })) })), (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: 'inherit', size: size, onClick: () => move(true, menu_month_next_unit || 'month'), "aria-label": l('Next month'), disabled: !!(open || (+year === 2099 && month === 'Dec')) }, { children: (0, jsx_runtime_1.jsx)(IconNext, { size: size }) })) }))] }))] }) })), !open && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true }, { children: main() }))), open && ((0, jsx_runtime_1.jsx)(Divider, { tonal: false, className: (0, style_react_1.classNames)([
                     (0, utils_2.staticClassName)('Calendar', theme) && [
                         'onesy-Calendar-divider'
                     ],

package/CalendarAvailability/CalendarAvailability.d.ts

@@ -18,7 +18,10 @@ export type ICalendarAvailability = ILine & {
     times?: any;
     events?: ICalendarEvent[];
     meta?: boolean;
-    views?: ICalendarViewsView[];
+    views?: {
+        name: string;
+        value: ICalendarViewsView;
+    }[];
     onUpdate?: (object?: any) => any;
     onRemove?: (object?: any) => any;
     onChangeDate?: (value: OnesyDate) => any;

package/CalendarAvailability/CalendarAvailability.js

@@ -121,6 +121,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-CalendarAvailability' });
 const CalendarAvailability = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyCalendarAvailability) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
@@ -135,7 +136,11 @@ const CalendarAvailability = react_1.default.forwardRef((props_, ref) => {
     const Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
     const Select = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Select) || Select_1.default; }, [theme]);
     const CalendarWeek = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.CalendarWeek) || CalendarWeek_1.default; }, [theme]);
-    const { name, date: date_, dateDefault, times: timesProps, events, meta, views: viewsProps = ['week', 'day', 'simple'], onUpdate, onRemove, onChangeDate: onChangeDateProps, startHeader, endHeader, startLeft, endLeft, startRight, endRight, startLeftModal, endLeftModal, startRightModal, endRightModal, Component = Line, IconEdit = IconMaterialEditW100_1.default, IconPrevious = IconMaterialArrowBackIosNewW100_1.default, IconNext = IconMaterialArrowForwardIosW100_1.default, IconRemove = IconMaterialDeleteW100_1.default, IconClose = IconMaterialKeyboardArrowDownW100_1.default, WeekProps, DayProps, IconProps, IconButtonProps, className, children } = props, other = __rest(props, ["name", "date", "dateDefault", "times", "events", "meta", "views", "onUpdate", "onRemove", "onChangeDate", "startHeader", "endHeader", "startLeft", "endLeft", "startRight", "endRight", "startLeftModal", "endLeftModal", "startRightModal", "endRightModal", "Component", "IconEdit", "IconPrevious", "IconNext", "IconRemove", "IconClose", "WeekProps", "DayProps", "IconProps", "IconButtonProps", "className", "children"]);
+    const { name, date: date_, dateDefault, times: timesProps, events, meta, views: viewsProps = [
+        { name: l('Week'), value: 'week' },
+        { name: l('Day'), value: 'day' },
+        { name: l('Simple'), value: 'simple' }
+    ], onUpdate, onRemove, onChangeDate: onChangeDateProps, startHeader, endHeader, startLeft, endLeft, startRight, endRight, startLeftModal, endLeftModal, startRightModal, endRightModal, Component = Line, IconEdit = IconMaterialEditW100_1.default, IconPrevious = IconMaterialArrowBackIosNewW100_1.default, IconNext = IconMaterialArrowForwardIosW100_1.default, IconRemove = IconMaterialDeleteW100_1.default, IconClose = IconMaterialKeyboardArrowDownW100_1.default, WeekProps, DayProps, IconProps, IconButtonProps, className, children } = props, other = __rest(props, ["name", "date", "dateDefault", "times", "events", "meta", "views", "onUpdate", "onRemove", "onChangeDate", "startHeader", "endHeader", "startLeft", "endLeft", "startRight", "endRight", "startLeftModal", "endLeftModal", "startRightModal", "endRightModal", "Component", "IconEdit", "IconPrevious", "IconNext", "IconRemove", "IconClose", "WeekProps", "DayProps", "IconProps", "IconButtonProps", "className", "children"]);
     const { classes } = useStyle();
     const [now, setNow] = react_1.default.useState(new date_1.OnesyDate());
     const [date, setDate] = react_1.default.useState(dateDefault || date_ || new date_1.OnesyDate());
@@ -200,13 +205,13 @@ const CalendarAvailability = react_1.default.forwardRef((props_, ref) => {
     }, []);
     const optionsStatus = react_1.default.useMemo(() => {
         return [
-            { name: 'Working', value: 'working' },
-            { name: 'Not working', value: 'not-working' },
-            { name: 'On a break', value: 'break' },
-            { name: 'Scheduled', value: 'pending' },
-            { name: 'Rescheduled', value: 'rescheduled' },
-            { name: 'Cancelled', value: 'canceled' },
-            { name: 'Other', value: 'other' }
+            { name: l('Working'), value: 'working' },
+            { name: l('Not working'), value: 'not-working' },
+            { name: l('On a break'), value: 'break' },
+            { name: l('Scheduled'), value: 'pending' },
+            { name: l('Rescheduled'), value: 'rescheduled' },
+            { name: l('Cancelled'), value: 'canceled' },
+            { name: l('Other'), value: 'other' }
         ];
     }, []);
     const onToday = react_1.default.useCallback(() => {
@@ -291,8 +296,8 @@ const CalendarAvailability = react_1.default.forwardRef((props_, ref) => {
     }, []);
     const viewOptions = react_1.default.useMemo(() => {
         return viewsProps === null || viewsProps === void 0 ? void 0 : viewsProps.map(item => ({
-            name: (0, utils_1.capitalize)(item),
-            value: item
+            name: (0, utils_1.capitalize)(item === null || item === void 0 ? void 0 : item.name),
+            value: item === null || item === void 0 ? void 0 : item.value
         }));
     }, [viewsProps]);
     const days = react_1.default.useMemo(() => {
@@ -320,13 +325,13 @@ const CalendarAvailability = react_1.default.forwardRef((props_, ref) => {
                                             ]), dangerouslySetInnerHTML: {
                                                 __html: (0, utils_1.textToInnerHTML)(itemValue.description)
                                             } }))] }), indexItem));
-                            }) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, { children: "No information for this day" }))) }))] }), index));
+                            }) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, { children: l('No information for this day') }))) }))] }), index));
             }) })));
     };
     const simpleExceptionsUI = () => {
         const items = times.flatMap(item => getDatesWeek(item));
         if (!items.length)
-            return ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b1' }, { children: "No exceptions this week" })));
+            return ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b1' }, { children: l('No exceptions this week') })));
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items.map((itemValue, index) => {
                 const day = (0, date_1.set)(index + 1, 'dayWeek');
                 const itemValueFrom = new date_1.OnesyDate(itemValue.from);
@@ -365,10 +370,10 @@ const CalendarAvailability = react_1.default.forwardRef((props_, ref) => {
                     (0, utils_2.staticClassName)('CalendarAvailability', theme) && [
                         'onesy-CalendarAvailability-header'
                     ]
-                ]) }, { children: [startHeader, (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', wrap: 'wrap', justify: 'space-between', align: 'center', fullWidth: true }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, direction: 'row', wrap: 'wrap', align: 'center', className: classes.aside }, { children: [startLeft, (0, jsx_runtime_1.jsx)(Button, Object.assign({ color: 'inherit', version: 'outlined', size: 'small', onClick: onToday, selected: now.days === date.days }, { children: "Today" })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: `Previous ${view}` }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onPrevious }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPrevious, { size: 'regular' }) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: `Next ${view}` }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onNext }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconNext, { size: 'regular' }) })) }))] })), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h2', weight: 500, whiteSpace: 'nowrap' }, { children: formattedDate })), endLeft] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, direction: 'row', align: 'center', flexNo: true, className: (0, style_react_1.classNames)([
+                ]) }, { children: [startHeader, (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', wrap: 'wrap', justify: 'space-between', align: 'center', fullWidth: true }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, direction: 'row', wrap: 'wrap', align: 'center', className: classes.aside }, { children: [startLeft, (0, jsx_runtime_1.jsx)(Button, Object.assign({ color: 'inherit', version: 'outlined', size: 'small', onClick: onToday, selected: now.days === date.days }, { children: l('Today') })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: `${l('Previous')} ${view}` }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onPrevious }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPrevious, { size: 'regular' }) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: `${l('Next')} ${view}` }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onNext }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconNext, { size: 'regular' }) })) }))] })), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h2', weight: 500, whiteSpace: 'nowrap' }, { children: formattedDate })), endLeft] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, direction: 'row', align: 'center', flexNo: true, className: (0, style_react_1.classNames)([
                                     classes.aside,
                                     classes.overflowX
-                                ]) }, { children: [startRight, ['week', 'day'].includes(view) && ((0, jsx_runtime_1.jsxs)(Label, Object.assign({ checked: displayTime, onChange: onChangeDisplayTime }, { children: [(0, jsx_runtime_1.jsx)(Switch, {}), "Display time"] }))), (0, jsx_runtime_1.jsx)(Select, { name: 'View', value: view, onChange: onChangeView, options: viewOptions, size: 'small', MenuProps: {
+                                ]) }, { children: [startRight, ['week', 'day'].includes(view) && ((0, jsx_runtime_1.jsxs)(Label, Object.assign({ checked: displayTime, onChange: onChangeDisplayTime }, { children: [(0, jsx_runtime_1.jsx)(Switch, {}), l('Display time')] }))), (0, jsx_runtime_1.jsx)(Select, { name: l('View'), value: view, onChange: onChangeView, options: viewOptions, size: 'small', MenuProps: {
                                             portal: true,
                                             size: 'regular'
                                         }, WrapperProps: {
@@ -384,15 +389,15 @@ const CalendarAvailability = react_1.default.forwardRef((props_, ref) => {
                                     'onesy-CalendarAvailability-simple'
                                 ],
                                 classes.calendar
-                            ]) }, { children: [simpleTimesUI(), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5 }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 't2' }, { children: "Exceptions this week" })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1 }, { children: simpleExceptionsUI() }))] }))] })) }))), ['week', 'day'].includes(view) && ((0, jsx_runtime_1.jsx)(CalendarWeek, Object.assign({ onOpen: onOpen, date: date, displayTime: displayTime, statuses: statuses, times: times, events: events, day: view === 'day' }, WeekProps))), legend] })), times && ((0, jsx_runtime_1.jsxs)(Modal, Object.assign({ open: !!(modal === null || modal === void 0 ? void 0 : modal.open), onClose: onClose, minWidth: 'lg', TransitionComponent: Slide, size: 'small' }, { children: [(0, jsx_runtime_1.jsxs)(ModalHeader, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'space-between', fullWidth: true }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [startLeftModal, (0, jsx_runtime_1.jsx)(Line, { className: classes.palettePreview, style: {
+                            ]) }, { children: [simpleTimesUI(), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5 }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 't2' }, { children: l('Exceptions this week') })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1 }, { children: simpleExceptionsUI() }))] }))] })) }))), ['week', 'day'].includes(view) && ((0, jsx_runtime_1.jsx)(CalendarWeek, Object.assign({ onOpen: onOpen, date: date, displayTime: displayTime, statuses: statuses, times: times, events: events, day: view === 'day' }, WeekProps))), legend] })), times && ((0, jsx_runtime_1.jsxs)(Modal, Object.assign({ open: !!(modal === null || modal === void 0 ? void 0 : modal.open), onClose: onClose, minWidth: 'lg', TransitionComponent: Slide, size: 'small' }, { children: [(0, jsx_runtime_1.jsxs)(ModalHeader, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'space-between', fullWidth: true }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [startLeftModal, (0, jsx_runtime_1.jsx)(Line, { className: classes.palettePreview, style: {
                                             background: getColor(modal)
-                                        } }), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', weight: 100 }, { children: (0, utils_1.cleanValue)(itemToText(modal === null || modal === void 0 ? void 0 : modal.status), { capitalize: true }) })), endLeftModal] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [startRightModal, onUpdate && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Update' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => {
+                                        } }), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', weight: 100 }, { children: (0, utils_1.cleanValue)(itemToText(modal === null || modal === void 0 ? void 0 : modal.status), { capitalize: true }) })), endLeftModal] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [startRightModal, onUpdate && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Update') }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => {
                                                 onUpdate(modal === null || modal === void 0 ? void 0 : modal.object);
                                                 onClose();
-                                            } }, { children: (0, jsx_runtime_1.jsx)(IconEdit, Object.assign({}, IconProps)) })) }))), onRemove && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Remove' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => {
+                                            } }, { children: (0, jsx_runtime_1.jsx)(IconEdit, Object.assign({}, IconProps)) })) }))), onRemove && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Remove') }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => {
                                                 onRemove(modal === null || modal === void 0 ? void 0 : modal.object);
                                                 onClose();
-                                            } }, { children: (0, jsx_runtime_1.jsx)(IconRemove, Object.assign({}, IconProps)) })) }))), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Close' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(IconClose, Object.assign({}, IconProps)) })) })), endRightModal] }))] })), (0, jsx_runtime_1.jsx)(ModalMain, Object.assign({ align: 'flex-start', className: classes.modalMain }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, fullWidth: true }, { children: [(0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'l1', weight: 200 }, { children: [(0, date_1.format)(modal === null || modal === void 0 ? void 0 : modal.day, 'dd'), " ", (0, date_1.format)(new date_1.OnesyDate(modal === null || modal === void 0 ? void 0 : modal.from), (modal === null || modal === void 0 ? void 0 : modal.weekly) ? `hh:mm a` : utils_2.formats.entire), " \u2014 ", (0, date_1.format)(new date_1.OnesyDate(modal === null || modal === void 0 ? void 0 : modal.to), (modal === null || modal === void 0 ? void 0 : modal.weekly) ? `hh:mm a` : utils_2.formats.entire)] })), (modal === null || modal === void 0 ? void 0 : modal.description) && ((0, jsx_runtime_1.jsx)(Type, { version: 'b2', dangerouslySetInnerHTML: {
+                                            } }, { children: (0, jsx_runtime_1.jsx)(IconRemove, Object.assign({}, IconProps)) })) }))), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Close') }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(IconClose, Object.assign({}, IconProps)) })) })), endRightModal] }))] })), (0, jsx_runtime_1.jsx)(ModalMain, Object.assign({ align: 'flex-start', className: classes.modalMain }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, fullWidth: true }, { children: [(0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'l1', weight: 200 }, { children: [(0, date_1.format)(modal === null || modal === void 0 ? void 0 : modal.day, 'dd'), " ", (0, date_1.format)(new date_1.OnesyDate(modal === null || modal === void 0 ? void 0 : modal.from), (modal === null || modal === void 0 ? void 0 : modal.weekly) ? `hh:mm a` : utils_2.formats.entire), " \u2014 ", (0, date_1.format)(new date_1.OnesyDate(modal === null || modal === void 0 ? void 0 : modal.to), (modal === null || modal === void 0 ? void 0 : modal.weekly) ? `hh:mm a` : utils_2.formats.entire)] })), (modal === null || modal === void 0 ? void 0 : modal.description) && ((0, jsx_runtime_1.jsx)(Type, { version: 'b2', dangerouslySetInnerHTML: {
                                         __html: (0, utils_1.textToInnerHTML)(modal.description)
                                     } }))] })) }))] })))] })));
 });

package/CalendarMenu/CalendarMenu.js

@@ -110,6 +110,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 const CalendarMenu = react_1.default.forwardRef((props_, ref) => {
     var _a;
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyCalendarAvailability) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const Menu = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Menu) || Menu_1.default; }, [theme]);
@@ -182,10 +183,10 @@ const CalendarMenu = react_1.default.forwardRef((props_, ref) => {
         size: 'regular'
     };
     const shortcuts = [
-        { name: 'Today', onClick: () => onChangeDate(new date_1.OnesyDate()), icon: (0, jsx_runtime_1.jsx)(IconMaterialWbSunnyW100_1.default, Object.assign({}, iconProps)) },
-        { name: 'Tomorrow', onClick: () => onChangeDate((0, date_1.add)(1, 'day')), icon: (0, jsx_runtime_1.jsx)(IconMaterialWbTwilightW100_1.default, Object.assign({}, iconProps)) },
-        { name: '7 days', onClick: () => onChangeDate((0, date_1.add)(7, 'day')), icon: (0, jsx_runtime_1.jsx)(IconMaterialCounter7W100_1.default, Object.assign({}, iconProps)) },
-        { name: '1 month', onClick: () => onChangeDate((0, date_1.add)(1, 'month')), icon: (0, jsx_runtime_1.jsx)(IconMaterialCalendarMonthW100_1.default, Object.assign({}, iconProps)) }
+        { name: l('Today'), onClick: () => onChangeDate(new date_1.OnesyDate()), icon: (0, jsx_runtime_1.jsx)(IconMaterialWbSunnyW100_1.default, Object.assign({}, iconProps)) },
+        { name: l('Tomorrow'), onClick: () => onChangeDate((0, date_1.add)(1, 'day')), icon: (0, jsx_runtime_1.jsx)(IconMaterialWbTwilightW100_1.default, Object.assign({}, iconProps)) },
+        { name: l('7 days'), onClick: () => onChangeDate((0, date_1.add)(7, 'day')), icon: (0, jsx_runtime_1.jsx)(IconMaterialCounter7W100_1.default, Object.assign({}, iconProps)) },
+        { name: l('1 month'), onClick: () => onChangeDate((0, date_1.add)(1, 'month')), icon: (0, jsx_runtime_1.jsx)(IconMaterialCalendarMonthW100_1.default, Object.assign({}, iconProps)) }
     ];
     const onClear = react_1.default.useCallback((event) => {
         onChange(refs.dateProperty.current, null);
@@ -277,7 +278,7 @@ const CalendarMenu = react_1.default.forwardRef((props_, ref) => {
                             'onesy-time'
                         ]), style: {
                             width: (_a = refs.time.current) === null || _a === void 0 ? void 0 : _a.clientWidth
-                        } }, { children: (0, jsx_runtime_1.jsx)(ListItem, { ref: refs.time, start: ((0, jsx_runtime_1.jsx)(IconMaterialScheduleW100_1.default, Object.assign({}, iconProps))), primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', color: 'inherit' }, { children: (0, date_1.format)(date, 'HH:mm') }))), startAlign: 'center', size: 'small', button: true, Component: 'div', className: classes.item }) }))), endBottom, (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.4, direction: 'row', align: 'center', justify: 'space-between', fullWidth: true, className: classes.menuFooter }, { children: [(0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onClear, version: 'text', size: 'small', disabled: !(value === null || value === void 0 ? void 0 : value[dateProperty]) }, { children: "Clear" })), !noRemove && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Remove' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: 'small', onClick: onRemove }, { children: (0, jsx_runtime_1.jsx)(IconMaterialDeleteW100_1.default, Object.assign({}, iconProps)) })) })))] }))] }))), CalendarMonthProps: {
+                        } }, { children: (0, jsx_runtime_1.jsx)(ListItem, { ref: refs.time, start: ((0, jsx_runtime_1.jsx)(IconMaterialScheduleW100_1.default, Object.assign({}, iconProps))), primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', color: 'inherit' }, { children: (0, date_1.format)(date, 'HH:mm') }))), startAlign: 'center', size: 'small', button: true, Component: 'div', className: classes.item }) }))), endBottom, (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.4, direction: 'row', align: 'center', justify: 'space-between', fullWidth: true, className: classes.menuFooter }, { children: [(0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onClear, version: 'text', size: 'small', disabled: !(value === null || value === void 0 ? void 0 : value[dateProperty]) }, { children: l('Clear') })), !noRemove && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Remove') }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: 'small', onClick: onRemove }, { children: (0, jsx_runtime_1.jsx)(IconMaterialDeleteW100_1.default, Object.assign({}, iconProps)) })) })))] }))] }))), CalendarMonthProps: {
                 renderDay: (dayOnesyDate, propsDay, day, outside) => {
                     const repeating = repeats(dayOnesyDate);
                     return ((0, jsx_runtime_1.jsx)(PaginationItem, Object.assign({ tonal: true, color: 'inherit', size: 'small', InteractionProps: {

package/CalendarMonth/CalendarMonth.js

@@ -188,6 +188,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 const CalendarMonth = react_1.default.forwardRef((props__, ref) => {
     var _a, _b, _c;
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyCalendarMonth) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props__)); }, [props__]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
@@ -303,13 +304,13 @@ const CalendarMonth = react_1.default.forwardRef((props__, ref) => {
         dayNames.unshift(7);
     const renderDayNameMethod = (0, utils_1.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/CalendarViews/CalendarViews.d.ts

@@ -8,7 +8,10 @@ export type ICalendarViews = ICalendar & {
     dateDefault?: OnesyDate;
     times?: any;
     events?: ICalendarEvent[];
-    views?: ICalendarViewsView[];
+    views?: {
+        name: string;
+        value: ICalendarViewsView;
+    }[];
     render?: (date: OnesyDate, view: ICalendarViewsView) => any;
     onTimeClick?: (date: OnesyDate, view: ICalendarViewsView, event: MouseEvent) => any;
     onChangeView?: (view: ICalendarViewsView) => any;