@onesy/ui-react 1.0.58 → 1.0.60

package/CalendarViews/CalendarViews.js

@@ -114,6 +114,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-CalendarViews' });
 const CalendarViews = 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.onesyCalendarViews) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const CalendarMonth = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.CalendarMonth) || CalendarMonth_1.default; }, [theme]);
     const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
@@ -123,7 +124,11 @@ const CalendarViews = 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 { viewDefault, dateDefault, times: timesProps, events, views: viewsProps = ['month', 'week', 'day'], render, onTimeClick, onChangeView: onChangeViewProps, onChangeDate: onChangeDateProps, startHeader, endHeader, startLeft, endLeft, startRight, endRight, noViews, IconPrevious = IconMaterialArrowBackIosNewW100_1.default, IconNext = IconMaterialArrowForwardIosW100_1.default, WeekProps, DayProps, CalendarMonthProps, className } = props, other = __rest(props, ["viewDefault", "dateDefault", "times", "events", "views", "render", "onTimeClick", "onChangeView", "onChangeDate", "startHeader", "endHeader", "startLeft", "endLeft", "startRight", "endRight", "noViews", "IconPrevious", "IconNext", "WeekProps", "DayProps", "CalendarMonthProps", "className"]);
+    const { viewDefault, dateDefault, times: timesProps, events, views: viewsProps = [
+        { name: l('Month'), value: 'month' },
+        { name: l('Week'), value: 'week' },
+        { name: l('Day'), value: 'day' }
+    ], render, onTimeClick, onChangeView: onChangeViewProps, onChangeDate: onChangeDateProps, startHeader, endHeader, startLeft, endLeft, startRight, endRight, noViews, IconPrevious = IconMaterialArrowBackIosNewW100_1.default, IconNext = IconMaterialArrowForwardIosW100_1.default, WeekProps, DayProps, CalendarMonthProps, className } = props, other = __rest(props, ["viewDefault", "dateDefault", "times", "events", "views", "render", "onTimeClick", "onChangeView", "onChangeDate", "startHeader", "endHeader", "startLeft", "endLeft", "startRight", "endRight", "noViews", "IconPrevious", "IconNext", "WeekProps", "DayProps", "CalendarMonthProps", "className"]);
     const { classes } = useStyle(props);
     const [now, setNow] = react_1.default.useState(new date_1.OnesyDate());
     const [date, setDate] = react_1.default.useState(dateDefault || new date_1.OnesyDate());
@@ -155,8 +160,8 @@ const CalendarViews = react_1.default.forwardRef((props_, ref) => {
     }, [events, timesProps]);
     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: item === null || item === void 0 ? void 0 : item.name,
+            value: item === null || item === void 0 ? void 0 : item.value
         }));
     }, [viewsProps]);
     const formattedDate = react_1.default.useMemo(() => {
@@ -204,13 +209,13 @@ const CalendarViews = react_1.default.forwardRef((props_, ref) => {
     }, [render, view]);
     const renderDayName = react_1.default.useCallback((order) => {
         const values = {
-            1: 'Mon',
-            2: 'Tue',
-            3: 'Wed',
-            4: 'Thu',
-            5: 'Fri',
-            6: 'Sat',
-            7: 'Sun'
+            1: l('Mo'),
+            2: l('Tu'),
+            3: l('We'),
+            4: l('Th'),
+            5: l('Fr'),
+            6: l('Sa'),
+            7: l('Su')
         };
         return values[order];
     }, []);
@@ -241,10 +246,10 @@ const CalendarViews = react_1.default.forwardRef((props_, ref) => {
                     (0, utils_2.staticClassName)('CalendarViews', theme) && [
                         'onesy-CalendarViews-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, Object.assign({}, iconProps)) })) })), (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, Object.assign({}, iconProps)) })) }))] })), (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, Object.assign({}, iconProps)) })) })), (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, Object.assign({}, iconProps)) })) }))] })), (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, !noViews && ((0, jsx_runtime_1.jsx)(Select, { name: 'View', value: view, onChange: onChangeView, options: viewOptions, size: 'small', MenuProps: {
+                                ]) }, { children: [startRight, !noViews && ((0, jsx_runtime_1.jsx)(Select, { name: l('View'), value: view, onChange: onChangeView, options: viewOptions, size: 'small', MenuProps: {
                                             portal: true,
                                             size: 'regular'
                                         }, WrapperProps: {

package/Chart/Chart.js

@@ -275,6 +275,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 const Chart = 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.onesyChart) === 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]);

package/ColorTextField/ColorTextField.js

@@ -78,6 +78,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-ColorTextField' });
 const ColorTextField = 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.onesyColorTextField) === 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 TextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.TextField) || TextField_1.default; }, [theme]);
@@ -172,7 +173,7 @@ const ColorTextField = react_1.default.forwardRef((props_, ref) => {
         return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: ref, gap: 1, fullWidth: true, className: (0, style_react_1.classNames)([
                 className,
                 classes.root
-            ]) }, other, { children: [root, (0, jsx_runtime_1.jsx)(SliderInput, { name: 'Opacity', value: valueOpacity, onChange: onChangeOpacity, min: 0, max: 100 })] })));
+            ]) }, other, { children: [root, (0, jsx_runtime_1.jsx)(SliderInput, { name: l('Opacity'), value: valueOpacity, onChange: onChangeOpacity, min: 0, max: 100 })] })));
     }
     return root;
 });

package/Confirm/Confirm.js

@@ -49,6 +49,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 const Confirm = 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.onesyConfirm) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const ModalHeader = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ModalHeader) || ModalHeader_1.default; }, [theme]);
     const ModalFooter = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ModalFooter) || ModalFooter_1.default; }, [theme]);
