@onesy/ui-react 1.0.73 → 1.0.75

package/Calendar/Calendar.js

@@ -289,7 +289,7 @@ const Calendar = react_1.default.forwardRef((props__, ref) => {
                                 classes.carousel_item
                             ]) }, { children: [(0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3', className: (0, style_react_1.classNames)([
                                         classes.carousel_item_label
-                                    ]) }, { children: [(0, date_1.format)(calendarOnesyDate, 'MMMM'), " ", (0, date_1.format)(calendarOnesyDate, 'YYYY')] })), (0, jsx_runtime_1.jsx)(CalendarMonth, Object.assign({ color: 'default', value: value, calendar: calendarOnesyDate, valid: valid, now: now, size: size, range: range, offset: index, min: min, max: max, validate: validate, outside: false, noTransition: true }, calendarMonthProps, { onChange: onCalendarMonthChange, onChangeCalendar: onCalendarMonthChangeCalendar, TransitionProps: {
+                                    ]) }, { children: [(0, date_1.format)(calendarOnesyDate, 'MMMM', { l }), " ", (0, date_1.format)(calendarOnesyDate, 'YYYY', { l })] })), (0, jsx_runtime_1.jsx)(CalendarMonth, Object.assign({ color: 'default', value: value, calendar: calendarOnesyDate, valid: valid, now: now, size: size, range: range, offset: index, min: min, max: max, validate: validate, outside: false, noTransition: true }, calendarMonthProps, { onChange: onCalendarMonthChange, onChangeCalendar: onCalendarMonthChangeCalendar, TransitionProps: {
                                         onTransition
                                     }, className: (0, style_react_1.classNames)([
                                         (0, utils_2.staticClassName)('Calendar', theme) && [
@@ -322,7 +322,7 @@ const Calendar = react_1.default.forwardRef((props__, ref) => {
                                         width: '100%'
                                     } }, { children: [calendars > 1 && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3', style: {
                                                 paddingInlineStart: '16px'
-                                            } }, { children: l((0, date_1.format)(calendarOnesyDate, 'MMMM')) }))), (0, jsx_runtime_1.jsx)(CalendarMonth, Object.assign({ color: 'default', value: value, calendar: calendarOnesyDate, valid: valid, now: now, size: size, range: range, offset: index, min: min, max: max, validate: validate }, calendarMonthProps, { onChange: onCalendarMonthChange, onChangeCalendar: onCalendarMonthChangeCalendar, TransitionProps: {
+                                            } }, { children: (0, date_1.format)(calendarOnesyDate, 'MMMM', { l }) }))), (0, jsx_runtime_1.jsx)(CalendarMonth, Object.assign({ color: 'default', value: value, calendar: calendarOnesyDate, valid: valid, now: now, size: size, range: range, offset: index, min: min, max: max, validate: validate }, calendarMonthProps, { onChange: onCalendarMonthChange, onChangeCalendar: onCalendarMonthChangeCalendar, TransitionProps: {
                                                 onTransition
                                             }, className: (0, style_react_1.classNames)([
                                                 (0, utils_2.staticClassName)('Calendar', theme) && [
@@ -398,7 +398,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": 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)([
+                            ]) }, { children: [(0, date_1.format)(calendar, 'MMMM', { l }), " ", (0, date_1.format)(calendar, 'YYYY', { l })] })), (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'
                     ],
@@ -411,7 +411,7 @@ const Calendar = react_1.default.forwardRef((props__, ref) => {
                     ]) }, { children: getMonths(value, calendar, props).map((item, index) => {
                         const onesyDate = item.value;
                         const selected = calendar.month === onesyDate.month;
-                        return ((0, jsx_runtime_1.jsx)(ListItem, { onClick: () => onUpdateCalendarOption(onesyDate), primary: l((0, date_1.format)(onesyDate, 'MMMM')), inset: !selected, startAlign: 'center', size: size, start: selected ? ((0, jsx_runtime_1.jsx)(Buttons_1.IconDoneAnimated, { in: true, add: true, simple: true, size: size })) : undefined, disabled: (!valid(onesyDate, 'month')), selected: selected, button: true, PrimaryProps: {
+                        return ((0, jsx_runtime_1.jsx)(ListItem, { onClick: () => onUpdateCalendarOption(onesyDate), primary: (0, date_1.format)(onesyDate, 'MMMM', { l }), inset: !selected, startAlign: 'center', size: size, start: selected ? ((0, jsx_runtime_1.jsx)(Buttons_1.IconDoneAnimated, { in: true, add: true, simple: true, size: size })) : undefined, disabled: (!valid(onesyDate, 'month')), selected: selected, button: true, PrimaryProps: {
                                 version: size === 'regular' ? 'b2' : size === 'small' ? 'b3' : 'b1'
                             }, "data-value": index, className: (0, style_react_1.classNames)([
                                 (0, utils_2.staticClassName)('Calendar', theme) && [

package/CalendarAvailability/CalendarAvailability.js

@@ -311,15 +311,15 @@ const CalendarAvailability = react_1.default.forwardRef((props_, ref) => {
             }, className: classes.simpleTimes, fullWidth: true }, { children: days.map((itemDay, index) => {
                 const values = times.filter(item => { var _a; return (_a = item.weekly.days[index + 1]) === null || _a === void 0 ? void 0 : _a.active; }).flatMap(item => item.weekly.days[index + 1].values).filter(item => item && [undefined, true].includes(refs.statuses.current[item.status || 'working']));
                 values.sort((a, b) => b.from > a.from ? -1 : 1);
-                return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, direction: 'column' }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, align: 'center', fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h3', weight: 400 }, { children: (0, date_1.format)(itemDay, 'dd') })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
+                return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, direction: 'column' }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, align: 'center', fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h3', weight: 400 }, { children: (0, date_1.format)(itemDay, 'dd', { l }) })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
                                         classes.weekDay,
                                         itemDay.year === now.year && itemDay.dayYear === now.dayYear && classes.today
-                                    ]) }, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', weight: 200 }, { children: (0, date_1.format)(itemDay, 'DD.MM.') })) }))] })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 2, fullWidth: true }, { children: !!values.length ? values.map((itemValue, indexItem) => {
+                                    ]) }, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', weight: 200 }, { children: (0, date_1.format)(itemDay, 'DD.MM.', { l }) })) }))] })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 2, fullWidth: true }, { children: !!values.length ? values.map((itemValue, indexItem) => {
                                 const itemValueFrom = new date_1.OnesyDate(itemValue.from);
                                 const itemValueTo = new date_1.OnesyDate(itemValue.to);
                                 return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, className: classes.dayWeekSimple }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Line, { className: classes.palettePreview, style: {
                                                         background: getColor(itemValue)
-                                                    } }), (0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b2', weight: 300 }, { children: [(0, date_1.format)(itemValueFrom, 'hh:mm a'), " \u2014 ", (0, date_1.format)(itemValueTo, 'hh:mm a')] }))] })), itemValue.description && ((0, jsx_runtime_1.jsx)(Type, { version: 'b2', weight: 200, whiteSpace: 'pre-wrap', className: (0, style_react_1.classNames)([
+                                                    } }), (0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b2', weight: 300 }, { children: [(0, date_1.format)(itemValueFrom, 'hh:mm a', { l }), " \u2014 ", (0, date_1.format)(itemValueTo, 'hh:mm a', { l })] }))] })), itemValue.description && ((0, jsx_runtime_1.jsx)(Type, { version: 'b2', weight: 200, whiteSpace: 'pre-wrap', className: (0, style_react_1.classNames)([
                                                 classes.timeDescription,
                                                 !refs.displayTime.current && 'onesy-work-day-time'
                                             ]), dangerouslySetInnerHTML: {
@@ -338,7 +338,7 @@ const CalendarAvailability = react_1.default.forwardRef((props_, ref) => {
                 const itemValueTo = new date_1.OnesyDate(itemValue.to);
                 return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'column' }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(Line, { className: classes.palettePreview, style: {
                                         background: getColor(itemValue)
-                                    } }), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', weight: 400 }, { children: (0, date_1.format)(day, 'dd') })), (0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b2' }, { children: [(0, date_1.format)(itemValueFrom, utils_2.formats.entire), " \u2014 ", (0, date_1.format)(itemValueTo, utils_2.formats.entire)] }))] }))] })), itemValue.description && ((0, jsx_runtime_1.jsx)(Type, { version: 'b2', weight: 200, whiteSpace: 'pre-wrap', className: (0, style_react_1.classNames)([
+                                    } }), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', weight: 400 }, { children: (0, date_1.format)(day, 'dd', { l }) })), (0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b2' }, { children: [(0, date_1.format)(itemValueFrom, utils_2.formats.entire, { l }), " \u2014 ", (0, date_1.format)(itemValueTo, utils_2.formats.entire, { l })] }))] }))] })), itemValue.description && ((0, jsx_runtime_1.jsx)(Type, { version: 'b2', weight: 200, whiteSpace: 'pre-wrap', className: (0, style_react_1.classNames)([
                                 classes.timeDescription,
                                 !refs.displayTime.current && 'onesy-work-day-time'
                             ]), dangerouslySetInnerHTML: {
@@ -348,9 +348,9 @@ const CalendarAvailability = react_1.default.forwardRef((props_, ref) => {
     };
     const formattedDate = react_1.default.useMemo(() => {
         if (view === 'day')
-            return (0, date_1.format)(date, `MMMM DD, YYYY`);
+            return (0, date_1.format)(date, `MMMM DD, YYYY`, { l });
         if (['week', 'simple'].includes(view))
-            return `${(0, date_1.format)((0, date_1.startOf)(date, 'week'), `MMM DD, YYYY`)} – ${(0, date_1.format)((0, date_1.endOf)(date, 'week'), `MMM DD, YYYY`)}`;
+            return `${(0, date_1.format)((0, date_1.startOf)(date, 'week'), `MMM DD, YYYY`, { l })} – ${(0, date_1.format)((0, date_1.endOf)(date, 'week'), `MMM DD, YYYY`, { l })}`;
     }, [view, date]);
     const legend = react_1.default.useMemo(() => {
         return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ rowGap: 1.5, direction: 'row', align: 'center', className: classes.legend }, { children: optionsStatus.map((item, index) => ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', onClick: () => onStatusToggle(item.value), flexNo: true, className: (0, style_react_1.classNames)([
@@ -397,7 +397,7 @@ const CalendarAvailability = react_1.default.forwardRef((props_, ref) => {
                                             } }, { 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: 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: {
+                                            } }, { 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', { l }), " ", (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, { l }), " \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, { l })] })), (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

@@ -278,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: 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: {
+                        } }, { 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', { l }) }))), 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: {
@@ -286,7 +286,7 @@ const CalendarMenu = react_1.default.forwardRef((props_, ref) => {
                         }, TypeProps: {
                             version: 'b3',
                             priority: !day.selected ? !day.weekend ? 'primary' : 'secondary' : undefined
-                        }, "aria-label": (0, date_1.format)(dayOnesyDate, 'DD-MM-YYYY'), className: (0, style_react_1.classNames)([
+                        }, "aria-label": (0, date_1.format)(dayOnesyDate, 'DD-MM-YYYY', { l }), className: (0, style_react_1.classNames)([
                             classes.dayValue,
                             repeating && classes.dayValueRepeating
                         ]), style: Object.assign(Object.assign({}, (day.today ? {

package/CalendarMonth/CalendarMonth.js

@@ -464,7 +464,7 @@ const CalendarMonth = react_1.default.forwardRef((props__, ref) => {
                                     }, TypeProps: {
                                         version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
                                         priority: !day.selected ? !day.weekend ? 'primary' : 'secondary' : undefined
-                                    }, "aria-label": (0, date_1.format)(day.onesyDate, 'DD-MM-YYYY') }, PaginationItemProps, { className: (0, style_react_1.classNames)([
+                                    }, "aria-label": (0, date_1.format)(day.onesyDate, 'DD-MM-YYYY', { l }) }, PaginationItemProps, { className: (0, style_react_1.classNames)([
                                         (0, utils_2.staticClassName)('CalendarMonth', theme) && [
                                             'onesy-CalendarMonth-day-value',
                                             day.in && 'onesy-CalendarMonth-day-in',

package/CalendarViews/CalendarViews.js

@@ -166,11 +166,11 @@ const CalendarViews = react_1.default.forwardRef((props_, ref) => {
     }, [viewsProps]);
     const formattedDate = react_1.default.useMemo(() => {
         if (view === 'day')
-            return (0, date_1.format)(date, `MMMM DD, YYYY`);
+            return (0, date_1.format)(date, `MMMM DD, YYYY`, { l });
         if (view === 'week')
-            return `${(0, date_1.format)((0, date_1.startOf)(date, 'week'), `MMM DD, YYYY`)} – ${(0, date_1.format)((0, date_1.endOf)(date, 'week'), `MMM DD, YYYY`)}`;
+            return `${(0, date_1.format)((0, date_1.startOf)(date, 'week'), `MMM DD, YYYY`, { l })} – ${(0, date_1.format)((0, date_1.endOf)(date, 'week'), `MMM DD, YYYY`, { l })}`;
         if (view === 'month')
-            return (0, date_1.format)(date, `MMMM YYYY`);
+            return (0, date_1.format)(date, `MMMM YYYY`, { l });
     }, [view, date]);
     const onChangeView = react_1.default.useCallback((valueNew) => {
         setView(valueNew);
@@ -205,7 +205,7 @@ const CalendarViews = react_1.default.forwardRef((props_, ref) => {
         return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'column', align: 'center', flex: true, fullWidth: true, className: classes.dayWrapper }, { children: [(0, jsx_runtime_1.jsx)(Line, Object.assign({ direction: 'row', justify: 'center', align: 'center', fullWidth: true, className: (0, style_react_1.classNames)([
                         classes.monthDay,
                         day.today && classes.today
-                    ]) }, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, { children: (0, date_1.format)(valueCalendarMonth, 'D') })) })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0.5, flex: true, fullWidth: true, className: classes.contentItemsMonth }, { children: (0, utils_1.is)('function', render) && render(valueCalendarMonth, view) }))] })));
+                    ]) }, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, { children: (0, date_1.format)(valueCalendarMonth, 'D', { l }) })) })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0.5, flex: true, fullWidth: true, className: classes.contentItemsMonth }, { children: (0, utils_1.is)('function', render) && render(valueCalendarMonth, view) }))] })));
     }, [render, view]);
     const renderDayName = react_1.default.useCallback((order) => {
         const values = {

package/CalendarWeek/CalendarWeek.js

@@ -135,6 +135,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-CalendarWeek' });
 const CalendarWeek = 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.onesyCalendarWeek) === 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]);
