@onesy/ui-react 1.0.58 → 1.0.60

package/esm/CalendarViews/CalendarViews.js

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

package/esm/Chart/Chart.js

@@ -272,6 +272,7 @@ const useStyle = styleMethod(theme => ({
 });
 const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
+  const l = theme.l;
   const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyChart?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);

package/esm/ColorTextField/ColorTextField.js

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

package/esm/Confirm/Confirm.js

@@ -40,6 +40,7 @@ const useStyle = styleMethod(theme => ({
 });
 const Confirm = /*#__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?.onesyConfirm?.props?.default), props_), [props_]);
   const ModalHeader = React.useMemo(() => theme?.elements?.ModalHeader || ModalHeaderElement, [theme]);
   const ModalFooter = React.useMemo(() => theme?.elements?.ModalFooter || ModalFooterElement, [theme]);
@@ -79,8 +80,8 @@ const Confirm = /*#__PURE__*/React.forwardRef((props_, ref) => {
       refs.modal.current.description = value?.description !== undefined ? value?.description : 'Are you sure you want to proceed?';
       if (refs.modal.current.buttons?.negative?.text === undefined) setObjectValue(refs.modal.current, 'buttons.negative.text', '');
       if (refs.modal.current.buttons?.positive?.text === undefined) setObjectValue(refs.modal.current, 'buttons.positive.text', '');
-      refs.modal.current.buttons.negative.text = value?.buttons?.negative?.text !== undefined ? value?.buttons?.negative?.text : 'Cancel';
-      refs.modal.current.buttons.positive.text = value?.buttons?.positive?.text !== undefined ? value?.buttons?.positive?.text : 'Confirm';
+      refs.modal.current.buttons.negative.text = value?.buttons?.negative?.text !== undefined ? value?.buttons?.negative?.text : l('Cancel');
+      refs.modal.current.buttons.positive.text = value?.buttons?.positive?.text !== undefined ? value?.buttons?.positive?.text : l('Confirm');
       refs.modal.current.throwError = value?.throwError !== undefined ? value.throwError : refs.props.current.throwError;
       const promise = new Promise((resolve, reject) => {
         refs.promise.resolve.current = resolve;
@@ -136,20 +137,20 @@ const Confirm = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }) : /*#__PURE__*/React.createElement(React.Fragment, null, name !== false && /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
     version: "t1",
     weight: 500
-  }, name || 'Confirmation')), /*#__PURE__*/React.createElement(ModalMain, null, /*#__PURE__*/React.createElement(ModalText, {
+  }, name || l('Confirmation'))), /*#__PURE__*/React.createElement(ModalMain, null, /*#__PURE__*/React.createElement(ModalText, {
     version: "b1",
     weight: 200
-  }, description !== undefined ? description : 'Are you sure you want to proceed?')), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, _extends({
+  }, description !== undefined ? description : l('Are you sure you want to proceed?'))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, _extends({
     version: "text",
     color: "inherit",
     tonal: true,
     onClick: () => close(false)
-  }, ButtonNegativeProps), buttons?.negative?.text !== undefined ? buttons?.negative?.text : 'Cancel'), /*#__PURE__*/React.createElement(Button, _extends({
+  }, ButtonNegativeProps), buttons?.negative?.text !== undefined ? buttons?.negative?.text : l('Cancel')), /*#__PURE__*/React.createElement(Button, _extends({
     version: "text",
     color: "inherit",
     tonal: true,
     onClick: () => close(true)
-  }, ButtonPositiveProps), buttons?.positive?.text !== undefined ? buttons?.positive?.text : 'Confirm')))));
+  }, ButtonPositiveProps), buttons?.positive?.text !== undefined ? buttons?.positive?.text : l('Confirm'))))));
 });
 Confirm.displayName = 'onesy-Confirm';
 export default Confirm;

package/esm/CookieBanner/CookieBanner.js