@@ -81,8 +82,8 @@ const Confirm = react_1.default.forwardRef((props_, ref) => {
                 (0, utils_1.setObjectValue)(refs.modal.current, 'buttons.negative.text', '');
             if (((_d = (_c = refs.modal.current.buttons) === null || _c === void 0 ? void 0 : _c.positive) === null || _d === void 0 ? void 0 : _d.text) === undefined)
                 (0, utils_1.setObjectValue)(refs.modal.current, 'buttons.positive.text', '');
-            refs.modal.current.buttons.negative.text = ((_f = (_e = value === null || value === void 0 ? void 0 : value.buttons) === null || _e === void 0 ? void 0 : _e.negative) === null || _f === void 0 ? void 0 : _f.text) !== undefined ? (_h = (_g = value === null || value === void 0 ? void 0 : value.buttons) === null || _g === void 0 ? void 0 : _g.negative) === null || _h === void 0 ? void 0 : _h.text : 'Cancel';
-            refs.modal.current.buttons.positive.text = ((_k = (_j = value === null || value === void 0 ? void 0 : value.buttons) === null || _j === void 0 ? void 0 : _j.positive) === null || _k === void 0 ? void 0 : _k.text) !== undefined ? (_m = (_l = value === null || value === void 0 ? void 0 : value.buttons) === null || _l === void 0 ? void 0 : _l.positive) === null || _m === void 0 ? void 0 : _m.text : 'Confirm';
+            refs.modal.current.buttons.negative.text = ((_f = (_e = value === null || value === void 0 ? void 0 : value.buttons) === null || _e === void 0 ? void 0 : _e.negative) === null || _f === void 0 ? void 0 : _f.text) !== undefined ? (_h = (_g = value === null || value === void 0 ? void 0 : value.buttons) === null || _g === void 0 ? void 0 : _g.negative) === null || _h === void 0 ? void 0 : _h.text : l('Cancel');
+            refs.modal.current.buttons.positive.text = ((_k = (_j = value === null || value === void 0 ? void 0 : value.buttons) === null || _j === void 0 ? void 0 : _j.positive) === null || _k === void 0 ? void 0 : _k.text) !== undefined ? (_m = (_l = value === null || value === void 0 ? void 0 : value.buttons) === null || _l === void 0 ? void 0 : _l.positive) === null || _m === void 0 ? void 0 : _m.text : l('Confirm');
             refs.modal.current.throwError = (value === null || value === void 0 ? void 0 : value.throwError) !== undefined ? value.throwError : refs.props.current.throwError;
             const promise = new Promise((resolve, reject) => {
                 refs.promise.resolve.current = resolve;
@@ -127,7 +128,7 @@ const Confirm = react_1.default.forwardRef((props_, ref) => {
                     classes.root
                 ]) }, other, otherModal, { children: (0, utils_1.is)('function', modal) ?
                     modal({ resolve: refs.promise.resolve.current, reject: refs.promise.reject.current }) :
-                    ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [name !== false && ((0, jsx_runtime_1.jsx)(ModalHeader, { children: (0, jsx_runtime_1.jsx)(ModalTitle, Object.assign({ version: 't1', weight: 500 }, { children: name || 'Confirmation' })) })), (0, jsx_runtime_1.jsx)(ModalMain, { children: (0, jsx_runtime_1.jsx)(ModalText, Object.assign({ version: 'b1', weight: 200 }, { children: description !== undefined ? description : 'Are you sure you want to proceed?' })) }), (0, jsx_runtime_1.jsxs)(ModalFooter, { children: [(0, jsx_runtime_1.jsx)(Button, Object.assign({ version: 'text', color: 'inherit', tonal: true, onClick: () => close(false) }, ButtonNegativeProps, { children: ((_a = buttons === null || buttons === void 0 ? void 0 : buttons.negative) === null || _a === void 0 ? void 0 : _a.text) !== undefined ? (_b = buttons === null || buttons === void 0 ? void 0 : buttons.negative) === null || _b === void 0 ? void 0 : _b.text : 'Cancel' })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ version: 'text', color: 'inherit', tonal: true, onClick: () => close(true) }, ButtonPositiveProps, { children: ((_c = buttons === null || buttons === void 0 ? void 0 : buttons.positive) === null || _c === void 0 ? void 0 : _c.text) !== undefined ? (_d = buttons === null || buttons === void 0 ? void 0 : buttons.positive) === null || _d === void 0 ? void 0 : _d.text : 'Confirm' }))] })] })) }))] })));
+                    ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [name !== false && ((0, jsx_runtime_1.jsx)(ModalHeader, { children: (0, jsx_runtime_1.jsx)(ModalTitle, Object.assign({ version: 't1', weight: 500 }, { children: name || l('Confirmation') })) })), (0, jsx_runtime_1.jsx)(ModalMain, { children: (0, jsx_runtime_1.jsx)(ModalText, Object.assign({ version: 'b1', weight: 200 }, { children: description !== undefined ? description : l('Are you sure you want to proceed?') })) }), (0, jsx_runtime_1.jsxs)(ModalFooter, { children: [(0, jsx_runtime_1.jsx)(Button, Object.assign({ version: 'text', color: 'inherit', tonal: true, onClick: () => close(false) }, ButtonNegativeProps, { children: ((_a = buttons === null || buttons === void 0 ? void 0 : buttons.negative) === null || _a === void 0 ? void 0 : _a.text) !== undefined ? (_b = buttons === null || buttons === void 0 ? void 0 : buttons.negative) === null || _b === void 0 ? void 0 : _b.text : l('Cancel') })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ version: 'text', color: 'inherit', tonal: true, onClick: () => close(true) }, ButtonPositiveProps, { children: ((_c = buttons === null || buttons === void 0 ? void 0 : buttons.positive) === null || _c === void 0 ? void 0 : _c.text) !== undefined ? (_d = buttons === null || buttons === void 0 ? void 0 : buttons.positive) === null || _d === void 0 ? void 0 : _d.text : l('Confirm') }))] })] })) }))] })));
 });
 Confirm.displayName = 'onesy-Confirm';
 exports.default = Confirm;

package/CookieBanner/CookieBanner.js

@@ -47,6 +47,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-CookieBanner' });
 const CookieBanner = 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.onesyBanner) === 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 Slide = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Slide) || Slide_1.default; }, [theme]);
