@mailstep/design-system 0.6.2-beta.3 → 0.6.2-beta.5

package/ui/Elements/DatePicker/DatePicker.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,29 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -44,50 +20,46 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var moment_1 = __importDefault(require("moment"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import moment from 'moment';
 // @TODO each language has 62kb gziped, please replace moment with different lib
-require("moment/dist/locale/cs");
-require("moment/dist/locale/ru");
-require("moment/dist/locale/sk");
-require("moment/dist/locale/it");
-require("moment/dist/locale/el");
-var react_1 = __importStar(require("react"));
-var DateTime_1 = __importDefault(require("./Datetime/DateTime"));
-var styled_components_1 = require("@xstyled/styled-components");
-var styles_1 = require("./styles");
-var SpaceAround_1 = __importDefault(require("../SpaceAround"));
-var Input_1 = __importDefault(require("../../Forms/Input"));
-var ThemeProvider_1 = require("../../ThemeProvider/ThemeProvider");
+import 'moment/dist/locale/cs';
+import 'moment/dist/locale/ru';
+import 'moment/dist/locale/sk';
+import 'moment/dist/locale/it';
+import 'moment/dist/locale/el';
+import React, { useCallback, useContext } from 'react';
+import DatetimePicker from './Datetime/DateTime.js';
+import { x } from '@xstyled/styled-components';
+import { DatePickerBase } from './styles.js';
+import SpaceAroundWrap from '../SpaceAround/index.js';
+import Input from '../../Forms/Input/index.js';
+import { LanguageContext } from '../../ThemeProvider/ThemeProvider.js';
 var defaultDateFormat = 'DD.MM.YYYY';
 var DatePicker = function (_a) {
     var name = _a.name, value = _a.value, initialViewDate = _a.initialViewDate, error = _a.error, label = _a.label, disabled = _a.disabled, isValidDate = _a.isValidDate, onChange = _a.onChange, _b = _a.dateFormat, dateFormat = _b === void 0 ? defaultDateFormat : _b, _c = _a.timeFormat, timeFormat = _c === void 0 ? false : _c, open = _a.open, _d = _a.secondValue, secondValue = _d === void 0 ? null : _d, input = _a.input, _e = _a.icon, icon = _e === void 0 ? true : _e, _f = _a.showInputLabel, showInputLabel = _f === void 0 ? false : _f, _g = _a.showCalendarLabel, showCalendarLabel = _g === void 0 ? true : _g, _h = _a.spaceAround, spaceAround = _h === void 0 ? false : _h, className = _a.className, onClear = _a.onClear, passProps = __rest(_a, ["name", "value", "initialViewDate", "error", "label", "disabled", "isValidDate", "onChange", "dateFormat", "timeFormat", "open", "secondValue", "input", "icon", "showInputLabel", "showCalendarLabel", "spaceAround", "className", "onClear"]);
     var format = "".concat(dateFormat).concat(timeFormat ? " ".concat(timeFormat) : "");
-    var isValid = !!value && (0, moment_1.default)(value, format).isValid();
-    var stringValue = isValid ? (0, moment_1.default)(value, format).format(format) : value;
-    var locale = (0, react_1.useContext)(ThemeProvider_1.LanguageContext);
-    var handleRenderInput = (0, react_1.useCallback)(function (_, openCalendar) {
-        return ((0, jsx_runtime_1.jsx)(Input_1.default, { type: "text", icon: icon ? 'calendar' : undefined, name: name, error: error, disabled: disabled, isInvalid: !!error, label: showInputLabel ? label : undefined, value: stringValue, onFocus: openCalendar, iconOnClick: openCalendar, onClear: onClear }));
+    var isValid = !!value && moment(value, format).isValid();
+    var stringValue = isValid ? moment(value, format).format(format) : value;
+    var locale = useContext(LanguageContext);
+    var handleRenderInput = useCallback(function (_, openCalendar) {
+        return (_jsx(Input, { type: "text", icon: icon ? 'calendar' : undefined, name: name, error: error, disabled: disabled, isInvalid: !!error, label: showInputLabel ? label : undefined, value: stringValue, onFocus: openCalendar, iconOnClick: openCalendar, onClear: onClear }));
     }, [name, stringValue, error, label, showInputLabel, isValid, disabled]);
-    var handleRenderView = (0, react_1.useCallback)(function (_, renderCalendar) {
+    var handleRenderView = useCallback(function (_, renderCalendar) {
         if (label && !showInputLabel) {
-            return ((0, jsx_runtime_1.jsx)(styled_components_1.x.div, { display: "flex", flexDirection: "column", children: renderCalendar() }));
+            return (_jsx(x.div, { display: "flex", flexDirection: "column", children: renderCalendar() }));
         }
         return renderCalendar();
     }, [label, showInputLabel]);
-    var handleChange = (0, react_1.useCallback)(function (value) {
+    var handleChange = useCallback(function (value) {
         var parsed = typeof value === 'string' ? value : value.toDate();
         onChange === null || onChange === void 0 ? void 0 : onChange(parsed);
     }, [onChange]);
-    var handleIsValid = (0, react_1.useCallback)(function (current, selected) {
+    var handleIsValid = useCallback(function (current, selected) {
         var _a, _b;
         var parsed = [(_a = current === null || current === void 0 ? void 0 : current.toDate) === null || _a === void 0 ? void 0 : _a.call(current), (_b = selected === null || selected === void 0 ? void 0 : selected.toDate) === null || _b === void 0 ? void 0 : _b.call(selected)];
         return isValidDate ? isValidDate.apply(void 0, parsed) : true;
     }, [isValidDate]);
-    return ((0, jsx_runtime_1.jsx)(SpaceAround_1.default, { spaceAround: spaceAround, children: (0, jsx_runtime_1.jsx)(styles_1.DatePickerBase, { className: className, children: (0, jsx_runtime_1.jsx)(DateTime_1.default, __assign({ value: value, dateFormat: dateFormat, timeFormat: timeFormat, secondValue: secondValue, open: open, input: input, label: showCalendarLabel ? label : undefined, onChange: handleChange, isValidDate: handleIsValid, renderView: handleRenderView, renderInput: handleRenderInput, initialViewDate: initialViewDate, locale: locale }, passProps)) }) }));
+    return (_jsx(SpaceAroundWrap, { spaceAround: spaceAround, children: _jsx(DatePickerBase, { className: className, children: _jsx(DatetimePicker, __assign({ value: value, dateFormat: dateFormat, timeFormat: timeFormat, secondValue: secondValue, open: open, input: input, label: showCalendarLabel ? label : undefined, onChange: handleChange, isValidDate: handleIsValid, renderView: handleRenderView, renderInput: handleRenderInput, initialViewDate: initialViewDate, locale: locale }, passProps)) }) }));
 };
-exports.default = react_1.default.memo(DatePicker);
+export default React.memo(DatePicker);

package/ui/Elements/DatePicker/Datetime/DateTime.js

@@ -1,4 +1,3 @@
-"use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -25,18 +24,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
-var moment_1 = __importDefault(require("moment"));
-var react_1 = __importDefault(require("react"));
-var DaysView_1 = __importDefault(require("./views/DaysView"));
-var MonthsView_1 = __importDefault(require("./views/MonthsView"));
-var YearsView_1 = __importDefault(require("./views/YearsView"));
-var react_onclickoutside_1 = __importDefault(require("react-onclickoutside"));
+import moment from 'moment';
+import React from 'react';
+import DaysView from './views/DaysView.js';
+import MonthsView from './views/MonthsView.js';
+import YearsView from './views/YearsView.js';
+import onClickOutside from 'react-onclickoutside';
 var viewModes = {
     YEARS: 'years',
     MONTHS: 'months',
@@ -59,7 +54,7 @@ var Datetime = /** @class */ (function (_super) {
                 isValidDate: props.isValidDate,
                 updateDate: _this._updateDate,
                 navigate: _this._viewNavigate,
-                moment: moment_1.default,
+                moment: moment,
                 showView: _this._showView,
             };
             // Probably updateOn, updateSelectedDate and setDate can be merged in the same method
@@ -69,11 +64,11 @@ var Datetime = /** @class */ (function (_super) {
                     // Used viewProps
                     // { viewDate, selectedDate, renderYear, isValidDate, navigate, showView, updateDate }
                     viewProps.renderYear = props.renderYear;
-                    return (0, jsx_runtime_1.jsx)(YearsView_1.default, __assign({}, viewProps));
+                    return _jsx(YearsView, __assign({}, viewProps));
                 case viewModes.MONTHS:
                     // { viewDate, selectedDate, renderMonth, isValidDate, navigate, showView, updateDate }
                     viewProps.renderMonth = props.renderMonth;
-                    return (0, jsx_runtime_1.jsx)(MonthsView_1.default, __assign({}, viewProps));
+                    return _jsx(MonthsView, __assign({}, viewProps));
                 case viewModes.DAYS:
                     // { viewDate, selectedDate, renderDay, isValidDate, navigate, showView, updateDate, timeFormat
                     viewProps.renderDay = props.renderDay;
@@ -81,13 +76,13 @@ var Datetime = /** @class */ (function (_super) {
                     viewProps.setTime = _this._setTime;
                     viewProps.value = _this.props.value;
                     viewProps.disabled = _this.props.disabled;
-                    return (0, jsx_runtime_1.jsx)(DaysView_1.default, __assign({}, viewProps));
+                    return _jsx(DaysView, __assign({}, viewProps));
                 default:
                     viewProps.renderDay = props.renderDay;
                     viewProps.timeFormat = _this.getFormat('time');
                     viewProps.setTime = _this._setTime;
                     viewProps.value = _this.props.value;
-                    return (0, jsx_runtime_1.jsx)(DaysView_1.default, __assign({}, viewProps));
+                    return _jsx(DaysView, __assign({}, viewProps));
             }
         };
         _this._showView = function (view, date) {
@@ -209,16 +204,16 @@ var Datetime = /** @class */ (function (_super) {
         return _this;
     }
     Datetime.prototype.render = function () {
-        return ((0, jsx_runtime_1.jsxs)(ClickableWrapper, { className: this.getClassName(), onClickOut: this._handleClickOutside, children: [this.renderInput(), (0, jsx_runtime_1.jsx)("div", { className: "rdtPicker", children: this.renderView() })] }));
+        return (_jsxs(ClickableWrapper, { className: this.getClassName(), onClickOut: this._handleClickOutside, children: [this.renderInput(), _jsx("div", { className: "rdtPicker", children: this.renderView() })] }));
     };
     Datetime.prototype.renderInput = function () {
         if (!this.props.input)
             return;
         var finalInputProps = __assign(__assign({ type: 'text', className: 'form-control', value: this.getInputValue() }, this.props.inputProps), { onFocus: this._onInputFocus, onChange: this._onInputChange, onKeyDown: this._onInputKeyDown, onClick: this._onInputClick });
         if (this.props.renderInput) {
-            return (0, jsx_runtime_1.jsx)("div", { children: this.props.renderInput(finalInputProps, this._openCalendar, this._closeCalendar) });
+            return _jsx("div", { children: this.props.renderInput(finalInputProps, this._openCalendar, this._closeCalendar) });
         }
-        return (0, jsx_runtime_1.jsx)("input", __assign({}, finalInputProps));
+        return _jsx("input", __assign({}, finalInputProps));
     };
     Datetime.prototype.renderView = function () {
         return this.props.renderView(this.state.currentView, this._renderCalendar);
@@ -350,13 +345,13 @@ var Datetime = /** @class */ (function (_super) {
         props = props || this.props;
         var m = null;
         if (props.utc) {
-            m = moment_1.default.utc(date, format, props.strictParsing);
+            m = moment.utc(date, format, props.strictParsing);
         }
         else if (props.displayTimeZone) {
-            m = moment_1.default.tz(date, format, props.displayTimeZone);
+            m = moment.tz(date, format, props.displayTimeZone);
         }
         else {
-            m = (0, moment_1.default)(date, format, props.strictParsing);
+            m = moment(date, format, props.strictParsing);
         }
         if (props.locale)
             m.locale(props.locale);
@@ -364,7 +359,7 @@ var Datetime = /** @class */ (function (_super) {
     };
     Datetime.prototype.checkTZ = function () {
         var displayTimeZone = this.props.displayTimeZone;
-        if (displayTimeZone && !this.tzWarning && !moment_1.default.tz) {
+        if (displayTimeZone && !this.tzWarning && !moment.tz) {
             this.tzWarning = true;
         }
     };
@@ -496,19 +491,19 @@ var Datetime = /** @class */ (function (_super) {
         renderView: function (_, renderFunc) { return renderFunc(); },
     };
     // Make moment accessible through the Datetime class
-    Datetime.moment = moment_1.default;
+    Datetime.moment = moment;
     return Datetime;
-}(react_1.default.Component));
-exports.default = Datetime;
+}(React.Component));
+export default Datetime;
 var ClickOutBase = /** @class */ (function (_super) {
     __extends(ClickOutBase, _super);
     function ClickOutBase() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.container = react_1.default.createRef();
+        _this.container = React.createRef();
         return _this;
     }
     ClickOutBase.prototype.render = function () {
-        return ((0, jsx_runtime_1.jsx)("div", { className: this.props.className, ref: this.container, children: this.props.children }));
+        return (_jsx("div", { className: this.props.className, ref: this.container, children: this.props.children }));
     };
     ClickOutBase.prototype.handleClickOutside = function (e) {
         this.props.onClickOut(e);
@@ -517,5 +512,5 @@ var ClickOutBase = /** @class */ (function (_super) {
         return this.container.current;
     };
     return ClickOutBase;
-}(react_1.default.Component));
-var ClickableWrapper = (0, react_onclickoutside_1.default)(ClickOutBase);
+}(React.Component));
+var ClickableWrapper = onClickOutside(ClickOutBase);

package/ui/Elements/DatePicker/Datetime/components/Timepicker.js

@@ -1,62 +1,36 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Timepicker = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var system_1 = require("@xstyled/system");
-var Btn = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transform: rotate(90deg);\n  font-size: 24px;\n  margin: -4px 0;\n  background-color: transparent !important;\n  border: none;\n  color: ", ";\n  &:disabled:hover {\n    color: ", ";\n    cursor: default;\n  }\n  &:hover {\n    color: ", ";\n    background-color: transparent !important;\n  }\n"], ["\n  transform: rotate(90deg);\n  font-size: 24px;\n  margin: -4px 0;\n  background-color: transparent !important;\n  border: none;\n  color: ", ";\n  &:disabled:hover {\n    color: ", ";\n    cursor: default;\n  }\n  &:hover {\n    color: ", ";\n    background-color: transparent !important;\n  }\n"])), (0, system_1.th)('colors.lightGray4'), (0, system_1.th)('colors.lightGray4'), (0, system_1.th)('colors.red2'));
-var TimeWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: baseline;\n  justify-content: center;\n  border: 1px solid ", ";\n  border-radius: 0.7rem;\n  padding: 4px 10px;\n  margin: 0 10px;\n"], ["\n  display: flex;\n  align-items: baseline;\n  justify-content: center;\n  border: 1px solid ", ";\n  border-radius: 0.7rem;\n  padding: 4px 10px;\n  margin: 0 10px;\n"])), (0, system_1.th)('colors.lightGray2'));
-var Hours = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 22px;\n  font-weight: 700;\n  width: 24px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"], ["\n  font-size: 22px;\n  font-weight: 700;\n  width: 24px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"])));
-var Minutes = styled_components_1.default.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: 700;\n  font-size: 16px;\n  width: 20px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"], ["\n  font-weight: 700;\n  font-size: 16px;\n  width: 20px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"])));
-var Timepicker = function (_a) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import styled, { x } from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+var Btn = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transform: rotate(90deg);\n  font-size: 24px;\n  margin: -4px 0;\n  background-color: transparent !important;\n  border: none;\n  color: ", ";\n  &:disabled:hover {\n    color: ", ";\n    cursor: default;\n  }\n  &:hover {\n    color: ", ";\n    background-color: transparent !important;\n  }\n"], ["\n  transform: rotate(90deg);\n  font-size: 24px;\n  margin: -4px 0;\n  background-color: transparent !important;\n  border: none;\n  color: ", ";\n  &:disabled:hover {\n    color: ", ";\n    cursor: default;\n  }\n  &:hover {\n    color: ", ";\n    background-color: transparent !important;\n  }\n"])), th('colors.lightGray4'), th('colors.lightGray4'), th('colors.red2'));
+var TimeWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: baseline;\n  justify-content: center;\n  border: 1px solid ", ";\n  border-radius: 0.7rem;\n  padding: 4px 10px;\n  margin: 0 10px;\n"], ["\n  display: flex;\n  align-items: baseline;\n  justify-content: center;\n  border: 1px solid ", ";\n  border-radius: 0.7rem;\n  padding: 4px 10px;\n  margin: 0 10px;\n"])), th('colors.lightGray2'));
+var Hours = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 22px;\n  font-weight: 700;\n  width: 24px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"], ["\n  font-size: 22px;\n  font-weight: 700;\n  width: 24px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"])));
+var Minutes = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: 700;\n  font-size: 16px;\n  width: 20px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"], ["\n  font-weight: 700;\n  font-size: 16px;\n  width: 20px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"])));
+export var Timepicker = function (_a) {
     var _b, _c, _d, _e;
     var setTime = _a.setTime, value = _a.value, disabled = _a.disabled;
     var initialHours = (_c = (_b = value === null || value === void 0 ? void 0 : value.getHours) === null || _b === void 0 ? void 0 : _b.call(value)) !== null && _c !== void 0 ? _c : 0;
     var initialMinutes = (_e = (_d = value === null || value === void 0 ? void 0 : value.getMinutes) === null || _d === void 0 ? void 0 : _d.call(value)) !== null && _e !== void 0 ? _e : 0;
     var regExp = '^[0-9]*$';
-    var _f = (0, react_1.useState)(initialHours), hours = _f[0], setHours = _f[1];
-    var _g = (0, react_1.useState)(initialMinutes), minutes = _g[0], setMinutes = _g[1];
-    var increaseHour = (0, react_1.useCallback)(function () {
+    var _f = useState(initialHours), hours = _f[0], setHours = _f[1];
+    var _g = useState(initialMinutes), minutes = _g[0], setMinutes = _g[1];
+    var increaseHour = useCallback(function () {
         hours === 23 ? setHours(0) : setHours(hours + 1);
     }, [hours]);
-    var decreaseHour = (0, react_1.useCallback)(function () {
+    var decreaseHour = useCallback(function () {
         hours === 0 ? setHours(23) : setHours(hours - 1);
     }, [hours]);
-    var increaseMinutes = (0, react_1.useCallback)(function () {
+    var increaseMinutes = useCallback(function () {
         minutes >= 55 ? setMinutes(minutes - 55) : setMinutes(minutes + 5);
     }, [minutes]);
-    var decreaseMinutes = (0, react_1.useCallback)(function () {
+    var decreaseMinutes = useCallback(function () {
         minutes <= 5 ? setMinutes(minutes + 55) : setMinutes(minutes - 5);
     }, [minutes]);
-    var onHoursChange = (0, react_1.useCallback)(function (e) {
+    var onHoursChange = useCallback(function (e) {
         if (e.target.value.match(regExp) && Number(e.target.value) <= 23) {
             setHours(Number(e.target.value));
         }
@@ -64,7 +38,7 @@ var Timepicker = function (_a) {
             setHours(0);
         }
     }, []);
-    var onMinutesChange = (0, react_1.useCallback)(function (e) {
+    var onMinutesChange = useCallback(function (e) {
         if (e.target.value.match(regExp) && Number(e.target.value) <= 59) {
             setMinutes(Number(e.target.value));
         }
@@ -72,13 +46,12 @@ var Timepicker = function (_a) {
             setMinutes(0);
         }
     }, []);
-    (0, react_1.useEffect)(function () {
+    useEffect(function () {
         !!value && setTime('hours', hours);
     }, [hours]);
-    (0, react_1.useEffect)(function () {
+    useEffect(function () {
         !!value && setTime('minutes', minutes);
     }, [minutes]);
-    return ((0, jsx_runtime_1.jsx)("td", { colSpan: 7, children: (0, jsx_runtime_1.jsx)(styled_components_1.x.div, { display: "flex", flexDirection: "column", alignItems: "flex-start", pt: "1rem", w: "fit-content", children: (0, jsx_runtime_1.jsxs)(styled_components_1.x.div, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(styled_components_1.x.div, { display: "flex", flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Btn, { disabled: disabled, onClick: increaseHour, children: "\u2039" }), (0, jsx_runtime_1.jsx)(Btn, { disabled: disabled, onClick: decreaseHour, children: "\u203A" })] }), (0, jsx_runtime_1.jsxs)(TimeWrapper, { children: [(0, jsx_runtime_1.jsx)(Hours, { value: hours < 10 ? "0".concat(hours) : hours, disabled: disabled, onChange: onHoursChange }), (0, jsx_runtime_1.jsx)(styled_components_1.x.div, { mx: "7px", color: "lightGray4", children: "|" }), (0, jsx_runtime_1.jsx)(Minutes, { value: minutes < 10 ? "0".concat(minutes) : minutes, disabled: disabled, onChange: onMinutesChange })] }), (0, jsx_runtime_1.jsxs)(styled_components_1.x.div, { display: "flex", flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Btn, { disabled: disabled, onClick: increaseMinutes, children: "\u2039" }), (0, jsx_runtime_1.jsx)(Btn, { disabled: disabled, onClick: decreaseMinutes, children: "\u203A" })] })] }) }) }));
+    return (_jsx("td", { colSpan: 7, children: _jsx(x.div, { display: "flex", flexDirection: "column", alignItems: "flex-start", pt: "1rem", w: "fit-content", children: _jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsxs(x.div, { display: "flex", flexDirection: "column", children: [_jsx(Btn, { disabled: disabled, onClick: increaseHour, children: "\u2039" }), _jsx(Btn, { disabled: disabled, onClick: decreaseHour, children: "\u203A" })] }), _jsxs(TimeWrapper, { children: [_jsx(Hours, { value: hours < 10 ? "0".concat(hours) : hours, disabled: disabled, onChange: onHoursChange }), _jsx(x.div, { mx: "7px", color: "lightGray4", children: "|" }), _jsx(Minutes, { value: minutes < 10 ? "0".concat(minutes) : minutes, disabled: disabled, onChange: onMinutesChange })] }), _jsxs(x.div, { display: "flex", flexDirection: "column", children: [_jsx(Btn, { disabled: disabled, onClick: increaseMinutes, children: "\u2039" }), _jsx(Btn, { disabled: disabled, onClick: decreaseMinutes, children: "\u203A" })] })] }) }) }));
 };
-exports.Timepicker = Timepicker;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Elements/DatePicker/Datetime/components/ViewNavigation.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,10 +9,8 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-function ViewNavigation(_a) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ViewNavigation(_a) {
     var onClickPrev = _a.onClickPrev, onClickSwitch = _a.onClickSwitch, onClickNext = _a.onClickNext, switchContent = _a.switchContent, switchColSpan = _a.switchColSpan, switchProps = _a.switchProps, label = _a.label;
-    return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { className: "rdtPrev", onClick: onClickPrev, children: (0, jsx_runtime_1.jsx)("span", { children: "\u2039" }) }), (0, jsx_runtime_1.jsx)("th", __assign({ className: "rdtSwitch", colSpan: switchColSpan, onClick: onClickSwitch }, switchProps, { children: switchContent })), (0, jsx_runtime_1.jsx)("th", { className: "rdtNext", onClick: onClickNext, children: (0, jsx_runtime_1.jsx)("span", { children: "\u203A" }) }), (0, jsx_runtime_1.jsx)("th", { colSpan: 2, className: "rdtLabel", children: label && label })] }));
+    return (_jsxs("tr", { children: [_jsx("th", { className: "rdtPrev", onClick: onClickPrev, children: _jsx("span", { children: "\u2039" }) }), _jsx("th", __assign({ className: "rdtSwitch", colSpan: switchColSpan, onClick: onClickSwitch }, switchProps, { children: switchContent })), _jsx("th", { className: "rdtNext", onClick: onClickNext, children: _jsx("span", { children: "\u203A" }) }), _jsx("th", { colSpan: 2, className: "rdtLabel", children: label && label })] }));
 }
-exports.default = ViewNavigation;

package/ui/Elements/DatePicker/Datetime/types.js

@@ -1,8 +1,7 @@
-"use strict";
 // Type definitions for react-datetime
 // Project: https://github.com/arqex/react-datetime
 // Definitions by: Ivan Verevkin <vereva@x-root.org>
 //     Updates by: Aaron Spaulding <aaron@sachimp.com>,
 //                 Karol Janyst <http://github.com/LKay>,
 //                 Javier Marquez <javi@arqex.com>
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/ui/Elements/DatePicker/Datetime/views/DaysView.js

@@ -1,4 +1,3 @@
-"use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -25,15 +24,11 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
-var react_1 = __importDefault(require("react"));
-var Timepicker_1 = require("../components/Timepicker");
-var ViewNavigation_1 = __importDefault(require("../components/ViewNavigation"));
+import React from 'react';
+import { Timepicker } from '../components/Timepicker.js';
+import ViewNavigation from '../components/ViewNavigation.js';
 var DaysView = /** @class */ (function (_super) {
     __extends(DaysView, _super);
     function DaysView() {
@@ -44,19 +39,19 @@ var DaysView = /** @class */ (function (_super) {
         return _this;
     }
     DaysView.prototype.render = function () {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "rdtDays", children: (0, jsx_runtime_1.jsxs)("table", { children: [(0, jsx_runtime_1.jsxs)("thead", { children: [this.renderNavigation(), this.renderDayHeaders()] }), (0, jsx_runtime_1.jsx)("tbody", { children: this.renderDays() }), this.renderFooter()] }) }));
+        return (_jsx("div", { className: "rdtDays", children: _jsxs("table", { children: [_jsxs("thead", { children: [this.renderNavigation(), this.renderDayHeaders()] }), _jsx("tbody", { children: this.renderDays() }), this.renderFooter()] }) }));
     };
     DaysView.prototype.renderNavigation = function () {
         var _this = this;
         var date = this.props.viewDate;
         var locale = date.localeData();
         var label = this.props.label;
-        return ((0, jsx_runtime_1.jsx)(ViewNavigation_1.default, { onClickPrev: function () { return _this.props.navigate(-1, 'months'); }, onClickSwitch: function () { return _this.props.showView('months'); }, onClickNext: function () { return _this.props.navigate(1, 'months'); }, switchContent: locale.months(date, 'DD[]MMMM') + ' ' + date.year(), switchColSpan: 3, label: label, switchProps: { 'data-value': this.props.viewDate.month() } }));
+        return (_jsx(ViewNavigation, { onClickPrev: function () { return _this.props.navigate(-1, 'months'); }, onClickSwitch: function () { return _this.props.showView('months'); }, onClickNext: function () { return _this.props.navigate(1, 'months'); }, switchContent: locale.months(date, 'DD[]MMMM') + ' ' + date.year(), switchColSpan: 3, label: label, switchProps: { 'data-value': this.props.viewDate.month() } }));
     };
     DaysView.prototype.renderDayHeaders = function () {
         var locale = this.props.viewDate.localeData();
-        var dayItems = getDaysOfWeek(locale).map(function (day, index) { return ((0, jsx_runtime_1.jsx)("th", { className: "dow", children: day }, day + index)); });
-        return (0, jsx_runtime_1.jsx)("tr", { children: dayItems });
+        var dayItems = getDaysOfWeek(locale).map(function (day, index) { return (_jsx("th", { className: "dow", children: day }, day + index)); });
+        return _jsx("tr", { children: dayItems });
     };
     DaysView.prototype.renderDays = function () {
         var date = this.props.viewDate;
@@ -74,7 +69,7 @@ var DaysView = /** @class */ (function (_super) {
             row.push(this.renderDay(startDate, startOfMonth, endOfMonth));
             startDate.add(1, 'd');
         }
-        return rows.map(function (r, i) { return (0, jsx_runtime_1.jsx)("tr", { children: r }, "".concat(endDate.month(), "_").concat(i)); });
+        return rows.map(function (r, i) { return _jsx("tr", { children: r }, "".concat(endDate.month(), "_").concat(i)); });
     };
     DaysView.prototype.renderDay = function (date, startOfMonth, endOfMonth) {
         var selectedDate = this.props.selectedDate;
@@ -122,15 +117,15 @@ var DaysView = /** @class */ (function (_super) {
         var setTime = this.props.setTime;
         var value = this.props.value;
         var disabled = this.props.disabled;
-        return ((0, jsx_runtime_1.jsx)("tfoot", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)(Timepicker_1.Timepicker, { setTime: setTime, value: value, disabled: disabled }) }) }));
+        return (_jsx("tfoot", { children: _jsx("tr", { children: _jsx(Timepicker, { setTime: setTime, value: value, disabled: disabled }) }) }));
     };
     DaysView.defaultProps = {
         isValidDate: function () { return true; },
-        renderDay: function (props, date) { return (0, jsx_runtime_1.jsx)("td", __assign({}, props, { children: date.date() })); },
+        renderDay: function (props, date) { return _jsx("td", __assign({}, props, { children: date.date() })); },
     };
     return DaysView;
-}(react_1.default.Component));
-exports.default = DaysView;
+}(React.Component));
+export default DaysView;
 function getRow(rows, day) {
     return rows[Math.floor(day / 7)];
 }

package/ui/Elements/DatePicker/Datetime/views/MonthsView.js

@@ -1,4 +1,3 @@
-"use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -25,14 +24,10 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
-var react_1 = __importDefault(require("react"));
-var ViewNavigation_1 = __importDefault(require("../components/ViewNavigation"));
+import React from 'react';
+import ViewNavigation from '../components/ViewNavigation.js';
 var MonthsView = /** @class */ (function (_super) {
     __extends(MonthsView, _super);
     function MonthsView() {
@@ -43,12 +38,12 @@ var MonthsView = /** @class */ (function (_super) {
         return _this;
     }
     MonthsView.prototype.render = function () {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "rdtMonths", children: [(0, jsx_runtime_1.jsx)("table", { children: (0, jsx_runtime_1.jsx)("thead", { children: this.renderNavigation() }) }), (0, jsx_runtime_1.jsx)("table", { children: (0, jsx_runtime_1.jsx)("tbody", { children: this.renderMonths() }) })] }));
+        return (_jsxs("div", { className: "rdtMonths", children: [_jsx("table", { children: _jsx("thead", { children: this.renderNavigation() }) }), _jsx("table", { children: _jsx("tbody", { children: this.renderMonths() }) })] }));
     };
     MonthsView.prototype.renderNavigation = function () {
         var _this = this;
         var year = this.props.viewDate.year();
-        return ((0, jsx_runtime_1.jsx)(ViewNavigation_1.default, { onClickPrev: function () { return _this.props.navigate(-1, 'years'); }, onClickSwitch: function () { return _this.props.showView('years'); }, onClickNext: function () { return _this.props.navigate(1, 'years'); }, switchContent: year, switchColSpan: "2" }));
+        return (_jsx(ViewNavigation, { onClickPrev: function () { return _this.props.navigate(-1, 'years'); }, onClickSwitch: function () { return _this.props.showView('years'); }, onClickNext: function () { return _this.props.navigate(1, 'years'); }, switchContent: year, switchColSpan: "2" }));
     };
     MonthsView.prototype.renderMonths = function () {
         // 12 months in 3 rows for every view
@@ -57,7 +52,7 @@ var MonthsView = /** @class */ (function (_super) {
             var row = getRow(rows, month);
             row.push(this.renderMonth(month));
         }
-        return rows.map(function (months, i) { return (0, jsx_runtime_1.jsx)("tr", { children: months }, i); });
+        return rows.map(function (months, i) { return _jsx("tr", { children: months }, i); });
     };
     MonthsView.prototype.renderMonth = function (month) {
         var selectedDate = this.props.selectedDate;
@@ -76,7 +71,7 @@ var MonthsView = /** @class */ (function (_super) {
         if (this.props.renderMonth) {
             return this.props.renderMonth(props, month, this.props.viewDate.year(), this.props.selectedDate && this.props.selectedDate.clone());
         }
-        return (0, jsx_runtime_1.jsx)("td", __assign({}, props, { children: this.getMonthText(month) }));
+        return _jsx("td", __assign({}, props, { children: this.getMonthText(month) }));
     };
     MonthsView.prototype.isDisabledMonth = function (month) {
         var isValidDate = this.props.isValidDate;
@@ -100,8 +95,8 @@ var MonthsView = /** @class */ (function (_super) {
         return capitalize(monthStr.substring(0, 3));
     };
     return MonthsView;
-}(react_1.default.Component));
-exports.default = MonthsView;
+}(React.Component));
+export default MonthsView;
 function getRow(rows, year) {
     if (year < 4) {
         return rows[0];

package/ui/Elements/DatePicker/Datetime/views/YearsView.js

@@ -1,4 +1,3 @@
-"use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -25,14 +24,10 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
-var react_1 = __importDefault(require("react"));
-var ViewNavigation_1 = __importDefault(require("../components/ViewNavigation"));
+import React from 'react';
+import ViewNavigation from '../components/ViewNavigation.js';
 var YearsView = /** @class */ (function (_super) {
     __extends(YearsView, _super);
     function YearsView() {
@@ -44,12 +39,12 @@ var YearsView = /** @class */ (function (_super) {
         return _this;
     }
     YearsView.prototype.render = function () {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "rdtYears", children: [(0, jsx_runtime_1.jsx)("table", { children: (0, jsx_runtime_1.jsx)("thead", { children: this.renderNavigation() }) }), (0, jsx_runtime_1.jsx)("table", { children: (0, jsx_runtime_1.jsx)("tbody", { children: this.renderYears() }) })] }));
+        return (_jsxs("div", { className: "rdtYears", children: [_jsx("table", { children: _jsx("thead", { children: this.renderNavigation() }) }), _jsx("table", { children: _jsx("tbody", { children: this.renderYears() }) })] }));
     };
     YearsView.prototype.renderNavigation = function () {
         var _this = this;
         var viewYear = this.getViewYear();
-        return ((0, jsx_runtime_1.jsx)(ViewNavigation_1.default, { onClickPrev: function () { return _this.props.navigate(-10, 'years'); }, onClickSwitch: function () { return _this.props.showView('years'); }, onClickNext: function () { return _this.props.navigate(10, 'years'); }, switchContent: "".concat(viewYear, "-").concat(viewYear + 9) }));
+        return (_jsx(ViewNavigation, { onClickPrev: function () { return _this.props.navigate(-10, 'years'); }, onClickSwitch: function () { return _this.props.showView('years'); }, onClickNext: function () { return _this.props.navigate(10, 'years'); }, switchContent: "".concat(viewYear, "-").concat(viewYear + 9) }));
     };
     YearsView.prototype.renderYears = function () {
         var viewYear = this.getViewYear();
@@ -59,7 +54,7 @@ var YearsView = /** @class */ (function (_super) {
             var row = getRow(rows, year - viewYear);
             row.push(this.renderYear(year));
         }
-        return rows.map(function (years, i) { return (0, jsx_runtime_1.jsx)("tr", { children: years }, i); });
+        return rows.map(function (years, i) { return _jsx("tr", { children: years }, i); });
     };
     YearsView.prototype.renderYear = function (year) {
         var selectedYear = this.getSelectedYear();
@@ -106,11 +101,11 @@ var YearsView = /** @class */ (function (_super) {
         return true;
     };
     YearsView.defaultProps = {
-        renderYear: function (props, year) { return (0, jsx_runtime_1.jsx)("td", __assign({}, props, { children: year })); },
+        renderYear: function (props, year) { return _jsx("td", __assign({}, props, { children: year })); },
     };
     return YearsView;
-}(react_1.default.Component));
-exports.default = YearsView;
+}(React.Component));
+export default YearsView;
 function getRow(rows, year) {
     if (year < 3) {
         return rows[0];