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

package/ui/Elements/Card/index.js

@@ -1,3 +1,12 @@
-import CardComponent from './Card';
-export { Card, CardImage, CardBody } from './Card';
-export default CardComponent;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardBody = exports.CardImage = exports.Card = void 0;
+var Card_1 = __importDefault(require("./Card"));
+var Card_2 = require("./Card");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_2.Card; } });
+Object.defineProperty(exports, "CardImage", { enumerable: true, get: function () { return Card_2.CardImage; } });
+Object.defineProperty(exports, "CardBody", { enumerable: true, get: function () { return Card_2.CardBody; } });
+exports.default = Card_1.default;

package/ui/Elements/Card/stories/Card.stories.js

@@ -1,30 +1,33 @@
-import { Card } from '../Card';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithBackground = exports.WithShadow = exports.WithPadding = exports.NoBorder = exports.Default = void 0;
+var Card_1 = require("../Card");
 var longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
 var meta = {
     title: 'Elements/Card',
-    component: Card,
+    component: Card_1.Card,
     tags: ['autodocs'],
     argTypes: {},
 };
-export default meta;
-export var Default = {
+exports.default = meta;
+exports.Default = {
     args: {
         children: longText,
     },
 };
-export var NoBorder = {
+exports.NoBorder = {
     args: {
         children: longText,
         hasBorder: false,
     },
 };
-export var WithPadding = {
+exports.WithPadding = {
     args: {
         children: longText,
         p: '20px',
     },
 };
-export var WithShadow = {
+exports.WithShadow = {
     args: {
         display: 'block',
         shadow: true,
@@ -32,7 +35,7 @@ export var WithShadow = {
         p: '20px',
     },
 };
-export var WithBackground = {
+exports.WithBackground = {
     args: {
         display: 'block',
         shadow: true,

package/ui/Elements/Card/stories/CardComponent.stories.js

@@ -1,25 +1,31 @@
-import CardComponent from '../Card';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardWithoutImage = exports.ColoredCard = exports.Default = void 0;
+var Card_1 = __importDefault(require("../Card"));
 var meta = {
     title: 'Elements/CardComponent',
-    component: CardComponent,
+    component: Card_1.default,
     tags: ['autodocs'],
     argTypes: {},
 };
-export default meta;
-export var Default = {
+exports.default = meta;
+exports.Default = {
     args: {
         img: 'http://via.placeholder.com/640x360',
         body: "Card body"
     },
 };
-export var ColoredCard = {
+exports.ColoredCard = {
     args: {
         img: 'http://via.placeholder.com/640x360',
         body: "Card body",
         color: "success"
     },
 };
-export var CardWithoutImage = {
+exports.CardWithoutImage = {
     args: {
         body: "Card body",
         color: "success"

package/ui/Elements/Card/styles.js

@@ -1,15 +1,41 @@
+"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;
 };
-import styled, { x, css, down } from '@xstyled/styled-components';
-import { th } from '@xstyled/styled-components';
-var wrapper = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  box-sizing: border-box;\n  font-family: ", ";\n  :after {\n    box-sizing: border-box;\n  }\n"], ["\n  display: flex;\n  box-sizing: border-box;\n  font-family: ", ";\n  :after {\n    box-sizing: border-box;\n  }\n"])), th('fonts.primary'));
-export var CardWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  display: ", ";\n  justify-content: center;\n  flex-wrap: wrap;\n"], ["\n  ", ";\n  display: ", ";\n  justify-content: center;\n  flex-wrap: wrap;\n"])), wrapper, function (_a) {
+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.StyledBody = exports.StyledImage = exports.ImageWrapper = exports.StyledCard = exports.CardWrapper = void 0;
+var styled_components_1 = __importStar(require("@xstyled/styled-components"));
+var styled_components_2 = require("@xstyled/styled-components");
+var wrapper = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  box-sizing: border-box;\n  font-family: ", ";\n  :after {\n    box-sizing: border-box;\n  }\n"], ["\n  display: flex;\n  box-sizing: border-box;\n  font-family: ", ";\n  :after {\n    box-sizing: border-box;\n  }\n"])), (0, styled_components_2.th)('fonts.primary'));
+exports.CardWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  display: ", ";\n  justify-content: center;\n  flex-wrap: wrap;\n"], ["\n  ", ";\n  display: ", ";\n  justify-content: center;\n  flex-wrap: wrap;\n"])), wrapper, function (_a) {
     var block = _a.block;
     return (block ? 'block' : 'inline-flex');
 });
-export var StyledCard = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: space-between;\n  display: ", ";\n  padding: ", ";\n  box-shadow: ", ";\n  border: ", ";\n  background-color: ", ";\n  border-color: lightGray3;\n  border-radius: 4px;\n"], ["\n  justify-content: space-between;\n  display: ", ";\n  padding: ", ";\n  box-shadow: ", ";\n  border: ", ";\n  background-color: ", ";\n  border-color: lightGray3;\n  border-radius: 4px;\n"])), function (_a) {
+exports.StyledCard = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: space-between;\n  display: ", ";\n  padding: ", ";\n  box-shadow: ", ";\n  border: ", ";\n  background-color: ", ";\n  border-color: lightGray3;\n  border-radius: 4px;\n"], ["\n  justify-content: space-between;\n  display: ", ";\n  padding: ", ";\n  box-shadow: ", ";\n  border: ", ";\n  background-color: ", ";\n  border-color: lightGray3;\n  border-radius: 4px;\n"])), function (_a) {
     var block = _a.block;
     return (block ? 'block' : 'inline-flex');
 }, function (_a) {
@@ -17,18 +43,18 @@ export var StyledCard = styled.div(templateObject_3 || (templateObject_3 = __mak
     return p || 'initial';
 }, function (_a) {
     var shadow = _a.shadow;
-    return (shadow ? th.shadow('smooth') : 'none');
+    return (shadow ? styled_components_2.th.shadow('smooth') : 'none');
 }, function (_a) {
     var hasBorder = _a.hasBorder;
-    return (hasBorder ? th.border('slim') : 'none');
+    return (hasBorder ? styled_components_2.th.border('slim') : 'none');
 }, function (_a) {
     var backgroundColor = _a.backgroundColor;
-    return (backgroundColor ? th.color(backgroundColor) : 'initial');
+    return (backgroundColor ? styled_components_2.th.color(backgroundColor) : 'initial');
 });
-export var ImageWrapper = styled(x.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  justify-content: center;\n  flex-direction: column;\n  background-color: ", ";\n  ", "\n"], ["\n  ", ";\n  justify-content: center;\n  flex-direction: column;\n  background-color: ", ";\n  ", "\n"])), wrapper, function (_a) {
+exports.ImageWrapper = (0, styled_components_1.default)(styled_components_1.x.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  justify-content: center;\n  flex-direction: column;\n  background-color: ", ";\n  ", "\n"], ["\n  ", ";\n  justify-content: center;\n  flex-direction: column;\n  background-color: ", ";\n  ", "\n"])), wrapper, function (_a) {
     var color = _a.color;
     return color;
-}, down('lg', css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])))));
-export var StyledImage = styled(x.div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-self: center;\n  justify-content: center;\n  object-fit: cover;\n"], ["\n  display: flex;\n  align-self: center;\n  justify-content: center;\n  object-fit: cover;\n"])));
-export var StyledBody = styled(x.div)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  justify-content: center;\n  flex-direction: column;\n"], ["\n  ", ";\n  justify-content: center;\n  flex-direction: column;\n"])), wrapper);
+}, (0, styled_components_1.down)('lg', (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])))));
+exports.StyledImage = (0, styled_components_1.default)(styled_components_1.x.div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-self: center;\n  justify-content: center;\n  object-fit: cover;\n"], ["\n  display: flex;\n  align-self: center;\n  justify-content: center;\n  object-fit: cover;\n"])));
+exports.StyledBody = (0, styled_components_1.default)(styled_components_1.x.div)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  justify-content: center;\n  flex-direction: column;\n"], ["\n  ", ";\n  justify-content: center;\n  flex-direction: column;\n"])), wrapper);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/ui/Elements/Card/types.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ui/Elements/DatePicker/DatePicker.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,6 +10,29 @@ 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)
@@ -20,46 +44,50 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import moment from 'moment';
+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"));
 // @TODO each language has 62kb gziped, please replace moment with different lib
-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';
-import { x } from '@xstyled/styled-components';
-import { DatePickerBase } from './styles';
-import SpaceAroundWrap from '../SpaceAround';
-import Input from '../../Forms/Input';
-import { LanguageContext } from '../../ThemeProvider/ThemeProvider';
+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");
 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 && 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 }));