@@ -58,7 +59,7 @@ const CookieBanner = react_1.default.forwardRef((props_, ref) => {
     const TransitionElement = noTransition ? react_1.default.Fragment : TransitionElementProps;
     const WrapperProps = noTransition ? undefined : Object.assign(Object.assign({}, TransitionProps), { in: inProp });
     const buttonProps = Object.assign({ size }, ButtonProps);
-    return ((0, jsx_runtime_1.jsx)(TransitionElement, Object.assign({}, WrapperProps, { children: (0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: ref, gap: 1.5, align: 'center', fullWidth: true, Component: Surface, color: 'default', role: 'region', "aria-label": 'Cookie Banner', className: (0, style_react_1.classNames)([
+    return ((0, jsx_runtime_1.jsx)(TransitionElement, Object.assign({}, WrapperProps, { children: (0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: ref, gap: 1.5, align: 'center', fullWidth: true, Component: Surface, color: 'default', role: 'region', "aria-label": l('Cookie Banner'), className: (0, style_react_1.classNames)([
                 (0, utils_2.staticClassName)('CookieBanner', theme) && [
                     'onesy-CookieBanner-root',
                     `onesy-CookieBanner-size-${size}`
@@ -72,7 +73,7 @@ const CookieBanner = react_1.default.forwardRef((props_, ref) => {
                     ],
                     MainProps === null || MainProps === void 0 ? void 0 : MainProps.className,
                     classes.main
-                ]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.25 }, { children: [(0, utils_1.is)('string', name) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 't1' : size === 'regular' ? 't2' : 't3', weight: 500 }, NameProps, { children: name }))) : name, (0, utils_1.is)('string', description) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3' }, DescriptionProps, { children: description }))) : description] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [startActions, (0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onReject, color: 'default' }, buttonProps, RejectButtonProps, { children: "Reject All" })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onAllow, color: 'primary', version: 'filled' }, buttonProps, AllowButtonProps, { children: "Accept All" })), endActions] }))] })) })) })));
+                ]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.25 }, { children: [(0, utils_1.is)('string', name) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 't1' : size === 'regular' ? 't2' : 't3', weight: 500 }, NameProps, { children: name }))) : name, (0, utils_1.is)('string', description) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3' }, DescriptionProps, { children: description }))) : description] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [startActions, (0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onReject, color: 'default' }, buttonProps, RejectButtonProps, { children: l('Reject All') })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onAllow, color: 'primary', version: 'filled' }, buttonProps, AllowButtonProps, { children: l('Accept All') })), endActions] }))] })) })) })));
 });
 CookieBanner.displayName = 'onesy-CookieBanner';
 exports.default = CookieBanner;

package/Countdown/Countdown.js

@@ -94,6 +94,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-Countdown' });
 const Countdown = 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.onesyCountdown) === 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]);
@@ -215,19 +216,19 @@ const Countdown = react_1.default.forwardRef((props_, ref) => {
         ]) }, other, { children: [icon && ((0, jsx_runtime_1.jsx)(Icon_, Object.assign({ size: 'medium' }, IconProps, { style: Object.assign({ marginBottom: 4 }, IconProps === null || IconProps === void 0 ? void 0 : IconProps.style) }))), status === 'initial' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'flex-end', style: {
                         marginTop: 12,
                         marginBottom: -8
-                    } }, { children: [(0, jsx_runtime_1.jsx)(NumericTextField, Object.assign({ label: 'Hours', min: 0, max: 23, value: values.hours, onChange: valueNew => updateValues('hours', !valueNew ? 0 : valueNew) }, NumericTextFieldProps, { className: (0, style_react_1.classNames)([
+                    } }, { children: [(0, jsx_runtime_1.jsx)(NumericTextField, Object.assign({ name: l('Hours'), min: 0, max: 23, value: values.hours, onChange: valueNew => updateValues('hours', !valueNew ? 0 : valueNew) }, NumericTextFieldProps, { className: (0, style_react_1.classNames)([
                                 (0, utils_2.staticClassName)('Countdown', theme) && [
                                     'onesy-Countdown-numeric-text-field'
                                 ],
                                 NumericTextFieldProps === null || NumericTextFieldProps === void 0 ? void 0 : NumericTextFieldProps.className,
                                 classes.numericTextField
-                            ]) })), (0, jsx_runtime_1.jsx)(NumericTextField, Object.assign({ label: 'Minutes', min: 0, max: 59, value: values.minutes, onChange: valueNew => updateValues('minutes', !valueNew ? 0 : valueNew) }, NumericTextFieldProps, { className: (0, style_react_1.classNames)([
+                            ]) })), (0, jsx_runtime_1.jsx)(NumericTextField, Object.assign({ name: l('Minutes'), min: 0, max: 59, value: values.minutes, onChange: valueNew => updateValues('minutes', !valueNew ? 0 : valueNew) }, NumericTextFieldProps, { className: (0, style_react_1.classNames)([
                                 (0, utils_2.staticClassName)('Countdown', theme) && [
                                     'onesy-Countdown-numeric-text-field'
                                 ],
                                 NumericTextFieldProps === null || NumericTextFieldProps === void 0 ? void 0 : NumericTextFieldProps.className,
                                 classes.numericTextField
-                            ]) })), (0, jsx_runtime_1.jsx)(NumericTextField, Object.assign({ label: 'Seconds', min: 0, max: 59, value: values.seconds, onChange: valueNew => updateValues('seconds', !valueNew ? 0 : valueNew) }, NumericTextFieldProps, { className: (0, style_react_1.classNames)([
+                            ]) })), (0, jsx_runtime_1.jsx)(NumericTextField, Object.assign({ name: l('Seconds'), min: 0, max: 59, value: values.seconds, onChange: valueNew => updateValues('seconds', !valueNew ? 0 : valueNew) }, NumericTextFieldProps, { className: (0, style_react_1.classNames)([
                                 (0, utils_2.staticClassName)('Countdown', theme) && [
                                     'onesy-Countdown-numeric-text-field'
                                 ],
@@ -259,7 +260,7 @@ const Countdown = react_1.default.forwardRef((props_, ref) => {
                                     'onesy-Countdown-meta'
                                 ],
                                 classes.meta
-                            ]) }, { children: ["Total ", (0, date_1.duration)(refs.total.current, false)] }))] })) }))), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center' }, { children: [status === 'initial' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Start' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStart, disabled: !((values.hours || 0) + (values.minutes || 0) + (values.seconds || 0)) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStart, {}) })) })) }) }))), 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: 'Stop' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStop }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStop, {}) })) })), (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, {}) })) }))] }) }))), 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: 'Stop' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStop }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStop, {}) })) })), (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, {}) })) }))] }) })))] }))] })));
+                            ]) }, { children: [l('Total'), " ", (0, date_1.duration)(refs.total.current, false)] }))] })) }))), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center' }, { children: [status === 'initial' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Start') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStart, disabled: !((values.hours || 0) + (values.minutes || 0) + (values.seconds || 0)) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStart, {}) })) })) }) }))), 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('Stop') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStop }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStop, {}) })) })), (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, {}) })) }))] }) }))), 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('Stop') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStop }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStop, {}) })) })), (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, {}) })) }))] }) })))] }))] })));
 });
 Countdown.displayName = 'onesy-Countdown';
 exports.default = Countdown;

package/DatePicker/DatePicker.js

@@ -127,6 +127,7 @@ exports.SEPARATOR_SYMBOL = `–`;
 exports.SEPARATOR = ` ${exports.SEPARATOR_SYMBOL} `;
 const DatePicker = 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.onesyDatePicker) === 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 IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
@@ -140,7 +141,7 @@ const DatePicker = react_1.default.forwardRef((props__, ref) => {
     const Divider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Divider) || Divider_1.default; }, [theme]);
     const Slide = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Slide) || Slide_1.default; }, [theme]);
     const ClickListener = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ClickListener) || ClickListener_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', version: version_ = 'auto', size = 'regular', value: value_, valueDefault, onChange, calendar: calendar_, calendarDefault, onChangeCalendar, range, now, static: static_, openMobile = 'select', placeholder: placeholder_, calendars = props.range ? 2 : 1, min, max, validate, name, nameFrom, nameTo, label: label_, labelFrom: labelFrom_ = `Date from`, labelTo: labelTo_ = `Date to`, modeModalSubHeadingText = 'Select date', modeModalSubHeadingTextRange = `Date from${exports.SEPARATOR}Date to`, selectModeHeadingText = 'Select date', inputModeHeadingText = 'Enter date', useHelperText: useHelperText_, weekStartDay = 'Monday', switch: switch__, fullScreen, today, clear = true, heading: heading_ = true, actions: actions_ = true, fullWidth, readOnly, disabled, valid: valid_, onClick: onClick_, onClose: onClose_, onToday: onToday_, onClear: onClear_, onCancel: onCancel_, onOk: onOk_, Icon: Icon_ = IconMaterialCalendarTodayW100Filled_1.default, IconEnter = IconMaterialEditW100_1.default, IconClose = IconMaterialCloseW100_1.default, WrapperProps, CalendarProps, CalendarPropsDesktop, CalendarPropsMobile, IconButtonProps, AdvancedTextFieldProps, TooltipProps, ButtonProps, ModalProps, IconProps, MobileSurfaceProps, className } = props, other = __rest(props, ["tonal", "color", "version", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "range", "now", "static", "openMobile", "placeholder", "calendars", "min", "max", "validate", "name", "nameFrom", "nameTo", "label", "labelFrom", "labelTo", "modeModalSubHeadingText", "modeModalSubHeadingTextRange", "selectModeHeadingText", "inputModeHeadingText", "useHelperText", "weekStartDay", "switch", "fullScreen", "today", "clear", "heading", "actions", "fullWidth", "readOnly", "disabled", "valid", "onClick", "onClose", "onToday", "onClear", "onCancel", "onOk", "Icon", "IconEnter", "IconClose", "WrapperProps", "CalendarProps", "CalendarPropsDesktop", "CalendarPropsMobile", "IconButtonProps", "AdvancedTextFieldProps", "TooltipProps", "ButtonProps", "ModalProps", "IconProps", "MobileSurfaceProps", "className"]);