@@ -38,6 +38,7 @@ const useStyle = styleMethod(theme => ({
 });
 const CookieBanner = /*#__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?.onesyBanner?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Slide = React.useMemo(() => theme?.elements?.Slide || SlideElement, [theme]);
@@ -84,7 +85,7 @@ const CookieBanner = /*#__PURE__*/React.forwardRef((props_, ref) => {
     Component: Surface,
     color: "default",
     role: "region",
-    "aria-label": "Cookie Banner",
+    "aria-label": l('Cookie Banner'),
     className: classNames([staticClassName('CookieBanner', theme) && ['onesy-CookieBanner-root', `onesy-CookieBanner-size-${size}`], className, classes.root, classes[`size_${size}`]])
   }, other), /*#__PURE__*/React.createElement(Line, _extends({
     gap: 1.5,
@@ -109,11 +110,11 @@ const CookieBanner = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, startActions, /*#__PURE__*/React.createElement(Button, _extends({
     onClick: onReject,
     color: "default"
-  }, buttonProps, RejectButtonProps), "Reject All"), /*#__PURE__*/React.createElement(Button, _extends({
+  }, buttonProps, RejectButtonProps), l('Reject All')), /*#__PURE__*/React.createElement(Button, _extends({
     onClick: onAllow,
     color: "primary",
     version: "filled"
-  }, buttonProps, AllowButtonProps), "Accept All"), endActions))));
+  }, buttonProps, AllowButtonProps), l('Accept All')), endActions))));
 });
 CookieBanner.displayName = 'onesy-CookieBanner';
 export default CookieBanner;

package/esm/Countdown/Countdown.js

@@ -87,6 +87,7 @@ const useStyle = styleMethod(theme => ({
 });
 const Countdown = /*#__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?.onesyCountdown?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
@@ -271,7 +272,7 @@ const Countdown = /*#__PURE__*/React.forwardRef((props_, ref) => {
       marginBottom: -8
     }
   }, /*#__PURE__*/React.createElement(NumericTextField, _extends({
-    label: "Hours",
+    name: l('Hours'),
     min: 0,
     max: 23,
     value: values.hours,
@@ -279,7 +280,7 @@ const Countdown = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, NumericTextFieldProps, {
     className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-numeric-text-field'], NumericTextFieldProps?.className, classes.numericTextField])
   })), /*#__PURE__*/React.createElement(NumericTextField, _extends({
-    label: "Minutes",
+    name: l('Minutes'),
     min: 0,
     max: 59,
     value: values.minutes,
@@ -287,7 +288,7 @@ const Countdown = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, NumericTextFieldProps, {
     className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-numeric-text-field'], NumericTextFieldProps?.className, classes.numericTextField])
   })), /*#__PURE__*/React.createElement(NumericTextField, _extends({
-    label: "Seconds",
+    name: l('Seconds'),
     min: 0,
     max: 59,
     value: values.seconds,
@@ -335,7 +336,7 @@ const Countdown = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, value_), /*#__PURE__*/React.createElement(Type, {
     version: "b3",
     className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-meta'], classes.meta])
-  }, "Total ", duration(refs.total.current, false)))), /*#__PURE__*/React.createElement(Line, {
+  }, l('Total'), " ", duration(refs.total.current, false)))), /*#__PURE__*/React.createElement(Line, {
     gap: 1,
     direction: "row",
     align: "center",
@@ -344,7 +345,7 @@ const Countdown = /*#__PURE__*/React.forwardRef((props_, ref) => {
     in: true,
     add: true
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "Start"
+    name: l('Start')
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onStart,
     disabled: !((values.hours || 0) + (values.minutes || 0) + (values.seconds || 0))
@@ -352,22 +353,22 @@ const Countdown = /*#__PURE__*/React.forwardRef((props_, ref) => {
     in: true,
     add: true
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "Stop"
+    name: l('Stop')
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onStop
   }, IconButtonProps), /*#__PURE__*/React.createElement(IconStop, null))), /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "Pause"
+    name: l('Pause')
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onPause
   }, IconButtonProps), /*#__PURE__*/React.createElement(IconPause, null))))), status === 'paused' && /*#__PURE__*/React.createElement(Fade, {
     in: true,
     add: true
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "Stop"
+    name: l('Stop')
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onStop
   }, IconButtonProps), /*#__PURE__*/React.createElement(IconStop, null))), /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: "Resume"