+    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 }));
     }, [name, stringValue, error, label, showInputLabel, isValid, disabled]);
-    var handleRenderView = useCallback(function (_, renderCalendar) {
+    var handleRenderView = (0, react_1.useCallback)(function (_, renderCalendar) {
         if (label && !showInputLabel) {
-            return (_jsx(x.div, { display: "flex", flexDirection: "column", children: renderCalendar() }));
+            return ((0, jsx_runtime_1.jsx)(styled_components_1.x.div, { display: "flex", flexDirection: "column", children: renderCalendar() }));
         }
         return renderCalendar();
     }, [label, showInputLabel]);
-    var handleChange = useCallback(function (value) {
+    var handleChange = (0, react_1.useCallback)(function (value) {
         var parsed = typeof value === 'string' ? value : value.toDate();
         onChange === null || onChange === void 0 ? void 0 : onChange(parsed);
     }, [onChange]);
-    var handleIsValid = useCallback(function (current, selected) {
+    var handleIsValid = (0, react_1.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 (_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)) }) }));
+    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)) }) }));
 };
-export default React.memo(DatePicker);
+exports.default = react_1.default.memo(DatePicker);

package/ui/Elements/DatePicker/Datetime/DateTime.d.ts

@@ -1,6 +1,6 @@
 import moment from 'moment';
 import React from 'react';