@@ -314,7 +315,7 @@ const CalendarWeek = react_1.default.forwardRef((props_, ref) => {
             }));
             const elementRendered = (0, utils_1.is)('function', render) ? render(item, dayProp ? 'day' : 'week') : ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, align: 'center', justify: 'center' }, itemProps, { children: [!minimal && refs.displayTime.current && ((0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'l2', weight: 300, align: 'center', className: classes.time, style: {
                             background: getColor(item)
-                        } }, { children: [(0, date_1.format)(from, 'hh:mm a'), " - ", renderTo((0, date_1.format)(to, 'hh:mm a'))] }))), item.description && ((0, jsx_runtime_1.jsx)(Type, { version: 'b2', dangerouslySetInnerHTML: {
+                        } }, { children: [(0, date_1.format)(from, 'hh:mm a', { l }), " - ", renderTo((0, date_1.format)(to, 'hh:mm a', { l }))] }))), item.description && ((0, jsx_runtime_1.jsx)(Type, { version: 'b2', dangerouslySetInnerHTML: {
                             __html: (0, utils_1.textToInnerHTML)(item.description)
                         }, style: {
                             maxHeight: 24,
@@ -365,13 +366,13 @@ const CalendarWeek = react_1.default.forwardRef((props_, ref) => {
                         classes.hours
                     ]) }, { children: [(0, jsx_runtime_1.jsx)(Line, { className: classes.dayHeader }), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, flex: true, fullWidth: true, className: classes.hourWrapper }, { children: hours.map((itemHour, index) => ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, align: 'unset', className: classes.hour, style: {
                                     top: `${(100 / 24) * index}%`
-                                } }, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', whiteSpace: 'nowrap' }, { children: (0, date_1.format)(itemHour, 'h A') })) }), index))) }))] })), dayProp && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'column', align: 'center', flex: true, className: (0, style_react_1.classNames)([
+                                } }, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', whiteSpace: 'nowrap' }, { children: (0, date_1.format)(itemHour, 'h A', { l }) })) }), index))) }))] })), dayProp && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'column', align: 'center', flex: true, className: (0, style_react_1.classNames)([
                         'onesy-day',
                         classes.day
-                    ]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, align: 'center', fullWidth: true, className: classes.dayHeader }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'l1', weight: 200 }, { children: (0, date_1.format)(date, 'd') })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
+                    ]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, align: 'center', fullWidth: true, className: classes.dayHeader }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'l1', weight: 200 }, { children: (0, date_1.format)(date, 'd', { l }) })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
                                         classes.weekDay,
                                         date.year === now.year && date.dayYear === now.dayYear && classes.today
