@onesy/ui-react 1.0.196 → 1.0.197

package/DatePicker/DatePicker.js

@@ -143,19 +143,19 @@ const DatePicker = props__ => {
       ref,
       tonal,
       color = 'primary',
-      version: version_ = 'auto',
+      version: versionProps = 'auto',
       size = 'regular',
       value: valueProps,
       valueDefault,
       onChange,
-      calendar: calendar_,
+      calendar: calendarProps,
       calendarDefault,
       onChangeCalendar,
       range,
       now,
-      static: static_,
+      static: staticProps,
       openMobile = 'select',
-      placeholder: placeholder_,
+      placeholder: placeholderProps,
       calendars = props.range ? 2 : 1,
       min,
       max,
@@ -163,31 +163,31 @@ const DatePicker = props__ => {
       name,
       nameFrom,
       nameTo,
-      label: label_,
-      labelFrom: labelFrom_ = l('Date from'),
-      labelTo: labelTo_ = l('Date to'),
+      label: labelProps,
+      labelFrom: labelFromProps = l('Date from'),
+      labelTo: labelToProps = 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_,
+      useHelperText: useHelperTextProps,
       weekStartDay = 'Monday',
-      switch: switch__,
+      switch: switchProps,
       fullScreen,
       today,
       clear = true,
-      heading: heading_ = true,
-      actions: actions_ = true,
+      heading: headingProps = true,
+      actions: actionsProps = true,
       fullWidth,
       readOnly,
       disabled,
-      valid: valid_,
-      onClick: onClick_,
-      onClose: onClose_,
-      onToday: onToday_,
-      onClear: onClear_,
-      onCancel: onCancel_,
-      onOk: onOk_,
+      valid: validProps,
+      onClick: onClickProps,
+      onClose: onCloseProps,
+      onToday: onTodayProps,
+      onClear: onClearProps,
+      onCancel: onCancelProps,
+      onOk: onOkProps,
       Icon: Icon_ = _IconMaterialCalendarTodayW100Filled.default,
       IconEnter = _IconMaterialEditW.default,
       IconClose = _IconMaterialCloseW.default,
@@ -213,21 +213,21 @@ const DatePicker = props__ => {
   };
   const keys = _react.default.useMemo(() => {
     const result = [];
-    const items = [switch__, useHelperText_];
+    const items = [switchProps, useHelperTextProps];
     items.forEach(item => {
       if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return (0, _utils.unique)(result);
-  }, [switch__, useHelperText_]);
+  }, [switchProps, useHelperTextProps]);
   const breakpoints = {};
   keys.forEach(key_1 => {
     breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
-  const label = name !== undefined ? name : label_;
-  const switch_ = (0, _utils2.valueBreakpoints)(switch__, true, breakpoints, theme);
-  const useHelperText = (0, _utils2.valueBreakpoints)(useHelperText_, undefined, breakpoints, theme);
+  const label = name !== undefined ? name : labelProps;
+  const switch_ = (0, _utils2.valueBreakpoints)(switchProps, true, breakpoints, theme);
+  const useHelperText = (0, _utils2.valueBreakpoints)(useHelperTextProps, undefined, breakpoints, theme);
   const touch = (0, _useMediaQuery.default)('(pointer: coarse)', {
     element: refs.root.current
   });
@@ -240,7 +240,7 @@ const DatePicker = props__ => {
     const valueResult = (valueDefault !== undefined ? valueDefault : valueProps) || now && (range ? [new _date.OnesyDate(), new _date.OnesyDate()] : [new _date.OnesyDate()]);
     return onResolveValue(valueResult);
   });
-  const [calendar, setCalendar] = _react.default.useState((calendarDefault !== undefined ? calendarDefault : calendar_) || new _date.OnesyDate());
+  const [calendar, setCalendar] = _react.default.useState((calendarDefault !== undefined ? calendarDefault : calendarProps) || new _date.OnesyDate());
   const [open, setOpen] = _react.default.useState(false);
   const [mode, setMode] = _react.default.useState((touch ? openMobile : 'select') || 'select');
   const [error, setError] = _react.default.useState(false);
@@ -261,7 +261,7 @@ const DatePicker = props__ => {
   };
   const [input, setInput] = _react.default.useState(valueToInput());
   const [inputModal, setInputModal] = _react.default.useState(valueToInput());
-  let version = version_;
+  let version = versionProps;
   if (version === 'auto') {
     if (touch) version = 'mobile';else version = 'desktop';
   }
@@ -299,8 +299,8 @@ const DatePicker = props__ => {
 
   // Calendar
   _react.default.useEffect(() => {
-    if (calendar_ !== undefined && calendar_ !== calendar) setCalendar(calendar_);
-  }, [calendar_]);
+    if (calendarProps !== undefined && calendarProps !== calendar) setCalendar(calendarProps);
+  }, [calendarProps]);
   const onUpdate = (valueNew_3, triggerOnChange = true) => {
     // Inner update
     if (!props.hasOwnProperty('value') || !triggerOnChange) setValue(valueNew_3);
@@ -319,7 +319,7 @@ const DatePicker = props__ => {
   const onCalendarChange = valueNew__0 => {
     const valueNew_5 = onResolveValue(valueNew__0);
     if (valueNew_5 !== value) {
-      (!actions_ ? onUpdate : setValue)(valueNew_5);
+      (!actionsProps ? onUpdate : setValue)(valueNew_5);
 
       // Update input modal
       setInputModal(valueToInput(valueNew_5));
@@ -342,7 +342,7 @@ const DatePicker = props__ => {
   };
   const onClose = event => {
     setOpen(false);
-    if ((0, _utils.is)('function', onClose_)) onClose_(event);
+    if ((0, _utils.is)('function', onCloseProps)) onCloseProps(event);
   };
   const onReset = () => {
     var _valueNew_;
@@ -390,7 +390,7 @@ const DatePicker = props__ => {
     // Update input modal
     setInputModal(valueToInput(valueNew_9));
     onClose(event_0);
-    if ((0, _utils.is)('function', onToday_)) onToday_(event_0);
+    if ((0, _utils.is)('function', onTodayProps)) onTodayProps(event_0);
   };
   const onClear = event_1 => {
     const dateNow_1 = new _date.OnesyDate();
@@ -408,7 +408,7 @@ const DatePicker = props__ => {
     // Update input modal
     setInputModal(valueToInput(valueNew_10));
     onClose(event_1);
-    if ((0, _utils.is)('function', onClear_)) onClear_(event_1);
+    if ((0, _utils.is)('function', onClearProps)) onClearProps(event_1);
   };
   const onOk = event_2 => {
     // Error
@@ -423,15 +423,15 @@ const DatePicker = props__ => {
     // Update input modal
     setInputModal(valueToInput(value));
     onClose(event_2);
-    if ((0, _utils.is)('function', onOk_)) onOk_(event_2);
+    if ((0, _utils.is)('function', onOkProps)) onOkProps(event_2);
   };
   const onCancel = event_3 => {
     onReset();
     onClose(event_3);
-    if ((0, _utils.is)('function', onCancel_)) onCancel_(event_3);
+    if ((0, _utils.is)('function', onCancelProps)) onCancelProps(event_3);
   };
   const valid = (...args) => {
-    if ((0, _utils.is)('function', valid_)) return valid_(...args);
+    if ((0, _utils.is)('function', validProps)) return validProps(...args);
     const onesyDate = args[0];
     if (min || max || validate) {
       let response = true;
@@ -513,7 +513,7 @@ const DatePicker = props__ => {
     mask.push(' ', SEPARATOR_SYMBOL, ' ', ...mask);
     placeholder += `${SEPARATOR}${placeholder}`;
   }
-  placeholder = placeholder_ || placeholder;
+  placeholder = placeholderProps || placeholder;
   const buttonProps = _objectSpread({
     color: 'inherit',
     version: 'text',
@@ -602,7 +602,7 @@ const DatePicker = props__ => {
       gap: 0,
       direction: "column",
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('DatePicker', theme) && ['onesy-DatePicker-header'], classes.header, fullScreen && classes.header_fullScreen]),
-      children: [actions_ && fullScreen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+      children: [actionsProps && fullScreen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
         gap: 0,
         direction: "row",
         align: "center",
@@ -624,7 +624,7 @@ const DatePicker = props__ => {
         }, buttonProps), {}, {
           children: l('Save')
         }))]
-      }), heading_ && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+      }), headingProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
         version: "l2",
         className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('DatePicker', theme) && ['onesy-DatePicker-subheading'], classes.subheading, fullScreen && classes.subheading_fullScreen]),
         children: !range ? modeModalSubHeadingText : modeModalSubHeadingTextRange
@@ -735,7 +735,7 @@ const DatePicker = props__ => {
     }), fullScreen && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
       tonal: false,
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('DatePicker', theme) && ['onesy-DatePicker-divider'], classes.divider])
-    }), actions_ && /*#__PURE__*/_react.default.cloneElement(actions, {
+    }), actionsProps && /*#__PURE__*/_react.default.cloneElement(actions, {
       style: {
         paddingTop: theme.methods.space.value(1, 'px')
       }
@@ -756,11 +756,11 @@ const DatePicker = props__ => {
     min: min,
     max: max,
     validate: validate,
-    belowCalendars: actions_ ? actions : undefined
+    belowCalendars: actionsProps ? actions : undefined
   }, CalendarProps), CalendarPropsDesktop), {}, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('DatePicker', theme) && ['onesy-DatePicker-calendar', 'onesy-DatePicker-version-desktop'], CalendarProps === null || CalendarProps === void 0 ? void 0 : CalendarProps.className, CalendarPropsDesktop === null || CalendarPropsDesktop === void 0 ? void 0 : CalendarPropsDesktop.className, classes.calendar, classes.calendar_desktop])
   }));
