@onesy/ui-react 1.0.181 → 1.0.182

package/TimePicker/TimePicker.js

@@ -335,9 +335,14 @@ const TimePicker = props__ => {
   const touch = (0, _useMediaQuery.default)('(pointer: coarse)', {
     element: refs.root.current
   });
+  const onResolveValue = valueNew => {
+    const array = ((0, _utils.is)('array', valueNew) ? valueNew : [valueNew]).filter(Boolean);
+    const sorted = array.sort((a, b) => (a === null || a === void 0 ? void 0 : a.milliseconds) - (b === null || b === void 0 ? void 0 : b.milliseconds));
+    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()]);
-    return ((0, _utils.is)('array', valueResult) ? valueResult : [valueResult]).filter(Boolean);
+    return onResolveValue(valueResult);
   });
   const [selecting, setSelecting] = _react.default.useState(() => {
     const valueResult_0 = (selectingDefault !== undefined ? selectingDefault : selecting_) || ['hour', 'hour'];
@@ -353,9 +358,9 @@ const TimePicker = props__ => {
   refs.value.current = value;
   refs.mode.current = mode;
   refs.dayTime.current = dayTime;
-  const valueToInput = (valueNew = refs.value.current) => {
+  const valueToInput = (valueNew_0 = refs.value.current) => {
     let result_0 = '';
-    const [from, to] = (0, _utils.is)('array', valueNew) ? valueNew : [valueNew];
+    const [from, to] = (0, _utils.is)('array', valueNew_0) ? valueNew_0 : [valueNew_0];
     if (!(from || to)) return '';
     const method = item_1 => {
       let formatValue = '';
@@ -375,20 +380,20 @@ const TimePicker = props__ => {
     if (touch) version = 'mobile';else version = 'desktop';
   }
   const onUpdateValue = valueNew_ => {
-    const valueNew_0 = (0, _utils.is)('array', valueNew_) ? valueNew_ : [valueNew_];
+    const valueNew_1 = onResolveValue(valueNew_);
 
     // Update value
-    setValue(valueNew_0);
+    setValue(valueNew_1);
 
     // Update input
-    setInput(valueToInput(valueNew_0));
+    setInput(valueToInput(valueNew_1));
 
     // Update dayTime
-    setDayTime(valueNew_0.map(item_2 => (0, _date.format)(item_2, 'a')));
+    setDayTime(valueNew_1.map(item_2 => (0, _date.format)(item_2, 'a')));
   };
-  const errorCheck = (valueNew_1 = value) => {
+  const errorCheck = (valueNew_2 = value) => {
     // Error
-    setError((valueNew_1 || []).some((item_3, index) => !valid(item_3)));
+    setError((valueNew_2 || []).some((item_3, index) => !valid(item_3)));
   };
 
   // Init
@@ -399,22 +404,22 @@ const TimePicker = props__ => {
 
   // Value
   _react.default.useEffect(() => {
-    if (value_ !== undefined && value_ !== value) onUpdateValue(((0, _utils.is)('array', value_) ? value_ : [value_]).filter(Boolean));
+    if (value_ !== undefined && value_ !== value) onUpdateValue(value_);
   }, [value_]);
   const onUpdate = valueNew__0 => {
-    const valueNew_2 = resolve(valueNew__0);
+    const valueNew_3 = resolve(valueNew__0);
 
     // Inner update
-    if (!props.hasOwnProperty('value')) setValue(valueNew_2);
-    if ((0, _utils.is)('function', onChange)) onChange(!range ? valueNew_2[0] : valueNew_2);
+    if (!props.hasOwnProperty('value')) setValue(valueNew_3);
+    if ((0, _utils.is)('function', onChange)) onChange(!range ? valueNew_3[0] : valueNew_3);
   };
   const onUpdateSelecting = (valueNew__1, index_0) => {
-    const valueNew_3 = [...selecting];
-    valueNew_3[index_0] = valueNew__1;
+    const valueNew_4 = [...selecting];
+    valueNew_4[index_0] = valueNew__1;
 
     // Inner update
-    if (!props.hasOwnProperty('selecting')) setSelecting(valueNew_3);
-    if ((0, _utils.is)('function', onChangeSelecting)) onChangeSelecting(valueNew_3);
+    if (!props.hasOwnProperty('selecting')) setSelecting(valueNew_4);
+    if ((0, _utils.is)('function', onChangeSelecting)) onChangeSelecting(valueNew_4);
   };
   const valid = (...args) => {
     if ((0, _utils.is)('function', valid_)) return valid_(...args);
@@ -428,8 +433,8 @@ const TimePicker = props__ => {
     }
     return true;
   };
-  const textToOnesyDate = valueNew_4 => {
-    const [times, dayTime_] = (valueNew_4 || '').split(' ');
+  const textToOnesyDate = valueNew_5 => {
+    const [times, dayTime_] = (valueNew_5 || '').split(' ');
     const values = times.split(':');
     let valueTime;
     let onesyDate_0 = new _date.OnesyDate();
@@ -453,15 +458,15 @@ const TimePicker = props__ => {
     }
     return onesyDate_0;
   };
-  const onInputModalChange = (valueNew_5, unit, index_1) => {
-    let valueTime_0 = valueNew_5;
+  const onInputModalChange = (valueNew_6, unit, index_1) => {
+    let valueTime_0 = valueNew_6;
     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));
   };
-  const resolve = (valueNew_6 = refs.value.current, dayTimeNew = refs.dayTime.current) => {
-    const values_0 = valueNew_6.filter(Boolean).map((item_4, index_2) => {
+  const resolve = (valueNew_7 = refs.value.current, dayTimeNew = refs.dayTime.current) => {
+    const values_0 = onResolveValue(valueNew_7).map((item_4, index_2) => {
       // Resolve the range value
       const valueHour = item_4.hour;
       if (format === '12') {
@@ -473,35 +478,35 @@ const TimePicker = props__ => {
     return values_0;
   };
   const updateDayTime = (valueNew__2, index_3) => {
-    const valueNew_7 = valueNew__2[0];
+    const valueNew_8 = valueNew__2[0];
 
     // Update dayTime
     const dayTimeNew_0 = [...dayTime];
-    dayTimeNew_0[index_3] = valueNew_7;
+    dayTimeNew_0[index_3] = valueNew_8;
     refs.dayTime.current = dayTimeNew_0;
     setDayTime(dayTimeNew_0);
     (!actions_ ? onUpdate : setValue)(resolve(refs.value.current));
   };
   const inputToValue = (valueNew__3 = input) => {
-    let valueNew_8 = valueNew__3;
-    let [from_0, to_0] = valueNew_8.split(_DatePicker.SEPARATOR);
+    let valueNew_9 = valueNew__3;
+    let [from_0, to_0] = valueNew_9.split(_DatePicker.SEPARATOR);
     from_0 = textToOnesyDate(from_0);
     if (to_0) to_0 = textToOnesyDate(to_0);
-    valueNew_8 = [from_0, to_0].filter(Boolean).filter(item_5 => item_5 === null || item_5 === void 0 ? void 0 : item_5.valid);
-    return valueNew_8;
+    valueNew_9 = [from_0, to_0].filter(Boolean).filter(item_5 => item_5 === null || item_5 === void 0 ? void 0 : item_5.valid);
+    return valueNew_9;
   };
   const onInputChange = valueNew__4 => {
-    const valueNew_9 = inputToValue(valueNew__4);
-    const validValues = valueNew_9.every(item_6 => item_6.valid);
+    const valueNew_10 = inputToValue(valueNew__4);
+    const validValues = valueNew_10.every(item_6 => item_6.valid);
 
     // Only update values if input is valid
     // format used to make the value
     if (validValues) {
       // Error
-      errorCheck(valueNew_9);
+      errorCheck(valueNew_10);
 
       // Update value
-      onUpdate(valueNew_9);
+      onUpdate(valueNew_10);
     }
     if (!valueNew__4) {
       onUpdate([null, null]);
@@ -511,21 +516,21 @@ const TimePicker = props__ => {
     setInput(valueNew__4);
   };
   const onChangeClock = (valueNew__5, index_4 = 0) => {
-    const valueNew_10 = [...value];
+    const valueNew_11 = [...value];
     if (valueNew__5 !== value[index_4]) {
-      valueNew_10[index_4] = valueNew__5;
-      (!actions_ ? onUpdate : setValue)(resolve(valueNew_10));
+      valueNew_11[index_4] = valueNew__5;
+      (!actions_ ? onUpdate : setValue)(resolve(valueNew_11));
 
       // Error
-      errorCheck(valueNew_10);
+      errorCheck(valueNew_11);
     }
   };
-  const onChangeSelectingClock = (valueNew_11, index_5 = 0) => {
+  const onChangeSelectingClock = (valueNew_12, index_5 = 0) => {
     const selectingValue = selecting;
-    selectingValue[index_5] = valueNew_11;
-    if (valueNew_11 !== selecting[0]) setSelecting([...selectingValue]);
+    selectingValue[index_5] = valueNew_12;
+    if (valueNew_12 !== selecting[0]) setSelecting([...selectingValue]);
   };
-  const onDoneSelecting = (valueNew_12, selectingNew) => {
+  const onDoneSelecting = (valueNew_13, selectingNew) => {
     // AutoCloseOnLast
     if (autoCloseOnLast && refs.mode.current === 'select') {
       if (['hour', 'minute', 'second'].includes(selectingNew)) {
@@ -548,40 +553,40 @@ const TimePicker = props__ => {
     if ((0, _utils.is)('function', onClose_)) onClose_(event);
   };
   const onReset = () => {
-    const valueNew_13 = inputToValue();
+    const valueNew_14 = inputToValue();
 
     // Update value
-    onUpdate(valueNew_13);
+    onUpdate(valueNew_14);
 
     // Update dayTime
-    setDayTime(valueNew_13.map(item_7 => (0, _date.format)(item_7, 'a')));
+    setDayTime(valueNew_14.map(item_7 => (0, _date.format)(item_7, 'a')));
   };
   const onToday = event_0 => {
-    const valueNew_14 = [new _date.OnesyDate()];
-    if (range) valueNew_14.push(new _date.OnesyDate());
+    const valueNew_15 = [new _date.OnesyDate()];
+    if (range) valueNew_15.push(new _date.OnesyDate());
 
     // Update value
-    onUpdate(valueNew_14);
+    onUpdate(valueNew_15);
 
     // Update input
-    setInput(valueToInput(valueNew_14));
+    setInput(valueToInput(valueNew_15));
 
     // Update dayTime
-    setDayTime(valueNew_14.map(item_8 => (0, _date.format)(item_8, 'a')));
+    setDayTime(valueNew_15.map(item_8 => (0, _date.format)(item_8, 'a')));
     onClose(event_0);
     if ((0, _utils.is)('function', onToday_)) onToday_(event_0);
   };
   const onClear = event_1 => {
-    const valueNew_15 = [];
+    const valueNew_16 = [];
 
     // Update value
-    onUpdate(valueNew_15);
+    onUpdate(valueNew_16);
 
     // Update input
-    setInput(valueToInput(valueNew_15));
+    setInput(valueToInput(valueNew_16));
 
     // Update dayTime
-    setDayTime(valueNew_15.map(item_9 => (0, _date.format)(item_9, 'a')));
+    setDayTime(valueNew_16.map(item_9 => (0, _date.format)(item_9, 'a')));
     onClose(event_1);
     if ((0, _utils.is)('function', onClear_)) onClear_(event_1);
   };
@@ -671,8 +676,8 @@ const TimePicker = props__ => {
     value: value[index_6] || new _date.OnesyDate(),
     dayTime: dayTime[index_6] || (0, _date.format)(new _date.OnesyDate(), 'a'),
     selecting: selecting[index_6],
-    onChange: valueNew_16 => onChangeClock(valueNew_16, index_6),
-    onChangeSelecting: valueNew_17 => onChangeSelectingClock(valueNew_17, index_6),
+    onChange: valueNew_17 => onChangeClock(valueNew_17, index_6),
+    onChangeSelecting: valueNew_18 => onChangeSelectingClock(valueNew_18, index_6),
     onDoneSelecting: onDoneSelecting,
     renderValue: renderValue,
     valid: valid,
@@ -739,7 +744,7 @@ const TimePicker = props__ => {
       inputs.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(AdvancedTextField, _objectSpread({
         helperText: l('Hour'),
         value: (0, _date.format)(value[index_7], format === '12' ? 'hh' : 'HH'),
-        onChange: valueNew_18 => onInputModalChange(valueNew_18, 'hour', index_7),
+        onChange: valueNew_19 => onInputModalChange(valueNew_19, 'hour', index_7),
         placeholder: "00",
         mask: [...(format === '12' ? [{
           pattern: '[0-1]'
@@ -761,7 +766,7 @@ const TimePicker = props__ => {
       inputs.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(AdvancedTextField, _objectSpread({
         helperText: l('Minute'),
         value: (0, _date.format)(value[index_7], 'mm'),
-        onChange: valueNew_19 => onInputModalChange(valueNew_19, 'minute', index_7),
+        onChange: valueNew_20 => onInputModalChange(valueNew_20, 'minute', index_7),
         placeholder: "00",
         mask: [{
           pattern: '[0-5]'
@@ -783,7 +788,7 @@ const TimePicker = props__ => {
       inputs.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(AdvancedTextField, _objectSpread({
         helperText: l('Second'),
         value: (0, _date.format)(value[index_7], 'ss'),
-        onChange: valueNew_20 => onInputModalChange(valueNew_20, 'second', index_7),
+        onChange: valueNew_21 => onInputModalChange(valueNew_21, 'second', index_7),
         placeholder: "00",
         mask: [{
           pattern: '[0-5]'
@@ -828,7 +833,7 @@ const TimePicker = props__ => {
         size: size,
         orientation: orientationValue,
         value: dayTime[index_8] || (0, _date.format)(new _date.OnesyDate(), 'a'),
-        onChange: valueNew_21 => updateDayTime(valueNew_21, index_8),
+        onChange: valueNew_22 => updateDayTime(valueNew_22, index_8),
         select: "single",
         unselect: false
       }, ToggleButtonsProps), {}, {

package/esm/Calendar/Calendar.js

@@ -348,7 +348,8 @@ const Calendar = props__ => {
                   l
                 })]
               }), /*#__PURE__*/_jsx(CalendarMonth, _objectSpread(_objectSpread({
-                color: "default",
+                color: color,
+                tonal: tonal,
                 value: value,
                 calendar: calendarOnesyDate_0,
                 valid: valid,
@@ -409,7 +410,8 @@ const Calendar = props__ => {
                     l
                   })
                 }), /*#__PURE__*/_jsx(CalendarMonth, _objectSpread(_objectSpread({
-                  color: "default",
+                  color: color,
+                  tonal: tonal,
                   value: value,
                   calendar: calendarOnesyDate,
                   valid: valid,

package/esm/CalendarMonth/CalendarMonth.js

@@ -577,7 +577,7 @@ const CalendarMonth = props__ => {
               // between
               day_3.is.between && !day_3.is.same && [!day_3.is.end && day_3.dayWeek !== 0 && !day_3.is.monthEnd && classes.dayStartSelection, !day_3.is.start && day_3.dayWeek !== 1 && !day_3.is.monthStart && classes.dayEndSelection]]),
               style: {
-                '--onesy-color': day_3.is.fromSelected ? colorSelectedTheme?.main : palette?.main
+                '--onesy-color': theme.methods.palette.color.alpha(day_3.is.fromSelected ? colorSelectedTheme?.main : palette?.main, 1)
               },
               children: is('function', renderDay) ? renderDay(day_3.onesyDate, propsDay, day_3, outside) : /*#__PURE__*/_jsx(PaginationItem, _objectSpread(_objectSpread(_objectSpread({
                 tonal: tonal,

package/esm/DatePicker/DatePicker.js

@@ -223,17 +223,22 @@ const DatePicker = props__ => {
   const touch = useMediaQuery('(pointer: coarse)', {
     element: refs.root.current
   });
+  const onResolveValue = valueNew => {
+    const array = (is('array', valueNew) ? valueNew : [valueNew]).filter(Boolean);
+    const sorted = array.sort((a, b) => a?.milliseconds - b?.milliseconds);
+    return sorted;
+  };
   const [value, setValue] = React.useState(() => {
     const valueResult = (valueDefault !== undefined ? valueDefault : value_) || now && (range ? [new OnesyDate(), new OnesyDate()] : [new OnesyDate()]);
-    return (is('array', valueResult) ? valueResult : [valueResult]).filter(Boolean);
+    return onResolveValue(valueResult);
   });
   const [calendar, setCalendar] = React.useState((calendarDefault !== undefined ? calendarDefault : calendar_) || new OnesyDate());
   const [open, setOpen] = React.useState(false);
   const [mode, setMode] = React.useState((touch ? openMobile : 'select') || 'select');
   const [error, setError] = React.useState(false);
-  const valueToInput = (valueNew = value) => {
+  const valueToInput = (valueNew_0 = value) => {
     let result_0 = '';
-    const [from, to] = is('array', valueNew) ? valueNew : [valueNew];
+    const [from, to] = is('array', valueNew_0) ? valueNew_0 : [valueNew_0];
     if (!(from || to)) return '';
     const method = item_0 => `${format(item_0, 'DD', {
       l
@@ -253,24 +258,24 @@ const DatePicker = props__ => {
     if (touch) version = 'mobile';else version = 'desktop';
   }
   const onUpdateValue = valueNew_ => {
-    const valueNew_0 = is('array', valueNew_) ? valueNew_ : [valueNew_];
+    const valueNew_1 = onResolveValue(valueNew_);
     const dateNow = new OnesyDate();
 
     // Update value
-    setValue(valueNew_0);
+    setValue(valueNew_1);
 
     // Update calendar
-    onUpdateCalendar(valueNew_0[0] || dateNow);
+    onUpdateCalendar(valueNew_1[0] || dateNow);
 
     // Update input
-    setInput(valueToInput(valueNew_0));
+    setInput(valueToInput(valueNew_1));
 
     // Update input modal
-    setInputModal(valueToInput(valueNew_0));
+    setInputModal(valueToInput(valueNew_1));
   };
-  const errorCheck = (valueNew_1 = value) => {
+  const errorCheck = (valueNew_2 = value) => {
     // Error
-    setError((valueNew_1 || []).some((item_1, index) => !valid(item_1)));
+    setError((valueNew_2 || []).some((item_1, index) => !valid(item_1)));
   };
 
   // Init
@@ -281,22 +286,22 @@ const DatePicker = props__ => {
 
   // Value
   React.useEffect(() => {
-    if (value_ !== undefined && value_ !== value) onUpdateValue((is('array', value_) ? value_ : [value_]).filter(Boolean));
+    if (value_ !== undefined && value_ !== value) onUpdateValue(value_);
   }, [value_]);
 
   // Calendar
   React.useEffect(() => {
     if (calendar_ !== undefined && calendar_ !== calendar) setCalendar(calendar_);
   }, [calendar_]);
-  const onUpdate = valueNew_2 => {
+  const onUpdate = valueNew_3 => {
     // Inner update
-    if (!props.hasOwnProperty('value')) setValue(valueNew_2);
-    if (is('function', onChange)) onChange(!range ? valueNew_2[0] : valueNew_2);
+    if (!props.hasOwnProperty('value')) setValue(valueNew_3);
+    if (is('function', onChange)) onChange(!range ? valueNew_3[0] : valueNew_3);
   };
-  const onUpdateCalendar = valueNew_3 => {
+  const onUpdateCalendar = valueNew_4 => {
     // Inner update
-    if (!props.hasOwnProperty('calendar')) setCalendar(valueNew_3);
-    if (is('function', onChangeCalendar)) onChangeCalendar(valueNew_3);
+    if (!props.hasOwnProperty('calendar')) setCalendar(valueNew_4);
+    if (is('function', onChangeCalendar)) onChangeCalendar(valueNew_4);
   };
 
   // Update only internally, without using onChange
@@ -304,24 +309,24 @@ const DatePicker = props__ => {
   // only use onChange on
   // input change, or ok
   const onCalendarChange = valueNew__0 => {
-    const valueNew_4 = is('array', valueNew__0) ? valueNew__0 : [valueNew__0];
-    if (valueNew_4 !== value) {
-      (!actions_ ? onUpdate : setValue)(valueNew_4);
+    const valueNew_5 = onResolveValue(valueNew__0);
+    if (valueNew_5 !== value) {
+      (!actions_ ? onUpdate : setValue)(valueNew_5);
 
       // Update input modal
-      setInputModal(valueToInput(valueNew_4));
+      setInputModal(valueToInput(valueNew_5));
     }
   };
-  const onCalendarChangeCalendar = valueNew_5 => {
-    if (valueNew_5 !== calendar) onUpdateCalendar(valueNew_5);
+  const onCalendarChangeCalendar = valueNew_6 => {
+    if (valueNew_6 !== calendar) onUpdateCalendar(valueNew_6);
   };
   const inputToValue = (valueNew__1 = input) => {
-    let valueNew_6 = valueNew__1;
-    let [from_0, to_0] = valueNew_6.split(SEPARATOR);
+    let valueNew_7 = valueNew__1;
+    let [from_0, to_0] = valueNew_7.split(SEPARATOR);
     from_0 = textToOnesyDate(from_0);
     if (to_0) to_0 = textToOnesyDate(to_0, false);
-    valueNew_6 = [from_0, to_0].filter(Boolean);
-    return valueNew_6;
+    valueNew_7 = [from_0, to_0].filter(Boolean);
+    return valueNew_7;
   };
   const onOpen = () => {
     onMode();
@@ -332,67 +337,67 @@ const DatePicker = props__ => {
     if (is('function', onClose_)) onClose_(event);
   };
   const onReset = () => {
-    let valueNew_7 = inputToValue();
-    const isValid = valueNew_7 && valueNew_7?.[0]?.valid;
+    let valueNew_8 = inputToValue();
+    const isValid = valueNew_8 && valueNew_8?.[0]?.valid;
     if (isValid) {
       // Update value
-      onUpdate(valueNew_7);
+      onUpdate(valueNew_8);
 
       // Update calendar
-      onUpdateCalendar(valueNew_7[0]);
+      onUpdateCalendar(valueNew_8[0]);
 
       // Update input modal
       setInputModal(input);
     } else {
       const dateNow_0 = new OnesyDate();
-      valueNew_7 = [];
+      valueNew_8 = [];
 
       // Update value
-      onUpdate(valueNew_7);
+      onUpdate(valueNew_8);
 
       // Update calendar
       onUpdateCalendar(dateNow_0);
 
       // Update input
-      setInput(valueToInput(valueNew_7));
+      setInput(valueToInput(valueNew_8));
 
       // Update input modal
-      setInputModal(valueToInput(valueNew_7));
+      setInputModal(valueToInput(valueNew_8));
     }
   };
   const onToday = event_0 => {
-    const valueNew_8 = [startOf(new OnesyDate(), 'day')];
-    if (range) valueNew_8.push(endOf(new OnesyDate(), 'day'));
+    const valueNew_9 = [startOf(new OnesyDate(), 'day')];
+    if (range) valueNew_9.push(endOf(new OnesyDate(), 'day'));
 
     // Update value
-    onUpdate(valueNew_8);
+    onUpdate(valueNew_9);
 
     // Update calendar
-    onUpdateCalendar(valueNew_8[0]);
+    onUpdateCalendar(valueNew_9[0]);
 
     // Update input
-    setInput(valueToInput(valueNew_8));
+    setInput(valueToInput(valueNew_9));
 
     // Update input modal
-    setInputModal(valueToInput(valueNew_8));
+    setInputModal(valueToInput(valueNew_9));
     onClose(event_0);
     if (is('function', onToday_)) onToday_(event_0);
   };
   const onClear = event_1 => {
     const dateNow_1 = new OnesyDate();
-    const valueNew_9 = [];
+    const valueNew_10 = [];
 
     // Update value
-    onUpdate(valueNew_9);
+    onUpdate(valueNew_10);
 
     // Update calendar
     onUpdateCalendar(dateNow_1);
 
     // Update input
-    setInput(valueToInput(valueNew_9));
+    setInput(valueToInput(valueNew_10));
 
     // Update input modal
-    setInputModal(valueToInput(valueNew_9));
+    setInputModal(valueToInput(valueNew_10));
     onClose(event_1);
     if (is('function', onClear_)) onClear_(event_1);
   };
@@ -428,26 +433,26 @@ const DatePicker = props__ => {
     }
     return true;
   };
-  const textToOnesyDate = (valueNew_10, start = true) => {
-    const [valueDay, valueMonth, valueYear] = (valueNew_10 || '').split('/');
+  const textToOnesyDate = (valueNew_11, start = true) => {
+    const [valueDay, valueMonth, valueYear] = (valueNew_11 || '').split('/');
     const onesyDate_0 = new OnesyDate(new Date(`${valueMonth}/${valueDay}/${valueYear}`));
     return start ? startOf(onesyDate_0, 'day') : endOf(onesyDate_0, 'day');
   };
   const onInputChange = valueNew__2 => {
-    const valueNew_11 = inputToValue(valueNew__2);
-    const validValues = valueNew_11.every(item_2 => item_2.valid);
+    const valueNew_12 = inputToValue(valueNew__2);
+    const validValues = valueNew_12.every(item_2 => item_2.valid);
 
     // Only update values if input is valid
     // format used to make the value
     if (validValues) {
       // Error
-      errorCheck(valueNew_11);
+      errorCheck(valueNew_12);
 
       // Update value
-      onUpdate(valueNew_11);
+      onUpdate(valueNew_12);
 
       // Update calendar
-      onUpdateCalendar(valueNew_11[0]);
+      onUpdateCalendar(valueNew_12[0]);
     }
     if (!valueNew__2) {
       onUpdate([null, null]);
@@ -457,20 +462,20 @@ const DatePicker = props__ => {
     setInput(valueNew__2);
   };
   const onInputChangeModal = valueNew__3 => {
-    const valueNew_12 = inputToValue(valueNew__3);
-    const validValues_0 = valueNew_12.every(item_3 => item_3.valid);
+    const valueNew_13 = inputToValue(valueNew__3);
+    const validValues_0 = valueNew_13.every(item_3 => item_3.valid);
 
     // Only update values if input is valid
     // format used to make the value
     if (validValues_0) {
       // Error
-      errorCheck(valueNew_12);
+      errorCheck(valueNew_13);
 
       // Update value
-      onUpdate(valueNew_12);
+      onUpdate(valueNew_13);
 
       // Update calendar
-      onUpdateCalendar(valueNew_12[0]);
+      onUpdateCalendar(valueNew_13[0]);
     }
 
     // Update input for free typing
@@ -729,6 +734,8 @@ const DatePicker = props__ => {
   }));
   const desktop = /*#__PURE__*/_jsx(Calendar, _objectSpread(_objectSpread(_objectSpread({
     value: value,
+    tonal: tonal,
+    color: color,
     calendar: calendar,
     onChange: onCalendarChange,
     onChangeCalendar: onCalendarChangeCalendar,