-                                    ]) }, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h3', weight: 400, align: 'center' }, { children: (0, date_1.format)(date, 'D') })) }))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ className: classes.dayBody, flex: true, fullWidth: true, onClick: (event) => onTimeClickMethod(date, event) }, { children: [timesUI(date), hours.map((itemGuide, indexGuide) => ((0, jsx_runtime_1.jsx)(Line, { className: classes.guide, fullWidth: true, style: {
+                                    ]) }, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h3', weight: 400, align: 'center' }, { children: (0, date_1.format)(date, 'D', { l }) })) }))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ className: classes.dayBody, flex: true, fullWidth: true, onClick: (event) => onTimeClickMethod(date, event) }, { children: [timesUI(date), hours.map((itemGuide, indexGuide) => ((0, jsx_runtime_1.jsx)(Line, { className: classes.guide, fullWidth: true, style: {
                                         top: `${(100 / 24) * indexGuide}%`
                                     } }, indexGuide))), ((0, date_1.format)(now, utils_2.formats.date) === (0, date_1.format)(date, utils_2.formats.date)) && ((0, jsx_runtime_1.jsx)(Line, { className: classes.guidelineHour, fullWidth: true, style: {
                                         top: `${(((now.hour * 60) + now.minute) / (24 * 60)) * 100}%`
@@ -379,10 +380,10 @@ const CalendarWeek = react_1.default.forwardRef((props_, ref) => {
                     return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'column', align: 'center', flex: true, className: (0, style_react_1.classNames)([
                             'onesy-day',
                             classes.day
-                        ]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, align: 'center', fullWidth: true, className: classes.dayHeader }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'l1', weight: 200 }, { children: (0, date_1.format)(itemDay, 'd') })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
+                        ]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, align: 'center', fullWidth: true, className: classes.dayHeader }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'l1', weight: 200 }, { children: (0, date_1.format)(itemDay, 'd', { l }) })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
                                             classes.weekDay,
                                             itemDay.year === now.year && itemDay.dayYear === now.dayYear && classes.today