+    const { tonal = true, color = 'primary', version: version_ = 'auto', size = 'regular', value: value_, valueDefault, onChange, calendar: calendar_, calendarDefault, onChangeCalendar, range, now, static: static_, openMobile = 'select', placeholder: placeholder_, calendars = props.range ? 2 : 1, min, max, validate, name, nameFrom, nameTo, label: label_, labelFrom: labelFrom_ = l('Date from'), labelTo: labelTo_ = l('Date to'), modeModalSubHeadingText = l('Select date'), modeModalSubHeadingTextRange = `${l('Date from')}${exports.SEPARATOR}${l('Date to')}`, selectModeHeadingText = l('Select date'), inputModeHeadingText = l('Enter date'), useHelperText: useHelperText_, weekStartDay = 'Monday', switch: switch__, fullScreen, today, clear = true, heading: heading_ = true, actions: actions_ = true, fullWidth, readOnly, disabled, valid: valid_, onClick: onClick_, onClose: onClose_, onToday: onToday_, onClear: onClear_, onCancel: onCancel_, onOk: onOk_, Icon: Icon_ = IconMaterialCalendarTodayW100Filled_1.default, IconEnter = IconMaterialEditW100_1.default, IconClose = IconMaterialCloseW100_1.default, WrapperProps, CalendarProps, CalendarPropsDesktop, CalendarPropsMobile, IconButtonProps, AdvancedTextFieldProps, TooltipProps, ButtonProps, ModalProps, IconProps, MobileSurfaceProps, className } = props, other = __rest(props, ["tonal", "color", "version", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "range", "now", "static", "openMobile", "placeholder", "calendars", "min", "max", "validate", "name", "nameFrom", "nameTo", "label", "labelFrom", "labelTo", "modeModalSubHeadingText", "modeModalSubHeadingTextRange", "selectModeHeadingText", "inputModeHeadingText", "useHelperText", "weekStartDay", "switch", "fullScreen", "today", "clear", "heading", "actions", "fullWidth", "readOnly", "disabled", "valid", "onClick", "onClose", "onToday", "onClear", "onCancel", "onOk", "Icon", "IconEnter", "IconClose", "WrapperProps", "CalendarProps", "CalendarPropsDesktop", "CalendarPropsMobile", "IconButtonProps", "AdvancedTextFieldProps", "TooltipProps", "ButtonProps", "ModalProps", "IconProps", "MobileSurfaceProps", "className"]);
     const { classes } = useStyle();
     const refs = {
         root: react_1.default.useRef(undefined)
@@ -429,10 +430,10 @@ const DatePicker = react_1.default.forwardRef((props__, ref) => {
                 'onesy-DatePicker-actions'
             ],
             classes.actions
-        ]) }, { children: [(today || clear) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [today && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onToday }, buttonProps, { children: "Today" }))), clear && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onClear }, buttonProps, { children: "Clear" })))] }))), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onCancel }, buttonProps, { children: "Cancel" })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onOk }, buttonProps, { children: "Ok" }))] }))] })));
+        ]) }, { children: [(today || clear) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [today && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onToday }, buttonProps, { children: l('Today') }))), clear && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onClear }, buttonProps, { children: l('Clear') })))] }))), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onCancel }, buttonProps, { children: l('Cancel') })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onOk }, buttonProps, { children: l('Ok') }))] }))] })));
     const moreProps = {};
     if (version === 'desktop') {
-        moreProps.end = ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: color, version: 'text', onClick: onOpen, "aria-label": `Choose date${range ? ' range' : ''}`, disabled: disabled || readOnly }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(Icon_, Object.assign({}, IconProps)) })));
+        moreProps.end = ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: color, version: 'text', onClick: onOpen, "aria-label": `${l('Choose date')}${range ? ' range' : ''}`, disabled: disabled || readOnly }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(Icon_, Object.assign({}, IconProps)) })));
     }
     if (version === 'mobile') {
         if (!(readOnly || disabled))
@@ -442,7 +443,7 @@ const DatePicker = react_1.default.forwardRef((props__, ref) => {
     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')}`;
     }
-    const dayNames = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+    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)([
             (0, utils_2.staticClassName)('DatePicker', theme) && [
                 'onesy-DatePicker-mobile'
@@ -459,7 +460,7 @@ const DatePicker = react_1.default.forwardRef((props__, ref) => {
                             width: '100%',
                             marginBottom: 8,
                             padding: `0px ${theme.methods.space.value(1, 'px')} 0px ${theme.methods.space.value(1.5, 'px')}`
-                        } }, { children: [(0, jsx_runtime_1.jsx)(IconButton, Object.assign({ color: 'inherit', version: 'text', onClick: onClose, "aria-label": 'Close' }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconClose, Object.assign({}, IconProps)) })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onOk }, buttonProps, { children: "Save" }))] }))), heading_ && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'l2', className: (0, style_react_1.classNames)([
+                        } }, { children: [(0, jsx_runtime_1.jsx)(IconButton, Object.assign({ color: 'inherit', version: 'text', onClick: onClose, "aria-label": l('Close') }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconClose, Object.assign({}, IconProps)) })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onOk }, buttonProps, { children: l('Save') }))] }))), heading_ && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'l2', className: (0, style_react_1.classNames)([
                             (0, utils_2.staticClassName)('DatePicker', theme) && [
                                 'onesy-DatePicker-subheading'
                             ],
@@ -471,13 +472,13 @@ const DatePicker = react_1.default.forwardRef((props__, ref) => {
                             ],
                             classes.heading,
                             fullScreen && classes.heading_fullScreen
-                        ]) }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h1' }, { children: textHeading })), switch_ && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Enter date' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: 'inherit', onClick: () => onMode('input'), "aria-label": 'Enter date' }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconEnter, Object.assign({}, IconProps)) })) })))] }))), mode === 'input' && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'flex-start', justify: 'space-between', className: (0, style_react_1.classNames)([
+                        ]) }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h1' }, { children: textHeading })), switch_ && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Enter date') }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: 'inherit', onClick: () => onMode('input'), "aria-label": l('Enter date') }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconEnter, Object.assign({}, IconProps)) })) })))] }))), mode === 'input' && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'flex-start', justify: 'space-between', className: (0, style_react_1.classNames)([
                             (0, utils_2.staticClassName)('DatePicker', theme) && [
                                 'onesy-DatePicker-heading'
                             ],
                             classes.heading,
                             fullScreen && classes.heading_fullScreen
-                        ]) }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h1' }, { children: inputModeHeadingText })), switch_ && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Select date' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: 'inherit', onClick: () => onMode('select'), "aria-label": 'Choose date' }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(Icon_, Object.assign({}, IconProps)) })) })))] })))] })), mode === 'select' && fullScreen && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center', justify: 'space-between', className: (0, style_react_1.classNames)([
+                        ]) }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h1' }, { children: inputModeHeadingText })), switch_ && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Select date') }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: 'inherit', onClick: () => onMode('select'), "aria-label": l('Select date') }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(Icon_, Object.assign({}, IconProps)) })) })))] })))] })), mode === 'select' && fullScreen && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center', justify: 'space-between', className: (0, style_react_1.classNames)([
                     (0, utils_2.staticClassName)('DatePicker', theme) && [
                         'onesy-DatePicker-day-names'
                     ],