-  if (static_) {
+  if (staticProps) {
     if (version === 'mobile') return mobile;
     if (version === 'desktop') return desktop;
   }

package/DateTimePicker/DateTimePicker.js

@@ -77,14 +77,14 @@ const DateTimePicker = props__ => {
       ref,
       tonal,
       color = 'primary',
-      version: version_ = 'auto',
-      value: value_,
+      version: versionProps = 'auto',
+      value: valueProps,
       valueDefault,
       onChange,
       label,
       range,
       now,
-      static: static_,
+      static: staticProps,
       min,
       max,
       validate,
@@ -93,7 +93,7 @@ const DateTimePicker = props__ => {
       headingTextTimeRange,
       headingTextDate,
       headingTextDateRange,
-      useHelperText: useHelperText_,
+      useHelperText: useHelperTextProps,
       format = '12',
       hour = true,
       minute = true,
@@ -101,16 +101,16 @@ const DateTimePicker = props__ => {
       today,
       clear = true,
       size,
-      placeholder: placeholder_,
+      placeholder: placeholderProps,
       fullWidth,
       readOnly,
       disabled,
-      valid: valid_,
-      onClose: onClose_,
-      onToday: onToday_,
-      onClear: onClear_,
-      onCancel: onCancel_,
-      onOk: onOk_,
+      valid: validProps,
+      onClose: onCloseProps,
+      onToday: onTodayProps,
+      onClear: onClearProps,
+      onCancel: onCancelProps,
+      onOk: onOkProps,
       Icon: Icon_ = _IconMaterialDateRangeW100Filled.default,
       IconDate = _IconMaterialCalendarTodayW100Filled.default,
       IconTime = _IconMaterialScheduleW.default,
@@ -124,7 +124,7 @@ const DateTimePicker = props__ => {
       ModeDesktopProps,
       ModeMobileProps,
       ButtonProps,
-      PickerProps: PickerProps_,
+      PickerProps: PickerPropsProps,
       MiddleProps,
       MainProps,
       IconProps,
@@ -140,19 +140,19 @@ const DateTimePicker = props__ => {
   };
   const keys = _react.default.useMemo(() => {
     const result = [];
-    const items = [useHelperText_];
+    const items = [useHelperTextProps];
     items.forEach(item => {
       if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return (0, _utils.unique)(result);
-  }, [useHelperText_]);
+  }, [useHelperTextProps]);
   const breakpoints = {};
   keys.forEach(key_1 => {
     breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
-  const useHelperText = (0, _utils2.valueBreakpoints)(useHelperText_, undefined, breakpoints, theme);
+  const useHelperText = (0, _utils2.valueBreakpoints)(useHelperTextProps, undefined, breakpoints, theme);
   const touch = (0, _useMediaQuery.default)('(pointer: coarse)', {
     element: refs.root.current
   });
@@ -162,7 +162,7 @@ const DateTimePicker = props__ => {
     return sorted;
   };
   const [value, setValue] = _react.default.useState(() => {
-    const valueResult = (valueDefault !== undefined ? valueDefault : value_) || now && (range ? [new _date.OnesyDate(), new _date.OnesyDate()] : [new _date.OnesyDate()]);
+    const valueResult = (valueDefault !== undefined ? valueDefault : valueProps) || now && (range ? [new _date.OnesyDate(), new _date.OnesyDate()] : [new _date.OnesyDate()]);
     return onResolveValue(valueResult);
   });
   const [calendar, setCalendar] = _react.default.useState(value[0]);
@@ -194,7 +194,7 @@ const DateTimePicker = props__ => {
     return result_0;
   };
   const [input, setInput] = _react.default.useState(valueToInput());
-  let version = version_;
+  let version = versionProps;
   if (version === 'auto') {
     if (touch) version = 'mobile';else version = 'desktop';
   }
@@ -218,8 +218,8 @@ const DateTimePicker = props__ => {
 
   // Value
   _react.default.useEffect(() => {
-    if (value_ !== undefined && value_ !== value) onUpdateValue(value_);
-  }, [value_]);
+    if (valueProps !== undefined && valueProps !== value) onUpdateValue(valueProps);
+  }, [valueProps]);
   const onUpdate = (valueNew_3, triggerOnChange = true) => {
     // Inner update
     if (!props.hasOwnProperty('value') || !triggerOnChange) setValue(valueNew_3);
@@ -327,7 +327,7 @@ const DateTimePicker = props__ => {
     // Update input
     setInput(valueToInput(valueNew_10));
     onClose(event);
-    if ((0, _utils.is)('function', onToday_)) onToday_(event);
+    if ((0, _utils.is)('function', onTodayProps)) onTodayProps(event);
   };
   const onClear = event_0 => {
     const valueNew_11 = [];
@@ -338,7 +338,7 @@ const DateTimePicker = props__ => {
     // Update input
     setInput(valueToInput(valueNew_11));
     onClose(event_0);
-    if ((0, _utils.is)('function', onClear_)) onClear_(event_0);
+    if ((0, _utils.is)('function', onClearProps)) onClearProps(event_0);
   };
   const onOk = event_1 => {
     // Error
@@ -350,22 +350,22 @@ const DateTimePicker = props__ => {
     // Update input
     setInput(valueToInput(value));
     onClose(event_1);
-    if ((0, _utils.is)('function', onOk_)) onOk_(event_1);
+    if ((0, _utils.is)('function', onOkProps)) onOkProps(event_1);
   };
   const onCancel = event_2 => {
     onReset();
     onClose(event_2);
-    if ((0, _utils.is)('function', onCancel_)) onCancel_(event_2);
+    if ((0, _utils.is)('function', onCancelProps)) onCancelProps(event_2);
   };
   const onOpen = () => {
     setOpen(previous_0 => !previous_0);
   };
   const onClose = event_3 => {
     setOpen(false);
-    if ((0, _utils.is)('function', onClose_)) onClose_(event_3);
+    if ((0, _utils.is)('function', onCloseProps)) onCloseProps(event_3);
   };
   const valid = (...args) => {
-    if ((0, _utils.is)('function', valid_)) return valid_(...args);
+    if ((0, _utils.is)('function', validProps)) return validProps(...args);
     const onesyDate_0 = args[0];
     if (min || max || validate) {
       let response = true;
@@ -505,7 +505,7 @@ const DateTimePicker = props__ => {
     }
     placeholder += `${_DatePicker2.SEPARATOR}${placeholder}`;
   }
-  placeholder = placeholder_ || placeholder;
+  placeholder = placeholderProps || placeholder;
   const buttonProps = _objectSpread({
     tonal,
     color,
@@ -580,7 +580,7 @@ const DateTimePicker = props__ => {
     heading: false,
     readOnly,
     disabled
-  }, PickerProps_), tab === 'date' && DatePickerProps), tab === 'time' && TimePickerProps);
+  }, PickerPropsProps), tab === 'date' && DatePickerProps), tab === 'time' && TimePickerProps);
   const element = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, {
     gap: 0,
     direction: "column",
@@ -623,7 +623,7 @@ const DateTimePicker = props__ => {
   if (version === 'mobile') {
     if (!(readOnly || disabled)) moreProps.onClick = onOpen;
   }
-  if (static_) return element;
+  if (staticProps) return element;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
     gap: 0,
     direction: "column",

package/TimePicker/TimePicker.js

@@ -238,11 +238,11 @@ const TimePicker = props__ => {
       ref,
       tonal,
       color = 'primary',
-      version: version_ = 'auto',
-      value: value_,
+      version: versionProps = 'auto',
+      value: valueProps,
       valueDefault,
       onChange,
-      selecting: selecting_,
+      selecting: selectingProps,
       selectingDefault,
       onChangeSelecting,
       size = 'regular',
@@ -252,37 +252,37 @@ const TimePicker = props__ => {
       min,
       max,
       validate,
-      autoNext: autoNext_,
-      autoCloseOnLast: autoCloseOnLast_,
+      autoNext: autoNextProps,
+      autoCloseOnLast: autoCloseOnLastProps,
       openMobile = 'select',
       openDesktop = 'select',
       selectModalSubHeadingText = l('Select time'),
       selectModalSubHeadingTextRange = `${l('Select from')}${_DatePicker.SEPARATOR}${l('to time')}`,
       inputModalSubHeadingText = l('Enter time'),
       inputModalSubHeadingTextRange = `${l('Enter from')}${_DatePicker.SEPARATOR}${l('to time')}`,
-      orientation: orientation_,
+      orientation: orientationProps,
       format = '12',
       hour = true,
       minute = true,
       second = false,
-      switch: switch__,
-      static: static_,
+      switch: switchProps,
+      static: staticProps,
       today,
       clear = true,
-      placeholder: placeholder_,
-      heading: heading_ = true,
-      actions: actions_ = true,
+      placeholder: placeholderProps,
+      heading: headingProps = true,
+      actions: actionsProps = true,
       fullWidth,
       readOnly,
       disabled,
-      valid: valid_,
-      onClick: onClick_,
-      onClose: onClose_,
-      onCancel: onCancel_,
-      onNow: onNow_,
-      onToday: onToday_,
-      onClear: onClear_,
-      onOk: onOk_,
+      valid: validProps,
+      onClick: onClickProps,
+      onClose: onCloseProps,
+      onCancel: onCancelProps,
+      onNow: onNowProps,
+      onToday: onTodayProps,
+      onClear: onClearProps,
+      onOk: onOkProps,
       renderValue,
       Icon: Icon_ = _IconMaterialScheduleW.default,
       IconEnter = _IconMaterialKeyboardAltW.default,
@@ -316,22 +316,22 @@ const TimePicker = props__ => {
   };
   const keys = _react.default.useMemo(() => {
     const result = [];
-    const items = [switch__, orientation_, autoNext_, autoCloseOnLast_];
+    const items = [switchProps, orientationProps, autoNextProps, autoCloseOnLastProps];
     items.forEach(item => {
       if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return (0, _utils.unique)(result);
-  }, [switch__, orientation_, autoNext_, autoCloseOnLast_]);
+  }, [switchProps, orientationProps, autoNextProps, autoCloseOnLastProps]);
   const breakpoints = {};
   keys.forEach(key_1 => {
     breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
-  const switch_ = (0, _utils2.valueBreakpoints)(switch__, true, breakpoints, theme);
-  const orientation = (0, _utils2.valueBreakpoints)(orientation_, 'vertical', breakpoints, theme);
-  const autoNext = (0, _utils2.valueBreakpoints)(autoNext_, undefined, breakpoints, theme);
-  const autoCloseOnLast = (0, _utils2.valueBreakpoints)(autoCloseOnLast_, undefined, breakpoints, theme);
+  const switch_ = (0, _utils2.valueBreakpoints)(switchProps, true, breakpoints, theme);
+  const orientation = (0, _utils2.valueBreakpoints)(orientationProps, 'vertical', breakpoints, theme);
+  const autoNext = (0, _utils2.valueBreakpoints)(autoNextProps, undefined, breakpoints, theme);
+  const autoCloseOnLast = (0, _utils2.valueBreakpoints)(autoCloseOnLastProps, undefined, breakpoints, theme);
   const touch = (0, _useMediaQuery.default)('(pointer: coarse)', {
     element: refs.root.current
   });
@@ -341,11 +341,11 @@ const TimePicker = props__ => {
     return sorted;
   };
   const [value, setValue] = _react.default.useState(() => {
-    const valueResult = (valueDefault !== undefined ? valueDefault : value_) || now && (range ? [new _date.OnesyDate(), new _date.OnesyDate()] : [new _date.OnesyDate()]);
+    const valueResult = (valueDefault !== undefined ? valueDefault : valueProps) || now && (range ? [new _date.OnesyDate(), new _date.OnesyDate()] : [new _date.OnesyDate()]);
     return onResolveValue(valueResult);
   });
   const [selecting, setSelecting] = _react.default.useState(() => {
-    const valueResult_0 = (selectingDefault !== undefined ? selectingDefault : selecting_) || ['hour', 'hour'];
+    const valueResult_0 = (selectingDefault !== undefined ? selectingDefault : selectingProps) || ['hour', 'hour'];
     return ((0, _utils.is)('array', valueResult_0) ? valueResult_0 : [valueResult_0]).filter(Boolean);
   });
   const [open, setOpen] = _react.default.useState(false);
@@ -375,7 +375,7 @@ const TimePicker = props__ => {
     return result_0;
   };
   const [input, setInput] = _react.default.useState(valueToInput());
-  let version = version_;
+  let version = versionProps;
   if (version === 'auto') {
     if (touch) version = 'mobile';else version = 'desktop';
   }
@@ -404,8 +404,8 @@ const TimePicker = props__ => {
 
   // Value
   _react.default.useEffect(() => {
-    if (value_ !== undefined && value_ !== value) onUpdateValue(value_);
-  }, [value_]);
+    if (valueProps !== undefined && valueProps !== value) onUpdateValue(valueProps);
+  }, [valueProps]);
   const onUpdate = (valueNew__0, triggerOnChange = true) => {
     const valueNew_3 = resolve(valueNew__0);
 
@@ -422,7 +422,7 @@ const TimePicker = props__ => {
     if ((0, _utils.is)('function', onChangeSelecting)) onChangeSelecting(valueNew_4);
   };
   const valid = (...args) => {
-    if ((0, _utils.is)('function', valid_)) return valid_(...args);
+    if ((0, _utils.is)('function', validProps)) return validProps(...args);
     const onesyDate = args[0];
     if (min || max || validate) {
       let response = true;
@@ -463,7 +463,7 @@ const TimePicker = props__ => {
     if ((0, _utils.is)('string', valueTime_0) && valueTime_0.startsWith('0')) valueTime_0 = valueTime_0.slice(1);
     valueTime_0 = +valueTime_0;
     value[index_1] = (0, _date.set)(valueTime_0, unit || selecting[index_1], value[index_1]);
-    (!actions_ ? onUpdate : setValue)(resolve(value));
+    (!actionsProps ? onUpdate : setValue)(resolve(value));
   };
   const resolve = (valueNew_7 = refs.value.current, dayTimeNew = refs.dayTime.current) => {
     const values_0 = onResolveValue(valueNew_7).map((item_4, index_2) => {
@@ -485,7 +485,7 @@ const TimePicker = props__ => {
     dayTimeNew_0[index_3] = valueNew_8;
     refs.dayTime.current = dayTimeNew_0;
     setDayTime(dayTimeNew_0);
-    (!actions_ ? onUpdate : setValue)(resolve(refs.value.current));
+    (!actionsProps ? onUpdate : setValue)(resolve(refs.value.current));
   };
   const inputToValue = (valueNew__3 = input) => {
     let valueNew_9 = valueNew__3;
@@ -519,7 +519,7 @@ const TimePicker = props__ => {
     const valueNew_11 = [...value];
     if (valueNew__5 !== value[index_4]) {
       valueNew_11[index_4] = valueNew__5;
-      (!actions_ ? onUpdate : setValue)(resolve(valueNew_11));
+      (!actionsProps ? onUpdate : setValue)(resolve(valueNew_11));
 
       // Error
       errorCheck(valueNew_11);
@@ -550,7 +550,7 @@ const TimePicker = props__ => {
   };
   const onClose = event => {
     setOpen(false);
-    if ((0, _utils.is)('function', onClose_)) onClose_(event);
+    if ((0, _utils.is)('function', onCloseProps)) onCloseProps(event);
   };
   const onReset = () => {
     const valueNew_14 = inputToValue();
@@ -574,7 +574,7 @@ const TimePicker = props__ => {
     // Update dayTime
     setDayTime(valueNew_15.map(item_8 => (0, _date.format)(item_8, 'a')));
     onClose(event_0);
-    if ((0, _utils.is)('function', onToday_)) onToday_(event_0);
+    if ((0, _utils.is)('function', onTodayProps)) onTodayProps(event_0);
   };
   const onClear = event_1 => {
     const valueNew_16 = [];
@@ -588,7 +588,7 @@ const TimePicker = props__ => {
     // Update dayTime
     setDayTime(valueNew_16.map(item_9 => (0, _date.format)(item_9, 'a')));
     onClose(event_1);
-    if ((0, _utils.is)('function', onClear_)) onClear_(event_1);
+    if ((0, _utils.is)('function', onClearProps)) onClearProps(event_1);
   };
   const onOk = event_2 => {
     // Error
@@ -603,12 +603,12 @@ const TimePicker = props__ => {
     // Update dayTime
     setDayTime(refs.value.current.map(item_10 => (0, _date.format)(item_10, 'a')));
     onClose(event_2);
-    if ((0, _utils.is)('function', onOk_)) onOk_(event_2);
+    if ((0, _utils.is)('function', onOkProps)) onOkProps(event_2);
   };
   const onCancel = event_3 => {
     onReset();
     onClose(event_3);
-    if ((0, _utils.is)('function', onCancel_)) onCancel_(event_3);
+    if ((0, _utils.is)('function', onCancelProps)) onCancelProps(event_3);
   };
   const mask = [];
   let placeholder = '';
@@ -661,7 +661,7 @@ const TimePicker = props__ => {
     mask.push(' ', _DatePicker.SEPARATOR_SYMBOL, ' ', ...mask);
     placeholder += `${_DatePicker.SEPARATOR}${placeholder}`;
   }
-  placeholder = placeholder_ || placeholder;
+  placeholder = placeholderProps || placeholder;
   const buttonProps = _objectSpread({
     color: 'inherit',
     version: 'text',
@@ -915,7 +915,7 @@ const TimePicker = props__ => {
     Component: Line
   }, MainProps), {}, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-main'], MainProps === null || MainProps === void 0 ? void 0 : MainProps.className, classes.main, classes[`main_size_${size}`]]),
-    children: [heading_ && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+    children: [headingProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
       version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-heading'], classes.heading, classes[`heading_size_${size}`]]),
       children: heading
@@ -926,7 +926,7 @@ const TimePicker = props__ => {
       valueDefault: tab,
       onChange: setTab
     }, TabsProps), {}, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-tabs'], TabsProps === null || TabsProps === void 0 ? void 0 : TabsProps.className, classes.tabs, heading_ && classes.tabs_padding]),
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-tabs'], TabsProps === null || TabsProps === void 0 ? void 0 : TabsProps.className, classes.tabs, headingProps && classes.tabs_padding]),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tab, _objectSpread({
         value: 0,
         name: l('From')
@@ -938,12 +938,12 @@ const TimePicker = props__ => {
       gap: 0,
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-middle'], MiddleProps === null || MiddleProps === void 0 ? void 0 : MiddleProps.className, classes.middle, classes[`middle_size_${size}`]]),
       children: elementValues[tab]
-    }), actions_ && actions]
+    }), actionsProps && actions]
   }));
   if (version === 'mobile') {
     if (!(readOnly || disabled)) moreProps.onClick = onOpen;
   }
-  if (static_) return element;
+  if (staticProps) return element;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
     gap: 0,
     direction: "column",

package/esm/DatePicker/DatePicker.js

@@ -135,19 +135,19 @@ const DatePicker = props__ => {
       ref,
       tonal,
       color = 'primary',
-      version: version_ = 'auto',
+      version: versionProps = 'auto',
       size = 'regular',
       value: valueProps,
       valueDefault,
       onChange,
-      calendar: calendar_,
+      calendar: calendarProps,
       calendarDefault,
       onChangeCalendar,
       range,
       now,
-      static: static_,
+      static: staticProps,
       openMobile = 'select',
-      placeholder: placeholder_,
+      placeholder: placeholderProps,
       calendars = props.range ? 2 : 1,
       min,
       max,
@@ -155,31 +155,31 @@ const DatePicker = props__ => {
       name,
       nameFrom,
       nameTo,
-      label: label_,
-      labelFrom: labelFrom_ = l('Date from'),
-      labelTo: labelTo_ = l('Date to'),
+      label: labelProps,
+      labelFrom: labelFromProps = l('Date from'),
+      labelTo: labelToProps = 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_,
+      useHelperText: useHelperTextProps,
       weekStartDay = 'Monday',
-      switch: switch__,
+      switch: switchProps,
       fullScreen,
       today,
       clear = true,
-      heading: heading_ = true,
-      actions: actions_ = true,
+      heading: headingProps = true,
+      actions: actionsProps = true,
       fullWidth,
       readOnly,
       disabled,
-      valid: valid_,
-      onClick: onClick_,
-      onClose: onClose_,
-      onToday: onToday_,
-      onClear: onClear_,
-      onCancel: onCancel_,
-      onOk: onOk_,
+      valid: validProps,
+      onClick: onClickProps,
+      onClose: onCloseProps,
+      onToday: onTodayProps,
+      onClear: onClearProps,
+      onCancel: onCancelProps,
+      onOk: onOkProps,
       Icon: Icon_ = IconMaterialCalendarToday,
       IconEnter = IconMaterialEdit,
       IconClose = IconMaterialClose,
@@ -205,21 +205,21 @@ const DatePicker = props__ => {
   };
   const keys = React.useMemo(() => {
     const result = [];
-    const items = [switch__, useHelperText_];
+    const items = [switchProps, useHelperTextProps];
     items.forEach(item => {
       if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return unique(result);
-  }, [switch__, useHelperText_]);
+  }, [switchProps, useHelperTextProps]);
   const breakpoints = {};
   keys.forEach(key_1 => {
     breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
-  const label = name !== undefined ? name : label_;
-  const switch_ = valueBreakpoints(switch__, true, breakpoints, theme);
-  const useHelperText = valueBreakpoints(useHelperText_, undefined, breakpoints, theme);
+  const label = name !== undefined ? name : labelProps;
+  const switch_ = valueBreakpoints(switchProps, true, breakpoints, theme);
+  const useHelperText = valueBreakpoints(useHelperTextProps, undefined, breakpoints, theme);
   const touch = useMediaQuery('(pointer: coarse)', {
     element: refs.root.current
   });
@@ -232,7 +232,7 @@ const DatePicker = props__ => {
     const valueResult = (valueDefault !== undefined ? valueDefault : valueProps) || now && (range ? [new OnesyDate(), new OnesyDate()] : [new OnesyDate()]);
     return onResolveValue(valueResult);
   });
-  const [calendar, setCalendar] = React.useState((calendarDefault !== undefined ? calendarDefault : calendar_) || new OnesyDate());
+  const [calendar, setCalendar] = React.useState((calendarDefault !== undefined ? calendarDefault : calendarProps) || new OnesyDate());
   const [open, setOpen] = React.useState(false);
   const [mode, setMode] = React.useState((touch ? openMobile : 'select') || 'select');
   const [error, setError] = React.useState(false);
@@ -253,7 +253,7 @@ const DatePicker = props__ => {
   };
   const [input, setInput] = React.useState(valueToInput());
   const [inputModal, setInputModal] = React.useState(valueToInput());
-  let version = version_;
+  let version = versionProps;
   if (version === 'auto') {
     if (touch) version = 'mobile';else version = 'desktop';
   }
@@ -291,8 +291,8 @@ const DatePicker = props__ => {
 
   // Calendar
   React.useEffect(() => {
-    if (calendar_ !== undefined && calendar_ !== calendar) setCalendar(calendar_);
-  }, [calendar_]);
+    if (calendarProps !== undefined && calendarProps !== calendar) setCalendar(calendarProps);
+  }, [calendarProps]);
   const onUpdate = (valueNew_3, triggerOnChange = true) => {
     // Inner update
     if (!props.hasOwnProperty('value') || !triggerOnChange) setValue(valueNew_3);
@@ -311,7 +311,7 @@ const DatePicker = props__ => {
   const onCalendarChange = valueNew__0 => {
     const valueNew_5 = onResolveValue(valueNew__0);
     if (valueNew_5 !== value) {
-      (!actions_ ? onUpdate : setValue)(valueNew_5);
+      (!actionsProps ? onUpdate : setValue)(valueNew_5);
 
       // Update input modal
       setInputModal(valueToInput(valueNew_5));
@@ -334,7 +334,7 @@ const DatePicker = props__ => {
   };
   const onClose = event => {
     setOpen(false);
-    if (is('function', onClose_)) onClose_(event);
+    if (is('function', onCloseProps)) onCloseProps(event);
   };
   const onReset = () => {
     let valueNew_8 = inputToValue();
@@ -381,7 +381,7 @@ const DatePicker = props__ => {
     // Update input modal
     setInputModal(valueToInput(valueNew_9));
     onClose(event_0);
-    if (is('function', onToday_)) onToday_(event_0);
+    if (is('function', onTodayProps)) onTodayProps(event_0);
   };
   const onClear = event_1 => {
     const dateNow_1 = new OnesyDate();
@@ -399,7 +399,7 @@ const DatePicker = props__ => {
     // Update input modal
     setInputModal(valueToInput(valueNew_10));
     onClose(event_1);
-    if (is('function', onClear_)) onClear_(event_1);
+    if (is('function', onClearProps)) onClearProps(event_1);
   };
   const onOk = event_2 => {
     // Error
@@ -414,15 +414,15 @@ const DatePicker = props__ => {
     // Update input modal
     setInputModal(valueToInput(value));
     onClose(event_2);
-    if (is('function', onOk_)) onOk_(event_2);
+    if (is('function', onOkProps)) onOkProps(event_2);
   };
   const onCancel = event_3 => {
     onReset();
     onClose(event_3);
-    if (is('function', onCancel_)) onCancel_(event_3);
+    if (is('function', onCancelProps)) onCancelProps(event_3);
   };
   const valid = (...args) => {
-    if (is('function', valid_)) return valid_(...args);
+    if (is('function', validProps)) return validProps(...args);
     const onesyDate = args[0];
     if (min || max || validate) {
       let response = true;
@@ -504,7 +504,7 @@ const DatePicker = props__ => {
     mask.push(' ', SEPARATOR_SYMBOL, ' ', ...mask);
     placeholder += `${SEPARATOR}${placeholder}`;
   }
-  placeholder = placeholder_ || placeholder;
+  placeholder = placeholderProps || placeholder;
   const buttonProps = _objectSpread({
     color: 'inherit',
     version: 'text',
@@ -593,7 +593,7 @@ const DatePicker = props__ => {
       gap: 0,
       direction: "column",
       className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-header'], classes.header, fullScreen && classes.header_fullScreen]),
-      children: [actions_ && fullScreen && /*#__PURE__*/_jsxs(Line, {
+      children: [actionsProps && fullScreen && /*#__PURE__*/_jsxs(Line, {
         gap: 0,
         direction: "row",
         align: "center",
@@ -615,7 +615,7 @@ const DatePicker = props__ => {
         }, buttonProps), {}, {
           children: l('Save')
         }))]
-      }), heading_ && /*#__PURE__*/_jsx(Type, {
+      }), headingProps && /*#__PURE__*/_jsx(Type, {
         version: "l2",
         className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-subheading'], classes.subheading, fullScreen && classes.subheading_fullScreen]),
         children: !range ? modeModalSubHeadingText : modeModalSubHeadingTextRange
@@ -726,7 +726,7 @@ const DatePicker = props__ => {
     }), fullScreen && /*#__PURE__*/_jsx(Divider, {
       tonal: false,
       className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-divider'], classes.divider])
-    }), actions_ && /*#__PURE__*/React.cloneElement(actions, {
+    }), actionsProps && /*#__PURE__*/React.cloneElement(actions, {
       style: {
         paddingTop: theme.methods.space.value(1, 'px')
       }
@@ -747,11 +747,11 @@ const DatePicker = props__ => {
     min: min,
     max: max,
     validate: validate,
-    belowCalendars: actions_ ? actions : undefined
+    belowCalendars: actionsProps ? actions : undefined
   }, CalendarProps), CalendarPropsDesktop), {}, {
     className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-calendar', 'onesy-DatePicker-version-desktop'], CalendarProps?.className, CalendarPropsDesktop?.className, classes.calendar, classes.calendar_desktop])
   }));
-  if (static_) {
+  if (staticProps) {
     if (version === 'mobile') return mobile;
     if (version === 'desktop') return desktop;
   }

package/esm/DateTimePicker/DateTimePicker.js

@@ -69,14 +69,14 @@ const DateTimePicker = props__ => {
       ref,
       tonal,
       color = 'primary',
-      version: version_ = 'auto',
-      value: value_,
+      version: versionProps = 'auto',
+      value: valueProps,
       valueDefault,
       onChange,
       label,
       range,
       now,
-      static: static_,
+      static: staticProps,
       min,
       max,
       validate,
@@ -85,7 +85,7 @@ const DateTimePicker = props__ => {
       headingTextTimeRange,
       headingTextDate,
       headingTextDateRange,
-      useHelperText: useHelperText_,
+      useHelperText: useHelperTextProps,
       format = '12',
       hour = true,
       minute = true,
@@ -93,16 +93,16 @@ const DateTimePicker = props__ => {
       today,
       clear = true,
       size,
-      placeholder: placeholder_,
+      placeholder: placeholderProps,
       fullWidth,
       readOnly,
       disabled,
-      valid: valid_,
-      onClose: onClose_,
-      onToday: onToday_,
-      onClear: onClear_,
-      onCancel: onCancel_,
-      onOk: onOk_,
+      valid: validProps,
+      onClose: onCloseProps,
+      onToday: onTodayProps,
+      onClear: onClearProps,
+      onCancel: onCancelProps,
+      onOk: onOkProps,
       Icon: Icon_ = IconMaterialDateRange,
       IconDate = IconMaterialCalendarToday,
       IconTime = IconMaterialSchedule,
@@ -116,7 +116,7 @@ const DateTimePicker = props__ => {
       ModeDesktopProps,
       ModeMobileProps,
       ButtonProps,
-      PickerProps: PickerProps_,
+      PickerProps: PickerPropsProps,
       MiddleProps,
       MainProps,
       IconProps,
@@ -132,19 +132,19 @@ const DateTimePicker = props__ => {
   };
   const keys = React.useMemo(() => {
     const result = [];
-    const items = [useHelperText_];
+    const items = [useHelperTextProps];
     items.forEach(item => {
       if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return unique(result);
-  }, [useHelperText_]);
+  }, [useHelperTextProps]);
   const breakpoints = {};
   keys.forEach(key_1 => {
     breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
-  const useHelperText = valueBreakpoints(useHelperText_, undefined, breakpoints, theme);
+  const useHelperText = valueBreakpoints(useHelperTextProps, undefined, breakpoints, theme);
   const touch = useMediaQuery('(pointer: coarse)', {
     element: refs.root.current
   });
@@ -154,7 +154,7 @@ const DateTimePicker = props__ => {
     return sorted;
   };
   const [value, setValue] = React.useState(() => {
-    const valueResult = (valueDefault !== undefined ? valueDefault : value_) || now && (range ? [new OnesyDate(), new OnesyDate()] : [new OnesyDate()]);
+    const valueResult = (valueDefault !== undefined ? valueDefault : valueProps) || now && (range ? [new OnesyDate(), new OnesyDate()] : [new OnesyDate()]);
     return onResolveValue(valueResult);
   });
   const [calendar, setCalendar] = React.useState(value[0]);
@@ -186,7 +186,7 @@ const DateTimePicker = props__ => {
     return result_0;
   };
   const [input, setInput] = React.useState(valueToInput());
-  let version = version_;
+  let version = versionProps;
   if (version === 'auto') {
     if (touch) version = 'mobile';else version = 'desktop';
   }
@@ -210,8 +210,8 @@ const DateTimePicker = props__ => {
 
   // Value
   React.useEffect(() => {
-    if (value_ !== undefined && value_ !== value) onUpdateValue(value_);
-  }, [value_]);
+    if (valueProps !== undefined && valueProps !== value) onUpdateValue(valueProps);
+  }, [valueProps]);
   const onUpdate = (valueNew_3, triggerOnChange = true) => {
     // Inner update
     if (!props.hasOwnProperty('value') || !triggerOnChange) setValue(valueNew_3);
@@ -318,7 +318,7 @@ const DateTimePicker = props__ => {
     // Update input
     setInput(valueToInput(valueNew_10));
     onClose(event);
-    if (is('function', onToday_)) onToday_(event);
+    if (is('function', onTodayProps)) onTodayProps(event);
   };
   const onClear = event_0 => {
     const valueNew_11 = [];
@@ -329,7 +329,7 @@ const DateTimePicker = props__ => {
     // Update input
     setInput(valueToInput(valueNew_11));
     onClose(event_0);
-    if (is('function', onClear_)) onClear_(event_0);
+    if (is('function', onClearProps)) onClearProps(event_0);
   };
   const onOk = event_1 => {
     // Error
@@ -341,22 +341,22 @@ const DateTimePicker = props__ => {
     // Update input
     setInput(valueToInput(value));
     onClose(event_1);
-    if (is('function', onOk_)) onOk_(event_1);
+    if (is('function', onOkProps)) onOkProps(event_1);
   };
   const onCancel = event_2 => {
     onReset();
     onClose(event_2);
-    if (is('function', onCancel_)) onCancel_(event_2);
+    if (is('function', onCancelProps)) onCancelProps(event_2);
   };
   const onOpen = () => {
     setOpen(previous_0 => !previous_0);
   };
   const onClose = event_3 => {
     setOpen(false);
-    if (is('function', onClose_)) onClose_(event_3);
+    if (is('function', onCloseProps)) onCloseProps(event_3);
   };
   const valid = (...args) => {
-    if (is('function', valid_)) return valid_(...args);
+    if (is('function', validProps)) return validProps(...args);
     const onesyDate_0 = args[0];
     if (min || max || validate) {
       let response = true;
@@ -496,7 +496,7 @@ const DateTimePicker = props__ => {
     }
     placeholder += `${SEPARATOR}${placeholder}`;
   }
-  placeholder = placeholder_ || placeholder;
+  placeholder = placeholderProps || placeholder;
   const buttonProps = _objectSpread({
     tonal,
     color,
@@ -571,7 +571,7 @@ const DateTimePicker = props__ => {
     heading: false,
     readOnly,
     disabled
-  }, PickerProps_), tab === 'date' && DatePickerProps), tab === 'time' && TimePickerProps);
+  }, PickerPropsProps), tab === 'date' && DatePickerProps), tab === 'time' && TimePickerProps);
   const element = /*#__PURE__*/_jsxs(Surface, {
     gap: 0,
     direction: "column",
@@ -614,7 +614,7 @@ const DateTimePicker = props__ => {
   if (version === 'mobile') {
     if (!(readOnly || disabled)) moreProps.onClick = onOpen;
   }
-  if (static_) return element;
+  if (staticProps) return element;
   return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     gap: 0,
     direction: "column",

package/esm/TimePicker/TimePicker.js

@@ -230,11 +230,11 @@ const TimePicker = props__ => {
       ref,
       tonal,
       color = 'primary',
-      version: version_ = 'auto',
-      value: value_,
+      version: versionProps = 'auto',
+      value: valueProps,
       valueDefault,
       onChange,
-      selecting: selecting_,
+      selecting: selectingProps,
       selectingDefault,
       onChangeSelecting,
       size = 'regular',
@@ -244,37 +244,37 @@ const TimePicker = props__ => {
       min,
       max,
       validate,
-      autoNext: autoNext_,
-      autoCloseOnLast: autoCloseOnLast_,
+      autoNext: autoNextProps,
+      autoCloseOnLast: autoCloseOnLastProps,
       openMobile = 'select',
       openDesktop = 'select',
       selectModalSubHeadingText = l('Select time'),
       selectModalSubHeadingTextRange = `${l('Select from')}${SEPARATOR}${l('to time')}`,
       inputModalSubHeadingText = l('Enter time'),
       inputModalSubHeadingTextRange = `${l('Enter from')}${SEPARATOR}${l('to time')}`,
-      orientation: orientation_,
+      orientation: orientationProps,
       format = '12',
       hour = true,
       minute = true,
       second = false,
-      switch: switch__,
-      static: static_,
+      switch: switchProps,
+      static: staticProps,
       today,
       clear = true,
-      placeholder: placeholder_,
-      heading: heading_ = true,
-      actions: actions_ = true,
+      placeholder: placeholderProps,
+      heading: headingProps = true,
+      actions: actionsProps = true,
       fullWidth,
       readOnly,
       disabled,
-      valid: valid_,
-      onClick: onClick_,
-      onClose: onClose_,
-      onCancel: onCancel_,
-      onNow: onNow_,
-      onToday: onToday_,
-      onClear: onClear_,
-      onOk: onOk_,
+      valid: validProps,
+      onClick: onClickProps,
+      onClose: onCloseProps,
+      onCancel: onCancelProps,
+      onNow: onNowProps,
+      onToday: onTodayProps,
+      onClear: onClearProps,
+      onOk: onOkProps,
       renderValue,
       Icon: Icon_ = IconMaterialSchedule,
       IconEnter = IconMaterialKeyboardAlt,
@@ -308,22 +308,22 @@ const TimePicker = props__ => {
   };
   const keys = React.useMemo(() => {
     const result = [];
-    const items = [switch__, orientation_, autoNext_, autoCloseOnLast_];
+    const items = [switchProps, orientationProps, autoNextProps, autoCloseOnLastProps];
     items.forEach(item => {
       if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return unique(result);
-  }, [switch__, orientation_, autoNext_, autoCloseOnLast_]);
+  }, [switchProps, orientationProps, autoNextProps, autoCloseOnLastProps]);
   const breakpoints = {};
   keys.forEach(key_1 => {
     breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
-  const switch_ = valueBreakpoints(switch__, true, breakpoints, theme);
-  const orientation = valueBreakpoints(orientation_, 'vertical', breakpoints, theme);
-  const autoNext = valueBreakpoints(autoNext_, undefined, breakpoints, theme);
-  const autoCloseOnLast = valueBreakpoints(autoCloseOnLast_, undefined, breakpoints, theme);
+  const switch_ = valueBreakpoints(switchProps, true, breakpoints, theme);
+  const orientation = valueBreakpoints(orientationProps, 'vertical', breakpoints, theme);
+  const autoNext = valueBreakpoints(autoNextProps, undefined, breakpoints, theme);
+  const autoCloseOnLast = valueBreakpoints(autoCloseOnLastProps, undefined, breakpoints, theme);
   const touch = useMediaQuery('(pointer: coarse)', {
     element: refs.root.current
   });
@@ -333,11 +333,11 @@ const TimePicker = props__ => {
     return sorted;
   };
   const [value, setValue] = React.useState(() => {
-    const valueResult = (valueDefault !== undefined ? valueDefault : value_) || now && (range ? [new OnesyDate(), new OnesyDate()] : [new OnesyDate()]);
+    const valueResult = (valueDefault !== undefined ? valueDefault : valueProps) || now && (range ? [new OnesyDate(), new OnesyDate()] : [new OnesyDate()]);
     return onResolveValue(valueResult);
   });
   const [selecting, setSelecting] = React.useState(() => {
-    const valueResult_0 = (selectingDefault !== undefined ? selectingDefault : selecting_) || ['hour', 'hour'];
+    const valueResult_0 = (selectingDefault !== undefined ? selectingDefault : selectingProps) || ['hour', 'hour'];
     return (is('array', valueResult_0) ? valueResult_0 : [valueResult_0]).filter(Boolean);
   });
   const [open, setOpen] = React.useState(false);
@@ -367,7 +367,7 @@ const TimePicker = props__ => {
     return result_0;
   };
   const [input, setInput] = React.useState(valueToInput());
-  let version = version_;
+  let version = versionProps;
   if (version === 'auto') {
     if (touch) version = 'mobile';else version = 'desktop';
   }
@@ -396,8 +396,8 @@ const TimePicker = props__ => {
 
   // Value
   React.useEffect(() => {
-    if (value_ !== undefined && value_ !== value) onUpdateValue(value_);
-  }, [value_]);
+    if (valueProps !== undefined && valueProps !== value) onUpdateValue(valueProps);
+  }, [valueProps]);
   const onUpdate = (valueNew__0, triggerOnChange = true) => {
     const valueNew_3 = resolve(valueNew__0);
 
@@ -414,7 +414,7 @@ const TimePicker = props__ => {
     if (is('function', onChangeSelecting)) onChangeSelecting(valueNew_4);
   };
   const valid = (...args) => {
-    if (is('function', valid_)) return valid_(...args);
+    if (is('function', validProps)) return validProps(...args);
     const onesyDate = args[0];
     if (min || max || validate) {
       let response = true;
@@ -455,7 +455,7 @@ const TimePicker = props__ => {
     if (is('string', valueTime_0) && valueTime_0.startsWith('0')) valueTime_0 = valueTime_0.slice(1);
     valueTime_0 = +valueTime_0;
     value[index_1] = set(valueTime_0, unit || selecting[index_1], value[index_1]);
-    (!actions_ ? onUpdate : setValue)(resolve(value));
+    (!actionsProps ? onUpdate : setValue)(resolve(value));
   };
   const resolve = (valueNew_7 = refs.value.current, dayTimeNew = refs.dayTime.current) => {
     const values_0 = onResolveValue(valueNew_7).map((item_4, index_2) => {
@@ -477,7 +477,7 @@ const TimePicker = props__ => {
     dayTimeNew_0[index_3] = valueNew_8;
     refs.dayTime.current = dayTimeNew_0;
     setDayTime(dayTimeNew_0);
-    (!actions_ ? onUpdate : setValue)(resolve(refs.value.current));
+    (!actionsProps ? onUpdate : setValue)(resolve(refs.value.current));
   };
   const inputToValue = (valueNew__3 = input) => {
     let valueNew_9 = valueNew__3;
@@ -511,7 +511,7 @@ const TimePicker = props__ => {
     const valueNew_11 = [...value];
     if (valueNew__5 !== value[index_4]) {
       valueNew_11[index_4] = valueNew__5;
-      (!actions_ ? onUpdate : setValue)(resolve(valueNew_11));
+      (!actionsProps ? onUpdate : setValue)(resolve(valueNew_11));
 
       // Error
       errorCheck(valueNew_11);
@@ -542,7 +542,7 @@ const TimePicker = props__ => {
   };
   const onClose = event => {
     setOpen(false);
-    if (is('function', onClose_)) onClose_(event);
+    if (is('function', onCloseProps)) onCloseProps(event);
   };
   const onReset = () => {
     const valueNew_14 = inputToValue();
@@ -566,7 +566,7 @@ const TimePicker = props__ => {
     // Update dayTime
     setDayTime(valueNew_15.map(item_8 => formatDate(item_8, 'a')));
     onClose(event_0);
-    if (is('function', onToday_)) onToday_(event_0);
+    if (is('function', onTodayProps)) onTodayProps(event_0);
   };
   const onClear = event_1 => {
     const valueNew_16 = [];
@@ -580,7 +580,7 @@ const TimePicker = props__ => {
     // Update dayTime
     setDayTime(valueNew_16.map(item_9 => formatDate(item_9, 'a')));
     onClose(event_1);
-    if (is('function', onClear_)) onClear_(event_1);
+    if (is('function', onClearProps)) onClearProps(event_1);
   };
   const onOk = event_2 => {
     // Error
@@ -595,12 +595,12 @@ const TimePicker = props__ => {
     // Update dayTime
     setDayTime(refs.value.current.map(item_10 => formatDate(item_10, 'a')));
     onClose(event_2);
-    if (is('function', onOk_)) onOk_(event_2);
+    if (is('function', onOkProps)) onOkProps(event_2);
   };
   const onCancel = event_3 => {
     onReset();
     onClose(event_3);
-    if (is('function', onCancel_)) onCancel_(event_3);
+    if (is('function', onCancelProps)) onCancelProps(event_3);
   };
   const mask = [];
   let placeholder = '';
@@ -653,7 +653,7 @@ const TimePicker = props__ => {
     mask.push(' ', SEPARATOR_SYMBOL, ' ', ...mask);
     placeholder += `${SEPARATOR}${placeholder}`;
   }
-  placeholder = placeholder_ || placeholder;
+  placeholder = placeholderProps || placeholder;
   const buttonProps = _objectSpread({
     color: 'inherit',
     version: 'text',
@@ -907,7 +907,7 @@ const TimePicker = props__ => {
     Component: Line
   }, MainProps), {}, {
     className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-main'], MainProps?.className, classes.main, classes[`main_size_${size}`]]),
-    children: [heading_ && /*#__PURE__*/_jsx(Type, {
+    children: [headingProps && /*#__PURE__*/_jsx(Type, {
       version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
       className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-heading'], classes.heading, classes[`heading_size_${size}`]]),
       children: heading
@@ -918,7 +918,7 @@ const TimePicker = props__ => {
       valueDefault: tab,
       onChange: setTab
     }, TabsProps), {}, {
-      className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-tabs'], TabsProps?.className, classes.tabs, heading_ && classes.tabs_padding]),
+      className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-tabs'], TabsProps?.className, classes.tabs, headingProps && classes.tabs_padding]),
       children: [/*#__PURE__*/_jsx(Tab, _objectSpread({
         value: 0,
         name: l('From')
@@ -930,12 +930,12 @@ const TimePicker = props__ => {
       gap: 0,
       className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-middle'], MiddleProps?.className, classes.middle, classes[`middle_size_${size}`]]),
       children: elementValues[tab]
-    }), actions_ && actions]
+    }), actionsProps && actions]
   }));
   if (version === 'mobile') {
     if (!(readOnly || disabled)) moreProps.onClick = onOpen;
   }
-  if (static_) return element;
+  if (staticProps) return element;
   return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     gap: 0,
     direction: "column",

package/esm/index.js

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

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.196",
+  "version": "1.0.197",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar Erić <lazareric1@proton.me>",