-import { DatetimepickerProps } from './types';
+import type { DatetimepickerProps } from './types';
 export default class Datetime extends React.Component<DatetimepickerProps> {
     static defaultProps: {
         onOpen: () => void;

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

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

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

@@ -1,36 +1,62 @@
+"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;
 };
-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 __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) {
     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 = useState(initialHours), hours = _f[0], setHours = _f[1];
-    var _g = useState(initialMinutes), minutes = _g[0], setMinutes = _g[1];
-    var increaseHour = useCallback(function () {
+    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 () {
         hours === 23 ? setHours(0) : setHours(hours + 1);
     }, [hours]);
-    var decreaseHour = useCallback(function () {
+    var decreaseHour = (0, react_1.useCallback)(function () {
         hours === 0 ? setHours(23) : setHours(hours - 1);
     }, [hours]);
-    var increaseMinutes = useCallback(function () {
+    var increaseMinutes = (0, react_1.useCallback)(function () {
         minutes >= 55 ? setMinutes(minutes - 55) : setMinutes(minutes + 5);
     }, [minutes]);
-    var decreaseMinutes = useCallback(function () {
+    var decreaseMinutes = (0, react_1.useCallback)(function () {
         minutes <= 5 ? setMinutes(minutes + 55) : setMinutes(minutes - 5);
     }, [minutes]);
-    var onHoursChange = useCallback(function (e) {
+    var onHoursChange = (0, react_1.useCallback)(function (e) {
         if (e.target.value.match(regExp) && Number(e.target.value) <= 23) {
             setHours(Number(e.target.value));
         }
@@ -38,7 +64,7 @@ export var Timepicker = function (_a) {
             setHours(0);
         }
     }, []);
-    var onMinutesChange = useCallback(function (e) {
+    var onMinutesChange = (0, react_1.useCallback)(function (e) {
         if (e.target.value.match(regExp) && Number(e.target.value) <= 59) {
             setMinutes(Number(e.target.value));
         }
@@ -46,12 +72,13 @@ export var Timepicker = function (_a) {
             setMinutes(0);
         }
     }, []);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         !!value && setTime('hours', hours);
     }, [hours]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         !!value && setTime('minutes', minutes);
     }, [minutes]);
-    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" })] })] }) }) }));
+    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" })] })] }) }) }));
 };
+exports.Timepicker = Timepicker;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,8 +10,10 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function ViewNavigation(_a) {
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+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 (_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 })] }));
+    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 })] }));
 }
+exports.default = ViewNavigation;

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

@@ -1,7 +1,8 @@
+"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>
-export {};
+Object.defineProperty(exports, "__esModule", { value: true });