@@ -503,7 +504,7 @@ const DatePicker = react_1.default.forwardRef((props__, ref) => {
                     classes.calendar_mobile
                 ]) }))), mode === 'input' && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1.5, direction: 'row', align: 'flex-start', className: (0, style_react_1.classNames)([
                     classes.modal_input
-                ]) }, { children: (0, jsx_runtime_1.jsx)(AdvancedTextField, Object.assign({ tonal: tonal, color: color, version: 'outlined', size: size, label: label, mask: mask, placeholder: placeholder, value: inputModal, onChange: onInputChangeModal, helperText: useHelperText ? placeholder : undefined, error: error, readOnly: readOnly, disabled: disabled }, AdvancedTextFieldProps, { className: (0, style_react_1.classNames)([
+                ]) }, { children: (0, jsx_runtime_1.jsx)(AdvancedTextField, Object.assign({ tonal: tonal, color: color, version: 'outlined', size: size, name: label, mask: mask, placeholder: placeholder, value: inputModal, onChange: onInputChangeModal, helperText: useHelperText ? placeholder : undefined, error: error, readOnly: readOnly, disabled: disabled }, AdvancedTextFieldProps, { className: (0, style_react_1.classNames)([
                         AdvancedTextFieldProps === null || AdvancedTextFieldProps === void 0 ? void 0 : AdvancedTextFieldProps.className,
                         classes.input_mobile
                     ]) })) }))), fullScreen && ((0, jsx_runtime_1.jsx)(Divider, { tonal: false, className: (0, style_react_1.classNames)([
@@ -553,7 +554,7 @@ const DatePicker = react_1.default.forwardRef((props__, ref) => {
                             ref.current = item;
                     }
                     refs.root.current = item;
-                }, tonal: tonal, color: color, version: 'outlined', size: size, label: label, mask: mask, placeholder: placeholder, value: input, onChange: onInputChange, helperText: useHelperText ? placeholder : undefined, endVerticalAlign: 'center', error: error, fullWidth: fullWidth, readOnly: readOnly, disabled: disabled }, moreProps, other, AdvancedTextFieldProps)), version === 'mobile' && ((0, jsx_runtime_1.jsx)(Modal, Object.assign({ open: open, modalWrapperSurface: false, TransitionComponent: Slide, fullScreen: fullScreen, onClose: onClose }, ModalProps, { children: mobile }))), version === 'desktop' && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ open: open, portal: true, anchorElement: refs.root.current, alignment: 'center', position: 'bottom', hover: false, focus: false, longPress: false, maxWidth: 'unset', noMargin: true, label: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: onCancel, includeParentQueries: ['.onesy-Calendar-list'] }, { children: desktop }))) }, TooltipProps)))] })));
+                }, tonal: tonal, color: color, version: 'outlined', size: size, name: label, mask: mask, placeholder: placeholder, value: input, onChange: onInputChange, helperText: useHelperText ? placeholder : undefined, endVerticalAlign: 'center', error: error, fullWidth: fullWidth, readOnly: readOnly, disabled: disabled }, moreProps, other, AdvancedTextFieldProps)), version === 'mobile' && ((0, jsx_runtime_1.jsx)(Modal, Object.assign({ open: open, modalWrapperSurface: false, TransitionComponent: Slide, fullScreen: fullScreen, onClose: onClose }, ModalProps, { children: mobile }))), version === 'desktop' && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ open: open, portal: true, anchorElement: refs.root.current, alignment: 'center', position: 'bottom', hover: false, focus: false, longPress: false, maxWidth: 'unset', noMargin: true, name: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: onCancel, includeParentQueries: ['.onesy-Calendar-list'] }, { children: desktop }))) }, TooltipProps)))] })));
 });
 DatePicker.displayName = 'onesy-DatePicker';
 exports.default = DatePicker;

package/DateTimePicker/DateTimePicker.js

@@ -60,6 +60,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-DateTimePicker' });
 const DateTimePicker = 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.onesyDateTimePicker) === 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 AdvancedTextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.AdvancedTextField) || AdvancedTextField_1.default; }, [theme]);
@@ -73,7 +74,7 @@ const DateTimePicker = react_1.default.forwardRef((props__, ref) => {
     const DatePicker = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.DatePicker) || DatePicker_1.default; }, [theme]);
     const TimePicker = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.TimePicker) || TimePicker_1.default; }, [theme]);
     const ClickListener = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ClickListener) || ClickListener_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', version: version_ = 'auto', value: value_, valueDefault, onChange, label, range, now, static: static_, min, max, validate, headingText = 'Select date & time', headingTextTime, headingTextTimeRange, headingTextDate, headingTextDateRange, useHelperText: useHelperText_, format = '12', hour = true, minute = true, second = false, today, clear = true, size, placeholder: placeholder_, fullWidth, readOnly, disabled, valid: valid_, onClose: onClose_, onToday: onToday_, onClear: onClear_, onCancel: onCancel_, onOk: onOk_, Icon: Icon_ = IconMaterialDateRangeW100Filled_1.default, IconDate = IconMaterialCalendarTodayW100Filled_1.default, IconTime = IconMaterialScheduleW100_1.default, WrapperProps, ModalProps, TooltipProps, AdvancedTextFieldProps, DatePickerProps, TimePickerProps, IconButtonProps, ModeDesktopProps, ModeMobileProps, ButtonProps, PickerProps: PickerProps_, MiddleProps, MainProps, IconProps, className } = props, other = __rest(props, ["tonal", "color", "version", "value", "valueDefault", "onChange", "label", "range", "now", "static", "min", "max", "validate", "headingText", "headingTextTime", "headingTextTimeRange", "headingTextDate", "headingTextDateRange", "useHelperText", "format", "hour", "minute", "second", "today", "clear", "size", "placeholder", "fullWidth", "readOnly", "disabled", "valid", "onClose", "onToday", "onClear", "onCancel", "onOk", "Icon", "IconDate", "IconTime", "WrapperProps", "ModalProps", "TooltipProps", "AdvancedTextFieldProps", "DatePickerProps", "TimePickerProps", "IconButtonProps", "ModeDesktopProps", "ModeMobileProps", "ButtonProps", "PickerProps", "MiddleProps", "MainProps", "IconProps", "className"]);