+    name: l('Resume')
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onResume
   }, IconButtonProps), /*#__PURE__*/React.createElement(IconStart, null)))))));

package/esm/DatePicker/DatePicker.js

@@ -117,6 +117,7 @@ export const SEPARATOR_SYMBOL = `–`;
 export const SEPARATOR = ` ${SEPARATOR_SYMBOL} `;
 const DatePicker = /*#__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?.onesyDatePicker?.props?.default), props__), [props__]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
@@ -154,12 +155,12 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
       nameFrom,
       nameTo,
       label: label_,
-      labelFrom: labelFrom_ = `Date from`,
-      labelTo: labelTo_ = `Date to`,
-      modeModalSubHeadingText = 'Select date',
-      modeModalSubHeadingTextRange = `Date from${SEPARATOR}Date to`,
-      selectModeHeadingText = 'Select date',
-      inputModeHeadingText = 'Enter date',
+      labelFrom: labelFrom_ = l('Date from'),
+      labelTo: labelTo_ = l('Date to'),
+      modeModalSubHeadingText = l('Select date'),
+      modeModalSubHeadingTextRange = `${l('Date from')}${SEPARATOR}${l('Date to')}`,
+      selectModeHeadingText = l('Select date'),
+      inputModeHeadingText = l('Enter date'),
       useHelperText: useHelperText_,
       weekStartDay = 'Monday',
       switch: switch__,
@@ -516,17 +517,17 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     align: "center"
   }, today && /*#__PURE__*/React.createElement(Button, _extends({
     onClick: onToday
-  }, buttonProps), "Today"), clear && /*#__PURE__*/React.createElement(Button, _extends({
+  }, buttonProps), l('Today')), clear && /*#__PURE__*/React.createElement(Button, _extends({
     onClick: onClear
-  }, buttonProps), "Clear")), /*#__PURE__*/React.createElement(Line, {
+  }, buttonProps), l('Clear'))), /*#__PURE__*/React.createElement(Line, {
     gap: 0,
     direction: "row",
     align: "center"
   }, /*#__PURE__*/React.createElement(Button, _extends({
     onClick: onCancel
-  }, buttonProps), "Cancel"), /*#__PURE__*/React.createElement(Button, _extends({
+  }, buttonProps), l('Cancel')), /*#__PURE__*/React.createElement(Button, _extends({
     onClick: onOk
-  }, buttonProps), "Ok")));
+  }, buttonProps), l('Ok'))));
   const moreProps = {};
   if (version === 'desktop') {
     moreProps.end = /*#__PURE__*/React.createElement(IconButton, _extends({
@@ -534,7 +535,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
       color: color,
       version: "text",
       onClick: onOpen,
-      "aria-label": `Choose date${range ? ' range' : ''}`,
+      "aria-label": `${l('Choose date')}${range ? ' range' : ''}`,
       disabled: disabled || readOnly
     }, iconButtonProps), /*#__PURE__*/React.createElement(Icon_, IconProps));
   }