-                                        ]) }, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h3', weight: 400, align: 'center' }, { children: (0, date_1.format)(itemDay, 'D') })) }))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ className: classes.dayBody, flex: true, fullWidth: true, onClick: (event) => onTimeClickMethod(itemDay, event) }, { children: [timesUI(itemDay), hours.map((itemGuide, indexGuide) => ((0, jsx_runtime_1.jsx)(Line, { className: classes.guide, fullWidth: true, style: {
+                                        ]) }, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h3', weight: 400, align: 'center' }, { children: (0, date_1.format)(itemDay, 'D', { l }) })) }))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ className: classes.dayBody, flex: true, fullWidth: true, onClick: (event) => onTimeClickMethod(itemDay, event) }, { children: [timesUI(itemDay), hours.map((itemGuide, indexGuide) => ((0, jsx_runtime_1.jsx)(Line, { className: classes.guide, fullWidth: true, style: {
                                             top: `${(100 / 24) * indexGuide}%`
                                         } }, indexGuide))), ((0, date_1.format)(now, utils_2.formats.date) === (0, date_1.format)(itemDay, utils_2.formats.date)) && ((0, jsx_runtime_1.jsx)(Line, { className: classes.guidelineHour, fullWidth: true, style: {
                                             top: `${(((now.hour * 60) + now.minute) / (24 * 60)) * 100}%`

package/DatePicker/DatePicker.js

@@ -176,7 +176,7 @@ const DatePicker = react_1.default.forwardRef((props__, ref) => {
         const [from, to] = (0, utils_1.is)('array', valueNew) ? valueNew : [valueNew];
         if (!(from || to))
             return '';
-        const method = (item) => `${(0, date_1.format)(item, 'DD')}/${(0, date_1.format)(item, 'MM')}/${(0, date_1.format)(item, 'YYYY')}`;
+        const method = (item) => `${(0, date_1.format)(item, 'DD', { l })}/${(0, date_1.format)(item, 'MM', { l })}/${(0, date_1.format)(item, 'YYYY', { l })}`;
         result += `${method(from)}`;
         if (range && to)
             result += `${exports.SEPARATOR}${method(to)}`;
@@ -439,9 +439,9 @@ const DatePicker = react_1.default.forwardRef((props__, ref) => {
         if (!(readOnly || disabled))
             moreProps.onClick = onOpen;
     }
-    let textHeading = `${(0, date_1.format)(value[0], 'd')}, ${(0, date_1.format)(value[0], 'MMM')} ${(0, date_1.format)(value[0], 'DD')}`;
+    let textHeading = `${(0, date_1.format)(value[0], 'd', { l })}, ${(0, date_1.format)(value[0], 'MMM', { l })} ${(0, date_1.format)(value[0], 'DD', { l })}`;
     if (range) {
-        textHeading = `${(0, date_1.format)(value[0], 'MMM')} ${(0, date_1.format)(value[0], 'DD')}${exports.SEPARATOR}${(0, date_1.format)(value[1], 'MMM')} ${(0, date_1.format)(value[1], 'DD')}`;
+        textHeading = `${(0, date_1.format)(value[0], 'MMM', { l })} ${(0, date_1.format)(value[0], 'DD', { l })}${exports.SEPARATOR}${(0, date_1.format)(value[1], 'MMM', { l })} ${(0, date_1.format)(value[1], 'DD', { l })}`;
     }
     const dayNames = [l('Mo'), l('Tu'), l('We'), l('Th'), l('Fr'), l('Sa'), l('Su')];
     const mobile = ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ color: 'default', tonal: tonal, gap: 0, direction: 'column', Component: Line, className: (0, style_react_1.classNames)([

package/Watch/Watch.js

@@ -91,6 +91,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-Watch' });
 const Watch = 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.onesyWatch) === 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 Path = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Path) || Path_1.default; }, [theme]);
@@ -220,7 +221,7 @@ const Watch = react_1.default.forwardRef((props_, ref) => {
                                 ],
                                 RegularProps === null || RegularProps === void 0 ? void 0 : RegularProps.className,
                                 classes.regular
-                            ]) }, { children: [timeVisible && ((0, utils_1.is)('function', renderTime) ? renderTime(value) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'h1' : size === 'regular' ? 'h2' : 'h3' }, { children: (0, date_1.format)(value, timeFormatString) })))), dateVisible && ((0, utils_1.is)('function', renderDate) ? renderDate(value) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3', priority: 'secondary' }, { children: (0, date_1.format)(value, dateFormatString) }))))] }))), version === 'analog' && ((0, jsx_runtime_1.jsxs)(RoundMeter, Object.assign({ tonal: tonal, color: color, size: size, marks: marks.analog, labels: labels.analog, background: true }, AnalogProps, { children: [timeOfDayVisible && ((0, jsx_runtime_1.jsx)("text", Object.assign({ x: 120, y: 74, stroke: 'none', fill: 'currentColor', className: (0, style_react_1.classNames)([
+                            ]) }, { children: [timeVisible && ((0, utils_1.is)('function', renderTime) ? renderTime(value) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'h1' : size === 'regular' ? 'h2' : 'h3' }, { children: (0, date_1.format)(value, timeFormatString, { l }) })))), dateVisible && ((0, utils_1.is)('function', renderDate) ? renderDate(value) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3', priority: 'secondary' }, { children: (0, date_1.format)(value, dateFormatString, { l }) }))))] }))), version === 'analog' && ((0, jsx_runtime_1.jsxs)(RoundMeter, Object.assign({ tonal: tonal, color: color, size: size, marks: marks.analog, labels: labels.analog, background: true }, AnalogProps, { children: [timeOfDayVisible && ((0, jsx_runtime_1.jsx)("text", Object.assign({ x: 120, y: 74, stroke: 'none', fill: 'currentColor', className: (0, style_react_1.classNames)([
                                         (0, utils_2.staticClassName)('Watch', theme) && [
                                             'onesy-Watch-time-of-day'
                                         ],
@@ -276,7 +277,7 @@ const Watch = react_1.default.forwardRef((props_, ref) => {
                                             classes.modernDate
                                         ]), style: {
                                             fontSize: 19
-                                        } }, { children: (0, date_1.format)(value, `d DD`) })) })), (0, jsx_runtime_1.jsx)(Path, { d: `M 120 114 L 170 114 A 1 1 0 0 1 170 126 L 120 126 A 1 1 0 0 1 120 114`, value: (100 / 12) * value.hour, style: {
+                                        } }, { children: (0, date_1.format)(value, `d DD`, { l }) })) })), (0, jsx_runtime_1.jsx)(Path, { d: `M 120 114 L 170 114 A 1 1 0 0 1 170 126 L 120 126 A 1 1 0 0 1 120 114`, value: (100 / 12) * value.hour, style: {
                                         transformOrigin: '50% 50%',
                                         stroke: 'none',
                                         fill: palette[20]

package/esm/Calendar/Calendar.js

@@ -345,7 +345,11 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
             }, /*#__PURE__*/React.createElement(Type, {
               version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
               className: classNames([classes.carousel_item_label])
-            }, format(calendarOnesyDate, 'MMMM'), " ", format(calendarOnesyDate, 'YYYY')), /*#__PURE__*/React.createElement(CalendarMonth, _extends({
+            }, format(calendarOnesyDate, 'MMMM', {
+              l
+            }), " ", format(calendarOnesyDate, 'YYYY', {
+              l
+            })), /*#__PURE__*/React.createElement(CalendarMonth, _extends({
               color: "default",
               value: value,
               calendar: calendarOnesyDate,
@@ -403,7 +407,9 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
             style: {
               paddingInlineStart: '16px'
             }
-          }, l(format(calendarOnesyDate, 'MMMM'))), /*#__PURE__*/React.createElement(CalendarMonth, _extends({
+          }, format(calendarOnesyDate, 'MMMM', {
+            l
+          })), /*#__PURE__*/React.createElement(CalendarMonth, _extends({
             color: "default",
             value: value,
             calendar: calendarOnesyDate,
@@ -531,7 +537,11 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
     })
   }, optionButtonProps, {
     className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps?.className, classes.option])
-  }), format(calendar, 'MMMM'), " ", format(calendar, 'YYYY')), /*#__PURE__*/React.createElement(Line, {
+  }), format(calendar, 'MMMM', {
+    l
+  }), " ", format(calendar, 'YYYY', {
+    l
+  })), /*#__PURE__*/React.createElement(Line, {
     gap: 0,
     direction: "row",
     align: "center"
@@ -576,7 +586,9 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
     return /*#__PURE__*/React.createElement(ListItem, {
       key: index,
       onClick: () => onUpdateCalendarOption(onesyDate),
-      primary: l(format(onesyDate, 'MMMM')),
+      primary: format(onesyDate, 'MMMM', {
+        l
+      }),
       inset: !selected,
       startAlign: "center",
       size: size,

package/esm/CalendarAvailability/CalendarAvailability.js

@@ -363,14 +363,18 @@ const CalendarAvailability = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }, /*#__PURE__*/React.createElement(Type, {
         version: "h3",
         weight: 400
-      }, format(itemDay, 'dd')), /*#__PURE__*/React.createElement(Line, {
+      }, format(itemDay, 'dd', {
+        l
+      })), /*#__PURE__*/React.createElement(Line, {
         align: "center",
         justify: "center",
         className: classNames([classes.weekDay, itemDay.year === now.year && itemDay.dayYear === now.dayYear && classes.today])
       }, /*#__PURE__*/React.createElement(Type, {
         version: "b2",
         weight: 200
-      }, format(itemDay, 'DD.MM.')))), /*#__PURE__*/React.createElement(Line, {
+      }, format(itemDay, 'DD.MM.', {
+        l
+      })))), /*#__PURE__*/React.createElement(Line, {
         gap: 2,
         fullWidth: true
       }, !!values.length ? values.map((itemValue, indexItem) => {
@@ -392,7 +396,11 @@ const CalendarAvailability = /*#__PURE__*/React.forwardRef((props_, ref) => {
         }), /*#__PURE__*/React.createElement(Type, {
           version: "b2",
           weight: 300
-        }, format(itemValueFrom, 'hh:mm a'), " \u2014 ", format(itemValueTo, 'hh:mm a'))), itemValue.description && /*#__PURE__*/React.createElement(Type, {
+        }, format(itemValueFrom, 'hh:mm a', {
+          l
+        }), " \u2014 ", format(itemValueTo, 'hh:mm a', {
+          l
+        }))), itemValue.description && /*#__PURE__*/React.createElement(Type, {
           version: "b2",
           weight: 200,
           whiteSpace: "pre-wrap",
@@ -436,9 +444,15 @@ const CalendarAvailability = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }, /*#__PURE__*/React.createElement(Type, {
         version: "b2",
         weight: 400
-      }, format(day, 'dd')), /*#__PURE__*/React.createElement(Type, {
+      }, format(day, 'dd', {
+        l
+      })), /*#__PURE__*/React.createElement(Type, {
         version: "b2"
-      }, format(itemValueFrom, formats.entire), " \u2014 ", format(itemValueTo, formats.entire)))), itemValue.description && /*#__PURE__*/React.createElement(Type, {
+      }, format(itemValueFrom, formats.entire, {
+        l
+      }), " \u2014 ", format(itemValueTo, formats.entire, {
+        l
+      })))), itemValue.description && /*#__PURE__*/React.createElement(Type, {
         version: "b2",
         weight: 200,
         whiteSpace: "pre-wrap",
@@ -450,8 +464,14 @@ const CalendarAvailability = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }));
   };
   const formattedDate = React.useMemo(() => {
-    if (view === 'day') return format(date, `MMMM DD, YYYY`);
-    if (['week', 'simple'].includes(view)) return `${format(startOf(date, 'week'), `MMM DD, YYYY`)} – ${format(endOf(date, 'week'), `MMM DD, YYYY`)}`;
+    if (view === 'day') return format(date, `MMMM DD, YYYY`, {
+      l
+    });
+    if (['week', 'simple'].includes(view)) return `${format(startOf(date, 'week'), `MMM DD, YYYY`, {
+      l
+    })} – ${format(endOf(date, 'week'), `MMM DD, YYYY`, {
+      l
+    })}`;
   }, [view, date]);
   const legend = React.useMemo(() => {
     return /*#__PURE__*/React.createElement(Line, {
@@ -639,7 +659,13 @@ const CalendarAvailability = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, /*#__PURE__*/React.createElement(Type, {
     version: "l1",
     weight: 200
-  }, format(modal?.day, 'dd'), " ", format(new OnesyDate(modal?.from), modal?.weekly ? `hh:mm a` : formats.entire), " \u2014 ", format(new OnesyDate(modal?.to), modal?.weekly ? `hh:mm a` : formats.entire)), modal?.description && /*#__PURE__*/React.createElement(Type, {
+  }, format(modal?.day, 'dd', {
+    l
+  }), " ", format(new OnesyDate(modal?.from), modal?.weekly ? `hh:mm a` : formats.entire, {
+    l
+  }), " \u2014 ", format(new OnesyDate(modal?.to), modal?.weekly ? `hh:mm a` : formats.entire, {
+    l
+  })), modal?.description && /*#__PURE__*/React.createElement(Type, {
     version: "b2",
     dangerouslySetInnerHTML: {
       __html: textToInnerHTML(modal.description)

package/esm/CalendarMenu/CalendarMenu.js

@@ -327,7 +327,9 @@ const CalendarMenu = /*#__PURE__*/React.forwardRef((props_, ref) => {
         primary: /*#__PURE__*/React.createElement(Type, {
           version: "b2",
           color: "inherit"
-        }, format(date, 'HH:mm')),
+        }, format(date, 'HH:mm', {
+          l
+        })),
         startAlign: "center",
         size: "small",
         button: true,
@@ -365,7 +367,9 @@ const CalendarMenu = /*#__PURE__*/React.forwardRef((props_, ref) => {
               version: 'b3',
               priority: !day.selected ? !day.weekend ? 'primary' : 'secondary' : undefined
             },
-            "aria-label": format(dayOnesyDate, 'DD-MM-YYYY'),
+            "aria-label": format(dayOnesyDate, 'DD-MM-YYYY', {
+              l
+            }),
             className: classNames([classes.dayValue, repeating && classes.dayValueRepeating]),
             style: _objectSpread(_objectSpread({}, day.today ? {
               boxShadow: `inset 0px 0px 0px 1px ${palette[40]}`

package/esm/CalendarMonth/CalendarMonth.js

@@ -471,7 +471,9 @@ const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
             version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
             priority: !day.selected ? !day.weekend ? 'primary' : 'secondary' : undefined
           },
-          "aria-label": format(day.onesyDate, 'DD-MM-YYYY')
+          "aria-label": format(day.onesyDate, 'DD-MM-YYYY', {
+            l
+          })
         }, PaginationItemProps, {
           className: classNames([staticClassName('CalendarMonth', theme) && ['onesy-CalendarMonth-day-value', day.in && 'onesy-CalendarMonth-day-in', day.dayWeek && 'onesy-CalendarMonth-day-day-week', day.weekend && 'onesy-CalendarMonth-day-weekend', day.today && 'onesy-CalendarMonth-day-today', day.between && 'onesy-CalendarMonth-day-between', day.selected && 'onesy-CalendarMonth-day-selected', day.start && 'onesy-CalendarMonth-day-start', day.end && 'onesy-CalendarMonth-day-end'], PaginationItemProps?.className, classes.dayValue]),
           style: _objectSpread(_objectSpread(_objectSpread({}, day.today ? {

package/esm/CalendarViews/CalendarViews.js

@@ -185,9 +185,17 @@ const CalendarViews = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }));
   }, [viewsProps]);
   const formattedDate = React.useMemo(() => {
-    if (view === 'day') return format(date, `MMMM DD, YYYY`);
-    if (view === 'week') return `${format(startOf(date, 'week'), `MMM DD, YYYY`)} – ${format(endOf(date, 'week'), `MMM DD, YYYY`)}`;
-    if (view === 'month') return format(date, `MMMM YYYY`);
+    if (view === 'day') return format(date, `MMMM DD, YYYY`, {
+      l
+    });
+    if (view === 'week') return `${format(startOf(date, 'week'), `MMM DD, YYYY`, {
+      l
+    })} – ${format(endOf(date, 'week'), `MMM DD, YYYY`, {
+      l
+    })}`;
+    if (view === 'month') return format(date, `MMMM YYYY`, {
+      l
+    });
   }, [view, date]);
   const onChangeView = React.useCallback(valueNew => {
     setView(valueNew);
@@ -230,7 +238,9 @@ const CalendarViews = /*#__PURE__*/React.forwardRef((props_, ref) => {
       className: classNames([classes.monthDay, day.today && classes.today])
     }, /*#__PURE__*/React.createElement(Type, {
       version: "b2"
-    }, format(valueCalendarMonth, 'D'))), /*#__PURE__*/React.createElement(Line, {
+    }, format(valueCalendarMonth, 'D', {
+      l
+    }))), /*#__PURE__*/React.createElement(Line, {
       gap: 0.5,
       flex: true,
       fullWidth: true,

package/esm/CalendarWeek/CalendarWeek.js

@@ -126,6 +126,7 @@ const useStyle = styleMethod(theme => ({
 });
 const CalendarWeek = /*#__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?.onesyCalendarWeek?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
@@ -317,7 +318,11 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
         style: {
           background: getColor(item)
         }
-      }, format(from, 'hh:mm a'), " - ", renderTo(format(to, 'hh:mm a'))), item.description && /*#__PURE__*/React.createElement(Type, {
+      }, format(from, 'hh:mm a', {
+        l
+      }), " - ", renderTo(format(to, 'hh:mm a', {
+        l
+      }))), item.description && /*#__PURE__*/React.createElement(Type, {
         version: "b2",
         dangerouslySetInnerHTML: {
           __html: textToInnerHTML(item.description)
@@ -398,7 +403,9 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, /*#__PURE__*/React.createElement(Type, {
     version: "b3",
     whiteSpace: "nowrap"
-  }, format(itemHour, 'h A')))))), dayProp && /*#__PURE__*/React.createElement(Line, {
+  }, format(itemHour, 'h A', {
+    l
+  })))))), dayProp && /*#__PURE__*/React.createElement(Line, {
     gap: 0,
     direction: "column",
     align: "center",
@@ -412,7 +419,9 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, /*#__PURE__*/React.createElement(Type, {
     version: "l1",
     weight: 200
-  }, format(date, 'd')), /*#__PURE__*/React.createElement(Line, {
+  }, format(date, 'd', {
+    l
+  })), /*#__PURE__*/React.createElement(Line, {
     align: "center",
     justify: "center",
     className: classNames([classes.weekDay, date.year === now.year && date.dayYear === now.dayYear && classes.today])
@@ -420,7 +429,9 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
     version: "h3",
     weight: 400,
     align: "center"
-  }, format(date, 'D')))), /*#__PURE__*/React.createElement(Line, {
+  }, format(date, 'D', {
+    l
+  })))), /*#__PURE__*/React.createElement(Line, {
     className: classes.dayBody,
     flex: true,
     fullWidth: true,
@@ -454,7 +465,9 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }, /*#__PURE__*/React.createElement(Type, {
       version: "l1",
       weight: 200
-    }, format(itemDay, 'd')), /*#__PURE__*/React.createElement(Line, {
+    }, format(itemDay, 'd', {
+      l
+    })), /*#__PURE__*/React.createElement(Line, {
       align: "center",
       justify: "center",
       className: classNames([classes.weekDay, itemDay.year === now.year && itemDay.dayYear === now.dayYear && classes.today])
@@ -462,7 +475,9 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
       version: "h3",
       weight: 400,
       align: "center"
-    }, format(itemDay, 'D')))), /*#__PURE__*/React.createElement(Line, {
+    }, format(itemDay, 'D', {
+      l
+    })))), /*#__PURE__*/React.createElement(Line, {
       className: classes.dayBody,
       flex: true,
       fullWidth: true,

package/esm/DatePicker/DatePicker.js

@@ -235,7 +235,13 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     let result = '';
     const [from, to] = is('array', valueNew) ? valueNew : [valueNew];
     if (!(from || to)) return '';
-    const method = item => `${format(item, 'DD')}/${format(item, 'MM')}/${format(item, 'YYYY')}`;
+    const method = item => `${format(item, 'DD', {
+      l
+    })}/${format(item, 'MM', {
+      l
+    })}/${format(item, 'YYYY', {
+      l
+    })}`;
     result += `${method(from)}`;
     if (range && to) result += `${SEPARATOR}${method(to)}`;
     return result;
@@ -542,9 +548,23 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
   if (version === 'mobile') {
     if (!(readOnly || disabled)) moreProps.onClick = onOpen;
   }
-  let textHeading = `${format(value[0], 'd')}, ${format(value[0], 'MMM')} ${format(value[0], 'DD')}`;
+  let textHeading = `${format(value[0], 'd', {
+    l
+  })}, ${format(value[0], 'MMM', {
+    l
+  })} ${format(value[0], 'DD', {
+    l
+  })}`;
   if (range) {
-    textHeading = `${format(value[0], 'MMM')} ${format(value[0], 'DD')}${SEPARATOR}${format(value[1], 'MMM')} ${format(value[1], 'DD')}`;
+    textHeading = `${format(value[0], 'MMM', {
+      l
+    })} ${format(value[0], 'DD', {
+      l
+    })}${SEPARATOR}${format(value[1], 'MMM', {
+      l
+    })} ${format(value[1], 'DD', {
+      l
+    })}`;
   }
   const dayNames = [l('Mo'), l('Tu'), l('We'), l('Th'), l('Fr'), l('Sa'), l('Su')];
   const mobile = /*#__PURE__*/React.createElement(Surface, _extends({

package/esm/Watch/Watch.js

@@ -86,6 +86,7 @@ const useStyle = styleMethod(theme => ({
 });
 const Watch = /*#__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?.onesyWatch?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Path = React.useMemo(() => theme?.elements?.Path || PathElement, [theme]);
@@ -242,10 +243,14 @@ const Watch = /*#__PURE__*/React.forwardRef((props_, ref) => {
       className: classNames([staticClassName('Watch', theme) && ['onesy-Watch-regular'], RegularProps?.className, classes.regular])
     }), timeVisible && (is('function', renderTime) ? renderTime(value) : /*#__PURE__*/React.createElement(Type, {
       version: size === 'large' ? 'h1' : size === 'regular' ? 'h2' : 'h3'
-    }, format(value, timeFormatString))), dateVisible && (is('function', renderDate) ? renderDate(value) : /*#__PURE__*/React.createElement(Type, {
+    }, format(value, timeFormatString, {
+      l
+    }))), dateVisible && (is('function', renderDate) ? renderDate(value) : /*#__PURE__*/React.createElement(Type, {
       version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
       priority: "secondary"
-    }, format(value, dateFormatString)))), version === 'analog' && /*#__PURE__*/React.createElement(RoundMeter, _extends({
+    }, format(value, dateFormatString, {
+      l
+    })))), version === 'analog' && /*#__PURE__*/React.createElement(RoundMeter, _extends({
       tonal: tonal,
       color: color,
       size: size,
@@ -377,7 +382,9 @@ const Watch = /*#__PURE__*/React.forwardRef((props_, ref) => {
       style: {
         fontSize: 19
       }
-    }, format(value, `d DD`))), /*#__PURE__*/React.createElement(Path, {
+    }, format(value, `d DD`, {
+      l
+    }))), /*#__PURE__*/React.createElement(Path, {
       d: `M 120 114 L 170 114 A 1 1 0 0 1 170 126 L 120 126 A 1 1 0 0 1 120 114`,
       value: 100 / 12 * value.hour,
       style: {

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.73
+/** @license UiReact v1.0.75
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/esm/useForm/useForm.js

@@ -3,8 +3,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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, copy, is, setObjectValue } from '@onesy/utils';
+import { useOnesyTheme } from '@onesy/style-react';
 import validateModel from './validate';
-import { useOnesyTheme } from 'packages/style-react/build';
 const useForm = props => {
   const {
     values: values_ = {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.73",
+  "version": "1.0.75",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar <lazareric2@gmail.com>",
@@ -36,9 +36,9 @@
     "react-router-dom": "^6.15.0"
   },
   "dependencies": {
-    "@onesy/date": "^1.0.0",
+    "@onesy/date": "^1.0.2",
     "@onesy/errors": "^1.0.0",
-    "@onesy/icons-material-rounded-react": "^1.0.4",
+    "@onesy/icons-material-rounded-react": "1.0.4",
     "@onesy/log": "^1.0.0",
     "@onesy/models": "^1.0.0",
     "@onesy/subscription": "^1.0.0",

package/useForm/useForm.js

@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
 const validate_1 = __importDefault(require("./validate"));
-const build_1 = require("packages/style-react/build");
 const useForm = (props) => {
     const { values: values_ = {}, validate: validate_, rerenderOnUpdate = true, autoValidate, valueDefault, validDefault } = props;
-    const theme = (0, build_1.useOnesyTheme)();
+    const theme = (0, style_react_1.useOnesyTheme)();
     const l = theme.l;
     const [form, setForm] = react_1.default.useState({
         value: valueDefault !== undefined ? valueDefault : {},