@onesy/ui-react 1.0.59 → 1.0.60

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;

package/esm/Emojis/Emojis.js

@@ -144,6 +144,7 @@ const useStyle = styleMethod(theme => ({
 });
 const Emojis = /*#__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?.onesyEmojis?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Menu = React.useMemo(() => theme?.elements?.Menu || MenuElement, [theme]);
@@ -155,39 +156,41 @@ const Emojis = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Tab = React.useMemo(() => theme?.elements?.Tab || TabElement, [theme]);
   const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
   const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const EMOJI_CATEGORIES = [{
-    "name": "Smileys and People",
-    "groups": ["Smiley", "Gesture", "Person", "Clothing"],
-    "icon": /*#__PURE__*/React.createElement(IconMaterialMood, null)
-  }, {
-    "name": "Animals and Nature",
-    "groups": ["Animal", "Nature"],
-    "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiNature, null)
-  }, {
-    "name": "Food and Drink",
-    "groups": ["Food"],
-    "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiFoodBeverage, null)
-  }, {
-    "name": "Activity",
-    "groups": ["Activity"],
-    "icon": /*#__PURE__*/React.createElement(IconMaterialHiking, null)
-  }, {
-    "name": "Travel and Places",
-    "groups": ["Travel"],
-    "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiTransportation, null)
-  }, {
-    "name": "Objects",
-    "groups": ["Object"],
-    "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiObjects, null)
-  }, {
-    "name": "Symbols",
-    "groups": ["Symbol"],
-    "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiSymbols, null)
-  }, {
-    "name": "Flags and Countries",
-    "groups": ["Flag", "Country"],
-    "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiFlags, null)
-  }];
+  const EMOJI_CATEGORIES = React.useMemo(() => {
+    return [{
+      "name": l("Smileys and People"),
+      "groups": ["Smiley", "Gesture", "Person", "Clothing"],
+      "icon": /*#__PURE__*/React.createElement(IconMaterialMood, null)
+    }, {
+      "name": l("Animals and Nature"),
+      "groups": ["Animal", "Nature"],
+      "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiNature, null)
+    }, {
+      "name": l("Food and Drink"),
+      "groups": ["Food"],
+      "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiFoodBeverage, null)
+    }, {
+      "name": l("Activity"),
+      "groups": ["Activity"],
+      "icon": /*#__PURE__*/React.createElement(IconMaterialHiking, null)
+    }, {
+      "name": l("Travel and Places"),
+      "groups": ["Travel"],
+      "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiTransportation, null)
+    }, {
+      "name": l("Objects"),
+      "groups": ["Object"],
+      "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiObjects, null)
+    }, {
+      "name": l("Symbols"),
+      "groups": ["Symbol"],
+      "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiSymbols, null)
+    }, {
+      "name": l("Flags and Countries"),
+      "groups": ["Flag", "Country"],
+      "icon": /*#__PURE__*/React.createElement(IconMaterialEmojiFlags, null)
+    }];
+  }, []);
   const {
       tonal = true,
       color = 'themed',
@@ -302,7 +305,7 @@ const Emojis = /*#__PURE__*/React.forwardRef((props_, ref) => {
     fullWidth: true,
     className: classes.header
   }, search_ && /*#__PURE__*/React.createElement(TextField, {
-    name: "Search",
+    name: l('Search'),
     version: "outlined",
     value: search || '',
     onChange: onChangeSearch,

package/esm/Frame/Frame.js

@@ -53,6 +53,7 @@ const useStyle = styleMethod(theme => ({
 });
 const Frame = /*#__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?.onesyFrame?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
@@ -89,19 +90,19 @@ const Frame = /*#__PURE__*/React.forwardRef((props_, ref) => {
     });
   }, []);
   const responsiveOptions = [{
-    name: 'Mobile',
+    name: l('Mobile'),
     icon: IconMobile,
     disabled: isEnvironment('browser') && window.innerWidth < 375
   }, {
-    name: 'Tablet',
+    name: l('Tablet'),
     icon: IconTablet,
     disabled: isEnvironment('browser') && window.innerWidth < 768
   }, {
-    name: 'Laptop',
+    name: l('Laptop'),
     icon: IconLaptop,
     disabled: isEnvironment('browser') && window.innerWidth < 1440
   }, {
-    name: 'Desktop',
+    name: l('Desktop'),
     icon: IconDesktop,
     disabled: isEnvironment('browser') && window.innerWidth < 1920
   }];
@@ -172,7 +173,7 @@ const Frame = /*#__PURE__*/React.forwardRef((props_, ref) => {
     className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-options'], OptionsProps?.className, classes.options])
   }), startOptions, responsiveOptions.map((item, index) => /*#__PURE__*/React.createElement(Tooltip, {
     key: index,
-    label: item.name
+    name: item.name
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
     size: "small",
     selected: item.name === responsive,