+    const { tonal = true, color = 'primary', version: version_ = 'auto', value: value_, valueDefault, onChange, label, range, now, static: static_, min, max, validate, headingText = l('Select date & time'), headingTextTime, headingTextTimeRange, headingTextDate, headingTextDateRange, useHelperText: useHelperText_, format = '12', hour = true, minute = true, second = false, today, clear = true, size, placeholder: placeholder_, fullWidth, readOnly, disabled, valid: valid_, onClose: onClose_, onToday: onToday_, onClear: onClear_, onCancel: onCancel_, onOk: onOk_, Icon: Icon_ = IconMaterialDateRangeW100Filled_1.default, IconDate = IconMaterialCalendarTodayW100Filled_1.default, IconTime = IconMaterialScheduleW100_1.default, WrapperProps, ModalProps, TooltipProps, AdvancedTextFieldProps, DatePickerProps, TimePickerProps, IconButtonProps, ModeDesktopProps, ModeMobileProps, ButtonProps, PickerProps: PickerProps_, MiddleProps, MainProps, IconProps, className } = props, other = __rest(props, ["tonal", "color", "version", "value", "valueDefault", "onChange", "label", "range", "now", "static", "min", "max", "validate", "headingText", "headingTextTime", "headingTextTimeRange", "headingTextDate", "headingTextDateRange", "useHelperText", "format", "hour", "minute", "second", "today", "clear", "size", "placeholder", "fullWidth", "readOnly", "disabled", "valid", "onClose", "onToday", "onClear", "onCancel", "onOk", "Icon", "IconDate", "IconTime", "WrapperProps", "ModalProps", "TooltipProps", "AdvancedTextFieldProps", "DatePickerProps", "TimePickerProps", "IconButtonProps", "ModeDesktopProps", "ModeMobileProps", "ButtonProps", "PickerProps", "MiddleProps", "MainProps", "IconProps", "className"]);
     const { classes } = useStyle();
     const refs = {
         root: react_1.default.useRef(undefined),
@@ -413,7 +414,7 @@ const DateTimePicker = react_1.default.forwardRef((props__, ref) => {
                 'onesy-TimePicker-footer'
             ],
             classes.footer
-        ]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: tab === 'date' ? 'Time' : 'Date' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: 'inherit', onClick: onPickSwitch, "aria-label": tab === 'date' ? 'Time' : 'Date' }, iconButtonProps, { children: tab === 'date' ? (0, jsx_runtime_1.jsx)(IconTime, Object.assign({}, IconProps)) : (0, jsx_runtime_1.jsx)(IconDate, Object.assign({}, IconProps)) })) })), today && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onToday }, buttonProps, { children: "Today" }))), clear && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onClear }, buttonProps, { children: "Clear" })))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: tonal, color: color, version: 'text', onClick: onCancel }, buttonProps, { children: "Cancel" })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: tonal, color: color, version: 'text', onClick: onOk }, buttonProps, { children: "Ok" }))] }))] })));
+        ]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: tab === 'date' ? l('Time') : l('Date') }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: 'inherit', onClick: onPickSwitch, "aria-label": tab === 'date' ? l('Time') : l('Date') }, iconButtonProps, { children: tab === 'date' ? (0, jsx_runtime_1.jsx)(IconTime, Object.assign({}, IconProps)) : (0, jsx_runtime_1.jsx)(IconDate, Object.assign({}, IconProps)) })) })), today && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onToday }, buttonProps, { children: l('Today') }))), clear && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onClear }, buttonProps, { children: l('Clear') })))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: tonal, color: color, version: 'text', onClick: onCancel }, buttonProps, { children: l('Cancel') })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: tonal, color: color, version: 'text', onClick: onOk }, buttonProps, { children: l('Ok') }))] }))] })));
     const heading = (range ? (tab === 'date' ? headingTextDateRange : headingTextTimeRange) : (tab === 'date' ? headingTextDate : headingTextTime)) || headingText;
     const PickerProps = Object.assign(Object.assign(Object.assign({ value, onChange: onPickerChange, now, static: true, range,
         valid,
@@ -441,7 +442,7 @@ const DateTimePicker = react_1.default.forwardRef((props__, ref) => {
                 ]) }, { children: tab === 'date' ? ((0, jsx_runtime_1.jsx)(DatePicker, Object.assign({ calendar: calendar, onChangeCalendar: onChangeCalendar, size: size }, PickerProps))) : ((0, jsx_runtime_1.jsx)(TimePicker, Object.assign({ format: format, hour: hour, minute: minute, second: second, size: size }, PickerProps))) })), actions] })));
     const moreProps = {};
     if (version === 'desktop') {
-        moreProps.end = ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: color, version: 'text', onClick: onOpen, "aria-label": 'Choose date and time', disabled: disabled || readOnly }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(Icon_, Object.assign({}, IconProps)) })));
+        moreProps.end = ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: color, version: 'text', onClick: onOpen, "aria-label": l('Choose date and time'), disabled: disabled || readOnly }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(Icon_, Object.assign({}, IconProps)) })));
     }
     if (version === 'mobile') {
         if (!(readOnly || disabled))
@@ -470,7 +471,7 @@ const DateTimePicker = react_1.default.forwardRef((props__, ref) => {
                             ref.current = item;
                     }
                     refs.root.current = item;
-                }, tonal: tonal, color: color, version: 'outlined', label: label, mask: mask, placeholder: placeholder, value: input, onChange: onInputChange, helperText: useHelperText ? placeholder : undefined, endVerticalAlign: 'center', size: size, error: error, fullWidth: fullWidth, readOnly: readOnly, disabled: disabled }, moreProps, other, AdvancedTextFieldProps)), version === 'mobile' && ((0, jsx_runtime_1.jsx)(Modal, Object.assign({ open: open, modalWrapperSurface: false, TransitionComponent: Slide, onClose: onClose }, ModalProps, { children: element }))), version === 'desktop' && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ open: open, portal: true, anchorElement: refs.root.current, alignment: 'center', position: 'bottom', hover: false, focus: false, longPress: false, maxWidth: 'unset', noMargin: true, label: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: onCancel, includeParentQueries: ['.onesy-DateTimePicker-main', '.onesy-Calendar-list'] }, { children: element }))) }, TooltipProps)))] })));
+                }, tonal: tonal, color: color, version: 'outlined', name: label, mask: mask, placeholder: placeholder, value: input, onChange: onInputChange, helperText: useHelperText ? placeholder : undefined, endVerticalAlign: 'center', size: size, error: error, fullWidth: fullWidth, readOnly: readOnly, disabled: disabled }, moreProps, other, AdvancedTextFieldProps)), version === 'mobile' && ((0, jsx_runtime_1.jsx)(Modal, Object.assign({ open: open, modalWrapperSurface: false, TransitionComponent: Slide, onClose: onClose }, ModalProps, { children: element }))), version === 'desktop' && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ open: open, portal: true, anchorElement: refs.root.current, alignment: 'center', position: 'bottom', hover: false, focus: false, longPress: false, maxWidth: 'unset', noMargin: true, name: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: onCancel, includeParentQueries: ['.onesy-DateTimePicker-main', '.onesy-Calendar-list'] }, { children: element }))) }, TooltipProps)))] })));
 });
 DateTimePicker.displayName = 'onesy-DateTimePicker';
 exports.default = DateTimePicker;

package/Drawing/Drawing.js

@@ -122,6 +122,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-Drawing' });
 const Drawing = 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.onesyDrawing) === 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 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]);