@@ -545,7 +546,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
   if (range) {
     textHeading = `${format(value[0], 'MMM')} ${format(value[0], 'DD')}${SEPARATOR}${format(value[1], 'MMM')} ${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 = /*#__PURE__*/React.createElement(Surface, _extends({
     color: "default",
     tonal: tonal,
@@ -571,10 +572,10 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     color: "inherit",
     version: "text",
     onClick: onClose,
-    "aria-label": "Close"
+    "aria-label": l('Close')
   }, iconButtonProps), /*#__PURE__*/React.createElement(IconClose, IconProps)), /*#__PURE__*/React.createElement(Button, _extends({
     onClick: onOk
-  }, buttonProps), "Save")), heading_ && /*#__PURE__*/React.createElement(Type, {
+  }, buttonProps), l('Save'))), heading_ && /*#__PURE__*/React.createElement(Type, {
     version: "l2",
     className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-subheading'], classes.subheading, fullScreen && classes.subheading_fullScreen])
   }, !range ? modeModalSubHeadingText : modeModalSubHeadingTextRange), mode === 'select' && /*#__PURE__*/React.createElement(Line, {
@@ -585,12 +586,12 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
   }, /*#__PURE__*/React.createElement(Type, {
     version: "h1"
   }, textHeading), switch_ && /*#__PURE__*/React.createElement(Tooltip, {
-    label: "Enter date"
+    name: l('Enter date')
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
     tonal: tonal,
     color: "inherit",
     onClick: () => onMode('input'),
-    "aria-label": "Enter date"
+    "aria-label": l('Enter date')
   }, iconButtonProps), /*#__PURE__*/React.createElement(IconEnter, IconProps)))), mode === 'input' && /*#__PURE__*/React.createElement(Line, {
     direction: "row",
     align: "flex-start",
@@ -599,12 +600,12 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
   }, /*#__PURE__*/React.createElement(Type, {
     version: "h1"
   }, inputModeHeadingText), switch_ && /*#__PURE__*/React.createElement(Tooltip, {
-    label: "Select date"
+    name: l('Select date')
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
     tonal: tonal,
     color: "inherit",
     onClick: () => onMode('select'),
-    "aria-label": "Choose date"
+    "aria-label": l('Select date')
   }, iconButtonProps), /*#__PURE__*/React.createElement(Icon_, IconProps))))), mode === 'select' && fullScreen && /*#__PURE__*/React.createElement(Line, {
     gap: 0,
     direction: "row",
@@ -657,7 +658,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     color: color,
     version: "outlined",
     size: size,
-    label: label,
+    name: label,
     mask: mask,
     placeholder: placeholder,
     value: inputModal,
@@ -714,7 +715,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     color: color,
     version: "outlined",
     size: size,
-    label: label,
+    name: label,
     mask: mask,
     placeholder: placeholder,
     value: input,
@@ -742,7 +743,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     longPress: false,
     maxWidth: "unset",
     noMargin: true,
-    label: /*#__PURE__*/React.createElement(ClickListener, {
+    name: /*#__PURE__*/React.createElement(ClickListener, {
       onClickOutside: onCancel,
       includeParentQueries: ['.onesy-Calendar-list']
     }, desktop)

package/esm/DateTimePicker/DateTimePicker.js

@@ -51,6 +51,7 @@ const useStyle = styleMethod(theme => ({
 });
 const DateTimePicker = /*#__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?.onesyDateTimePicker?.props?.default), props__), [props__]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const AdvancedTextField = React.useMemo(() => theme?.elements?.AdvancedTextField || AdvancedTextFieldElement, [theme]);
@@ -78,7 +79,7 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
       min,
       max,
       validate,
-      headingText = 'Select date & time',
+      headingText = l('Select date & time'),
       headingTextTime,
       headingTextTimeRange,
       headingTextDate,
@@ -512,17 +513,17 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     direction: "row",
     align: "center"
   }, /*#__PURE__*/React.createElement(Tooltip, {
-    label: tab === 'date' ? 'Time' : 'Date'
+    name: tab === 'date' ? l('Time') : l('Date')
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
     tonal: tonal,
     color: "inherit",
     onClick: onPickSwitch,
-    "aria-label": tab === 'date' ? 'Time' : 'Date'
+    "aria-label": tab === 'date' ? l('Time') : l('Date')
   }, iconButtonProps), tab === 'date' ? /*#__PURE__*/React.createElement(IconTime, IconProps) : /*#__PURE__*/React.createElement(IconDate, IconProps))), today && /*#__PURE__*/React.createElement(Button, _extends({
     onClick: onToday
-  }, buttonProps), "Today"), clear && /*#__PURE__*/React.createElement(Button, _extends({
+  }, buttonProps), l('Today')), clear && /*#__PURE__*/React.createElement(Button, _extends({
     onClick: onClear
-  }, buttonProps), "Clear")), /*#__PURE__*/React.createElement(Line, {
+  }, buttonProps), l('Clear'))), /*#__PURE__*/React.createElement(Line, {
     gap: 0,
     direction: "row",
     align: "center"
@@ -531,12 +532,12 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     color: color,
     version: "text",
     onClick: onCancel
-  }, buttonProps), "Cancel"), /*#__PURE__*/React.createElement(Button, _extends({
+  }, buttonProps), l('Cancel')), /*#__PURE__*/React.createElement(Button, _extends({
     tonal: tonal,
     color: color,
     version: "text",
     onClick: onOk
-  }, buttonProps), "Ok")));
+  }, buttonProps), l('Ok'))));
   const heading = (range ? tab === 'date' ? headingTextDateRange : headingTextTimeRange : tab === 'date' ? headingTextDate : headingTextTime) || headingText;
   const PickerProps = _objectSpread(_objectSpread(_objectSpread({
     value,
@@ -583,7 +584,7 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
       color: color,
       version: "text",
       onClick: onOpen,
-      "aria-label": "Choose date and time",
+      "aria-label": l('Choose date and time'),
       disabled: disabled || readOnly
     }, iconButtonProps), /*#__PURE__*/React.createElement(Icon_, IconProps));
   }
@@ -607,7 +608,7 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     tonal: tonal,
     color: color,
     version: "outlined",
-    label: label,
+    name: label,
     mask: mask,
     placeholder: placeholder,
     value: input,
@@ -635,7 +636,7 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     longPress: false,
     maxWidth: "unset",
     noMargin: true,
-    label: /*#__PURE__*/React.createElement(ClickListener, {
+    name: /*#__PURE__*/React.createElement(ClickListener, {
       onClickOutside: onCancel,
       includeParentQueries: ['.onesy-DateTimePicker-main', '.onesy-Calendar-list']
     }, element)

package/esm/Drawing/Drawing.js

@@ -117,6 +117,7 @@ const useStyle = styleMethod(theme => ({
 });
 const Drawing = /*#__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?.onesyDrawing?.props?.default), props__), [props__]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
@@ -425,7 +426,7 @@ const Drawing = /*#__PURE__*/React.forwardRef((props__, ref) => {
       other_ = _objectWithoutProperties(props_, _excluded2);
     return /*#__PURE__*/React.createElement(Tooltip, _extends({
       open: open_ !== undefined ? open_ : undefined,
-      label: label
+      name: label
     }, TooltipProps), /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, other_), children.props)));
   }), []);
   const WrapperAppend = React.useCallback(props_ => {
@@ -520,7 +521,7 @@ const Drawing = /*#__PURE__*/React.forwardRef((props__, ref) => {
     }, /*#__PURE__*/React.createElement(ColorTextField, _extends({
       tonal: tonal,
       color: color,
-      label: "Custom color",
+      name: l('Custom color'),
       version: "outlined",
       size: "small",
       value: refs.inputValues.current[version_],
@@ -536,7 +537,7 @@ const Drawing = /*#__PURE__*/React.forwardRef((props__, ref) => {
         onUpdate(refs.inputValues.current[version_]);
         onClose();
       }
-    }, "Apply")));
+    }, l('Apply'))));
   }), []);
   const valueNew_ = (is('array', value) ? value : [value]).filter(Boolean);
   const valueNewActive = mouseDown && valueNew_[valueNew_.length - 1];
@@ -634,7 +635,7 @@ const Drawing = /*#__PURE__*/React.forwardRef((props__, ref) => {
     align: "center",
     justify: "flex-start"
   }, includes('stroke-width') && /*#__PURE__*/React.createElement(Select, _extends({
-    label: "Stroke Width",
+    name: l('Stroke Width'),
     valueDefault: stroke_width.find(item => String(item.value).includes('1')).value,
     value: inputValues['strokeWidth'],
     onChange: valueNew => updateInputValues('strokeWidth', valueNew)
@@ -659,7 +660,7 @@ const Drawing = /*#__PURE__*/React.forwardRef((props__, ref) => {
       onUpdate: valueNew => updateInputValues('strokeColor', valueNew)
     }, PaletteProps)))
   }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-    label: "Stroke Color",
+    name: l('Stroke Color'),
     open: refs.open.current.strokeColor ? false : undefined
   }, is('function', render) ? render('stroke-color', ToggleButtonProps, refs.value.current) : /*#__PURE__*/React.createElement(ToggleButton, _extends({
     ref: refs.elements.strokeColor
@@ -684,7 +685,7 @@ const Drawing = /*#__PURE__*/React.forwardRef((props__, ref) => {
       align: "center",
       justify: "center"
     }, /*#__PURE__*/React.createElement(NumericTextField, {
-      label: "Width",
+      name: l('Width'),
       tonal: tonal,
       color: color,
       size: "small",
@@ -695,7 +696,7 @@ const Drawing = /*#__PURE__*/React.forwardRef((props__, ref) => {
       value: refs.inputValues.current.widthInput,
       onChange: valueNew => updateInputValues('widthInput', !valueNew ? 1 : valueNew)
     }), "\xD7", /*#__PURE__*/React.createElement(NumericTextField, {
-      label: "Height",
+      name: l('Height'),
       tonal: tonal,
       color: color,
       size: "small",
@@ -731,7 +732,7 @@ const Drawing = /*#__PURE__*/React.forwardRef((props__, ref) => {
       }
     }, "Update"))))
   }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
-    label: "Size",
+    name: l('Size'),
     open: refs.open.current.size ? false : undefined
   }, is('function', render) ? render('size', ToggleButtonProps, refs.value.current) : /*#__PURE__*/React.createElement(ToggleButton, _extends({
     ref: refs.elements.size
@@ -760,7 +761,7 @@ const Drawing = /*#__PURE__*/React.forwardRef((props__, ref) => {
     align: "center",
     justify: "flex-start"
   }, includes('clear') && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, includes('clear') && /*#__PURE__*/React.createElement(WrapperToggleButton, {
-    label: "Clear"
+    name: l('Clear')
   }, is('function', render) ? render('clear', ToggleButtonProps, refs.value.current) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
     onClick: onClear
   }), /*#__PURE__*/React.createElement(IconClear, IconProps))))), /*#__PURE__*/React.createElement(Line, {
@@ -769,7 +770,7 @@ const Drawing = /*#__PURE__*/React.forwardRef((props__, ref) => {
     align: "center",
     justify: "flex-start"
   }, includes('download') && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, includes('download') && /*#__PURE__*/React.createElement(WrapperToggleButton, {
-    label: "Download"
+    name: l('Download')
   }, is('function', render) ? render('download', ToggleButtonProps, refs.value.current) : /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
     loading: loading,
     onClick: onDownload

package/esm/DropZone/DropZone.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "version", "start", "files", "multiple", "max", "allowedTypes", "valueDefault", "value", "onChange", "IconStart", "onFocus", "onBlur", "onDrop", "onDragOver", "onDragEnter", "onDragLeave", "disabled", "children", "className"];
+const _excluded = ["tonal", "color", "version", "start", "files", "multiple", "max", "allowedTypes", "dropText", "valueDefault", "value", "onChange", "IconStart", "onFocus", "onBlur", "onDrop", "onDragOver", "onDragEnter", "onDragLeave", "disabled", "children", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -45,6 +45,7 @@ const useStyle = styleMethod(theme => ({
 });
 const DropZone = /*#__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?.onesyDropZone?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const FileChoose = React.useMemo(() => theme?.elements?.FileChoose || FileChooseElement, [theme]);
@@ -60,6 +61,7 @@ const DropZone = /*#__PURE__*/React.forwardRef((props_, ref) => {
       multiple,
       max,
       allowedTypes,
+      dropText = l('Drop files here'),
       valueDefault,
       value: value_,
       onChange: onChange_,
@@ -210,7 +212,7 @@ const DropZone = /*#__PURE__*/React.forwardRef((props_, ref) => {
     className: classNames([staticClassName('DropZone', theme) && ['onesy-DropZone-wrapper-text'], classes.wrapperText])
   }, /*#__PURE__*/React.createElement(IconStart, null), /*#__PURE__*/React.createElement(Type, {
     version: "t1"
-  }, "Drop files here")));
+  }, dropText)));
 });
 DropZone.displayName = 'onesy-DropZone';
 export default DropZone;