@@ -349,7 +350,7 @@ const Drawing = react_1.default.forwardRef((props__, ref) => {
     const IconProps = Object.assign({ size: 'small' }, IconProps_);
     const WrapperToggleButton = react_1.default.useCallback(react_1.default.forwardRef((props_, ref_) => {
         const { open: open_, label, children } = props_, other_ = __rest(props_, ["open", "label", "children"]);
-        return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ open: open_ !== undefined ? open_ : undefined, label: label }, TooltipProps, { children: react_1.default.cloneElement(children, Object.assign(Object.assign({}, other_), children.props)) })));
+        return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ open: open_ !== undefined ? open_ : undefined, name: label }, TooltipProps, { children: react_1.default.cloneElement(children, Object.assign(Object.assign({}, other_), children.props)) })));
     }), []);
     const WrapperAppend = react_1.default.useCallback((props_) => {
         const { open: open_, element, anchorElement, onClose, children } = props_, other_ = __rest(props_, ["open", "element", "anchorElement", "onClose", "children"]);
@@ -388,7 +389,7 @@ const Drawing = react_1.default.forwardRef((props__, ref) => {
                                     onClose();
                                 } }, index_))) }), index)))] })), (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', style: {
                         width: '100%'
-                    } }, { children: [(0, jsx_runtime_1.jsx)(ColorTextField, Object.assign({ tonal: tonal, color: color, label: 'Custom color', version: 'outlined', size: 'small', value: refs.inputValues.current[version_], onChange: valueNew => updateInputValues(version_, valueNew) }, ColorTextFieldProps, { className: (0, style_react_1.classNames)([
+                    } }, { children: [(0, jsx_runtime_1.jsx)(ColorTextField, Object.assign({ tonal: tonal, color: color, name: l('Custom color'), version: 'outlined', size: 'small', value: refs.inputValues.current[version_], onChange: valueNew => updateInputValues(version_, valueNew) }, ColorTextFieldProps, { className: (0, style_react_1.classNames)([
                                 (0, utils_2.staticClassName)('Drawing', theme) && [
                                     'onesy-Drawing-text-field-color'
                                 ],
@@ -397,7 +398,7 @@ const Drawing = react_1.default.forwardRef((props__, ref) => {
                             ]) })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: tonal, color: 'inherit', version: 'text', size: 'small', onClick: () => {
                                 onUpdate(refs.inputValues.current[version_]);
                                 onClose();
-                            } }, { children: "Apply" }))] }))] })));
+                            } }, { children: l('Apply') }))] }))] })));
     }), []);
     const valueNew_ = ((0, utils_1.is)('array', value) ? value : [value]).filter(Boolean);
     const valueNewActive = mouseDown && valueNew_[valueNew_.length - 1];
@@ -465,7 +466,7 @@ const Drawing = react_1.default.forwardRef((props__, ref) => {
                             ToolbarUpdatesProps === null || ToolbarUpdatesProps === void 0 ? void 0 : ToolbarUpdatesProps.className,
                             classes.toolbar,
                             classes.toolbar_updates
-                        ]) }, { children: [includes('stroke-width') && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'flex-start' }, { children: includes('stroke-width') && ((0, jsx_runtime_1.jsx)(Select, Object.assign({ label: 'Stroke Width', valueDefault: stroke_width.find(item => String(item.value).includes('1')).value, value: inputValues['strokeWidth'], onChange: (valueNew) => updateInputValues('strokeWidth', valueNew) }, SelectProps, { className: (0, style_react_1.classNames)([
+                        ]) }, { children: [includes('stroke-width') && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'flex-start' }, { children: includes('stroke-width') && ((0, jsx_runtime_1.jsx)(Select, Object.assign({ name: l('Stroke Width'), valueDefault: stroke_width.find(item => String(item.value).includes('1')).value, value: inputValues['strokeWidth'], onChange: (valueNew) => updateInputValues('strokeWidth', valueNew) }, SelectProps, { className: (0, style_react_1.classNames)([
                                         (0, utils_2.staticClassName)('Drawing', theme) && [
                                             'onesy-Drawing-select'
                                         ],
@@ -473,12 +474,12 @@ const Drawing = react_1.default.forwardRef((props__, ref) => {
                                         classes.select
                                     ]), style: {
                                         minWidth: '90px'
-                                    } }, { children: stroke_width.map(item => ((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ primary: item.label, value: item.value, button: true }, ListItemProps), item.value))) }))) }))), includes('stroke-color') && ((0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: includes('stroke-color') && ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.strokeColor, anchorElement: refs.elements.strokeColor.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('strokeColor', false), include: [refs.elements.strokeColor, refs.elements.strokeColor.current] }, { children: (0, jsx_runtime_1.jsx)(Palette, Object.assign({ onClose: () => updateOpen('strokeColor', false), onUpdate: (valueNew) => updateInputValues('strokeColor', valueNew) }, PaletteProps)) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ label: 'Stroke Color', open: refs.open.current.strokeColor ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('stroke-color', ToggleButtonProps, refs.value.current) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.strokeColor }, ToggleButtonProps, { selected: refs.open.current.strokeColor, onClick: () => updateOpen('strokeColor', !refs.open.current.strokeColor) }, { children: (0, jsx_runtime_1.jsx)(IconStrokeColor, Object.assign({}, IconProps)) }))) })) }))) }))), includes('size') && ((0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: includes('size') && ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.size, anchorElement: refs.elements.size.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('size', false), include: [refs.elements.size] }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, tonal: tonal, color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed', Component: Surface, className: (0, style_react_1.classNames)([
+                                    } }, { children: stroke_width.map(item => ((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ primary: item.label, value: item.value, button: true }, ListItemProps), item.value))) }))) }))), includes('stroke-color') && ((0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: includes('stroke-color') && ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.strokeColor, anchorElement: refs.elements.strokeColor.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('strokeColor', false), include: [refs.elements.strokeColor, refs.elements.strokeColor.current] }, { children: (0, jsx_runtime_1.jsx)(Palette, Object.assign({ onClose: () => updateOpen('strokeColor', false), onUpdate: (valueNew) => updateInputValues('strokeColor', valueNew) }, PaletteProps)) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Stroke Color'), open: refs.open.current.strokeColor ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('stroke-color', ToggleButtonProps, refs.value.current) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.strokeColor }, ToggleButtonProps, { selected: refs.open.current.strokeColor, onClick: () => updateOpen('strokeColor', !refs.open.current.strokeColor) }, { children: (0, jsx_runtime_1.jsx)(IconStrokeColor, Object.assign({}, IconProps)) }))) })) }))) }))), includes('size') && ((0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: includes('size') && ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.size, anchorElement: refs.elements.size.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('size', false), include: [refs.elements.size] }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, tonal: tonal, color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed', Component: Surface, className: (0, style_react_1.classNames)([
                                                 (0, utils_2.staticClassName)('Drawing', theme) && [
                                                     'onesy-Drawing-modal'
                                                 ],
                                                 classes.modal
-                                            ]) }, SizeProps, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center' }, { children: [(0, jsx_runtime_1.jsx)(NumericTextField, { label: 'Width', tonal: tonal, color: color, size: 'small', version: 'outlined', min: 1, increment: false, decrement: false, value: refs.inputValues.current.widthInput, onChange: valueNew => updateInputValues('widthInput', !valueNew ? 1 : valueNew) }), "\u00D7", (0, jsx_runtime_1.jsx)(NumericTextField, { label: 'Height', tonal: tonal, color: color, size: 'small', version: 'outlined', min: 1, increment: false, decrement: false, value: refs.inputValues.current.heightInput, onChange: valueNew => updateInputValues('heightInput', !valueNew ? 1 : valueNew) })] })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'flex-end', style: {
+                                            ]) }, SizeProps, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center' }, { children: [(0, jsx_runtime_1.jsx)(NumericTextField, { name: l('Width'), tonal: tonal, color: color, size: 'small', version: 'outlined', min: 1, increment: false, decrement: false, value: refs.inputValues.current.widthInput, onChange: valueNew => updateInputValues('widthInput', !valueNew ? 1 : valueNew) }), "\u00D7", (0, jsx_runtime_1.jsx)(NumericTextField, { name: l('Height'), tonal: tonal, color: color, size: 'small', version: 'outlined', min: 1, increment: false, decrement: false, value: refs.inputValues.current.heightInput, onChange: valueNew => updateInputValues('heightInput', !valueNew ? 1 : valueNew) })] })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'flex-end', style: {
                                                         width: '100%'
                                                     } }, { children: (0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: tonal, color: 'inherit', version: 'text', size: 'small', onClick: () => {
                                                             var _a;
@@ -491,7 +492,7 @@ const Drawing = react_1.default.forwardRef((props__, ref) => {
                                                             updateInputValues('width', refs.inputValues.current.widthInput);
                                                             updateInputValues('height', refs.inputValues.current.heightInput);
                                                             updateOpen('size', false);
-                                                        } }, { children: "Update" })) }))] })) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ label: 'Size', open: refs.open.current.size ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('size', ToggleButtonProps, refs.value.current) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.size }, ToggleButtonProps, { selected: refs.open.current.size, onClick: () => updateOpen('size', !refs.open.current.size) }, { children: (0, jsx_runtime_1.jsx)(IconSize, Object.assign({}, IconProps)) }))) })) }))) })))] }))), (updates_ && actions_) && ((0, jsx_runtime_1.jsx)(Divider, Object.assign({}, DividerProps, { className: (0, style_react_1.classNames)([
+                                                        } }, { children: "Update" })) }))] })) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Size'), open: refs.open.current.size ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('size', ToggleButtonProps, refs.value.current) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.size }, ToggleButtonProps, { selected: refs.open.current.size, onClick: () => updateOpen('size', !refs.open.current.size) }, { children: (0, jsx_runtime_1.jsx)(IconSize, Object.assign({}, IconProps)) }))) })) }))) })))] }))), (updates_ && actions_) && ((0, jsx_runtime_1.jsx)(Divider, Object.assign({}, DividerProps, { className: (0, style_react_1.classNames)([
                             (0, utils_2.staticClassName)('Drawing', theme) && [
                                 'onesy-Drawing-divider'
                             ],
@@ -507,7 +508,7 @@ const Drawing = react_1.default.forwardRef((props__, ref) => {
                             classes.toolbar_actions
                         ]) }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'space-between', style: {
                                 width: '100%'
-                            } }, { children: [(0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start' }, { children: includes('clear') && ((0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: includes('clear') && ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ label: 'Clear' }, { children: (0, utils_1.is)('function', render) ? render('clear', ToggleButtonProps, refs.value.current) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: onClear }, { children: (0, jsx_runtime_1.jsx)(IconClear, Object.assign({}, IconProps)) }))) }))) }))) })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start' }, { children: includes('download') && ((0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: includes('download') && ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ label: 'Download' }, { children: (0, utils_1.is)('function', render) ? render('download', ToggleButtonProps, refs.value.current) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { loading: loading, onClick: onDownload }, { children: (0, jsx_runtime_1.jsx)(IconDownload, Object.assign({}, IconProps)) }))) }))) }))) }))] })) }))), (0, jsx_runtime_1.jsx)(Divider, Object.assign({}, DividerProps, { className: (0, style_react_1.classNames)([
+                            } }, { children: [(0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start' }, { children: includes('clear') && ((0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: includes('clear') && ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Clear') }, { children: (0, utils_1.is)('function', render) ? render('clear', ToggleButtonProps, refs.value.current) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: onClear }, { children: (0, jsx_runtime_1.jsx)(IconClear, Object.assign({}, IconProps)) }))) }))) }))) })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start' }, { children: includes('download') && ((0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: includes('download') && ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Download') }, { children: (0, utils_1.is)('function', render) ? render('download', ToggleButtonProps, refs.value.current) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { loading: loading, onClick: onDownload }, { children: (0, jsx_runtime_1.jsx)(IconDownload, Object.assign({}, IconProps)) }))) }))) }))) }))] })) }))), (0, jsx_runtime_1.jsx)(Divider, Object.assign({}, DividerProps, { className: (0, style_react_1.classNames)([
                             (0, utils_2.staticClassName)('Drawing', theme) && [
                                 'onesy-Drawing-divider'
                             ],

package/DropZone/DropZone.d.ts

@@ -4,6 +4,7 @@ import { IElement, IVersion } from '../types';
 export type IDropZone = IFileChoose & {
     version?: IVersion;
     start?: IElement;
+    dropText?: any;
     onFocus?: (event: React.FocusEvent<any>) => any;
     onBlur?: (event: React.FocusEvent<any>) => any;
     onDrop?: (event: React.DragEvent<any>) => any;

package/DropZone/DropZone.js

@@ -55,13 +55,14 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-DropZone' });
 const DropZone = 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.onesyDropZone) === 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 FileChoose = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.FileChoose) || FileChoose_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]);
     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]);
     const Interaction = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Interaction) || Interaction_1.default; }, [theme]);
-    const { tonal = true, color = 'default', version, start, files, multiple, max, allowedTypes, valueDefault, value: value_, onChange: onChange_, IconStart = IconMaterialCloudUploadW100_1.default, onFocus: onFocus_, onBlur: onBlur_, onDrop: onDrop_, onDragOver: onDragOver_, onDragEnter: onDragEnter_, onDragLeave: onDragLeave_, disabled, children, className } = props, otherProps = __rest(props, ["tonal", "color", "version", "start", "files", "multiple", "max", "allowedTypes", "valueDefault", "value", "onChange", "IconStart", "onFocus", "onBlur", "onDrop", "onDragOver", "onDragEnter", "onDragLeave", "disabled", "children", "className"]);
+    const { tonal = true, color = 'default', version, start, files, multiple, max, allowedTypes, dropText = l('Drop files here'), valueDefault, value: value_, onChange: onChange_, IconStart = IconMaterialCloudUploadW100_1.default, onFocus: onFocus_, onBlur: onBlur_, onDrop: onDrop_, onDragOver: onDragOver_, onDragEnter: onDragEnter_, onDragLeave: onDragLeave_, disabled, children, className } = props, otherProps = __rest(props, ["tonal", "color", "version", "start", "files", "multiple", "max", "allowedTypes", "dropText", "valueDefault", "value", "onChange", "IconStart", "onFocus", "onBlur", "onDrop", "onDragOver", "onDragEnter", "onDragLeave", "disabled", "children", "className"]);
     const other = otherProps;
     const { classes } = useStyle();
     const [init, setInit] = react_1.default.useState(false);
@@ -200,7 +201,7 @@ const DropZone = react_1.default.forwardRef((props_, ref) => {
                         'onesy-DropZone-wrapper-text'
                     ],
                     classes.wrapperText
-                ]) }, { children: [(0, jsx_runtime_1.jsx)(IconStart, {}), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 't1' }, { children: "Drop files here" }))] })))] })));
+                ]) }, { children: [(0, jsx_runtime_1.jsx)(IconStart, {}), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 't1' }, { children: dropText }))] })))] })));
 });
 DropZone.displayName = 'onesy-DropZone';
 exports.default = DropZone;