@mailstep/design-system 0.8.25 → 0.8.26-beta.1

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

@@ -1,11 +0,0 @@
-export var DatePickerRepeat;
-(function (DatePickerRepeat) {
-    DatePickerRepeat["EVERY_TODAY"] = "every-today";
-    DatePickerRepeat["EVERY_YESTERDAY"] = "every-yesterday";
-})(DatePickerRepeat || (DatePickerRepeat = {}));
-export var TimePickerRepeat;
-(function (TimePickerRepeat) {
-    TimePickerRepeat["FROM"] = "from";
-    TimePickerRepeat["TO"] = "to";
-    TimePickerRepeat["AT"] = "at";
-})(TimePickerRepeat || (TimePickerRepeat = {}));

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

@@ -1,151 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-// @ts-nocheck
-import React from 'react';
-import { DateRepeater } from '../components/DateRepeater';
-import { Timepicker } from '../components/Timepicker';
-import ViewNavigation from '../components/ViewNavigation';
-var DaysView = /** @class */ (function (_super) {
-    __extends(DaysView, _super);
-    function DaysView() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this._setDate = function (e) {
-            _this.props.updateDate(e);
-        };
-        return _this;
-    }
-    DaysView.prototype.render = function () {
-        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 (_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 (_jsx("th", { className: "dow", children: day }, day + index)); });
-        return _jsx("tr", { children: dayItems });
-    };
-    DaysView.prototype.renderDays = function () {
-        var date = this.props.viewDate;
-        var startOfMonth = date.clone().startOf('month');
-        var endOfMonth = date.clone().endOf('month');
-        // We need 42 days in 6 rows
-        // starting in the last week of the previous month
-        var rows = [[], [], [], [], [], []];
-        var startDate = date.clone().subtract(1, 'months');
-        startDate.date(startDate.daysInMonth()).startOf('week');
-        var endDate = startDate.clone().add(42, 'd');
-        var i = 0;
-        while (startDate.isBefore(endDate)) {
-            var row = getRow(rows, i++);
-            row.push(this.renderDay(startDate, startOfMonth, endOfMonth));
-            startDate.add(1, 'd');
-        }
-        return rows.map(function (r, i) { return _jsx("tr", { children: r }, "".concat(endDate.month(), "_").concat(i)); });
-    };
-    DaysView.prototype.renderDay = function (date, startOfMonth, endOfMonth) {
-        var _a, _b;
-        var selectedDate = this.props.selectedDate;
-        var secondValue = this.props.secondValue;
-        var dayProps = {
-            key: date.format('M_D'),
-            'data-value': date.date(),
-            'data-month': date.month(),
-            'data-year': date.year()
-        };
-        var className = 'rdtDay';
-        if (date.isBefore(startOfMonth)) {
-            className += ' rdtOld';
-        }
-        else if (date.isAfter(endOfMonth)) {
-            className += ' rdtNew';
-        }
-        if (secondValue && date.isBefore(secondValue) && date.isAfter(selectedDate)) {
-            className += ' rdtActiveRange';
-        }
-        if (secondValue && date.isAfter(secondValue) && date.isBefore(selectedDate)) {
-            className += ' rdtActiveRange';
-        }
-        if (selectedDate && date.isSame(selectedDate, 'day')) {
-            className += ' rdtActive';
-        }
-        if (secondValue && date.isSame(secondValue, 'day')) {
-            className += ' rdtActiveSecond';
-        }
-        if (date.isSame(this.props.moment(), 'day')) {
-            className += ' rdtToday';
-        }
-        if (this.props.isValidDate(date) && !((_a = this.props.others) === null || _a === void 0 ? void 0 : _a.dateTypeRepeater) && !this.props.disabled) {
-            dayProps.onClick = this._setDate;
-        }
-        else {
-            className += ' rdtDisabled';
-        }
-        if (((_b = this.props.others) === null || _b === void 0 ? void 0 : _b.dateTypeRepeater) || this.props.disabled) {
-            className += ' rdtDisabled';
-        }
-        dayProps.className = className;
-        return this.props.renderDay(dayProps, date.clone(), selectedDate && selectedDate.clone());
-    };
-    DaysView.prototype.renderFooter = function () {
-        var setTime = this.props.setTime;
-        var onChangeOthers = this.props.onChangeOthers;
-        var reset = this.props.reset;
-        var value = this.props.value;
-        var others = this.props.others;
-        var disabled = this.props.disabled;
-        return (_jsx("tfoot", { children: _jsx("tr", { children: _jsxs("td", { colSpan: 7, children: [onChangeOthers && _jsx(DateRepeater, { onChangeOthers: onChangeOthers, others: others, reset: reset }), this.props.timeFormat && (_jsx(Timepicker, { setTime: setTime, value: value, disabled: disabled || (!value && !(others === null || others === void 0 ? void 0 : others.dateTypeRepeater)), others: others, onChangeOthers: onChangeOthers, isSecondDatePicker: this.props.isSecondDatePicker }))] }) }) }));
-    };
-    DaysView.defaultProps = {
-        isValidDate: function () { return true; },
-        renderDay: function (props, date) { return _jsx("td", __assign({}, props, { children: date.date() })); }
-    };
-    return DaysView;
-}(React.Component));
-export default DaysView;
-function getRow(rows, day) {
-    return rows[Math.floor(day / 7)];
-}
-/**
- * Get a list of the days of the week
- * depending on the current locale
- * @return {array} A list with the shortname of the days
- */
-function getDaysOfWeek(locale) {
-    var first = locale.firstDayOfWeek();
-    var dow = [];
-    var i = 0;
-    locale._weekdaysMin.forEach(function (day) {
-        dow[(7 + i++ - first) % 7] = day;
-    });
-    return dow;
-}

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

@@ -1,111 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-nocheck
-import React from 'react';
-import ViewNavigation from '../components/ViewNavigation';
-var MonthsView = /** @class */ (function (_super) {
-    __extends(MonthsView, _super);
-    function MonthsView() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this._updateSelectedMonth = function (event) {
-            _this.props.updateDate(event);
-        };
-        return _this;
-    }
-    MonthsView.prototype.render = function () {
-        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 (_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
-        var rows = [[], [], []];
-        for (var month = 0; month < 12; month++) {
-            var row = getRow(rows, month);
-            row.push(this.renderMonth(month));
-        }
-        return rows.map(function (months, i) { return _jsx("tr", { children: months }, i); });
-    };
-    MonthsView.prototype.renderMonth = function (month) {
-        var selectedDate = this.props.selectedDate;
-        var className = 'rdtMonth';
-        var onClick;
-        if (this.isDisabledMonth(month)) {
-            className += ' rdtDisabled';
-        }
-        else {
-            onClick = this._updateSelectedMonth;
-        }
-        if (selectedDate && selectedDate.year() === this.props.viewDate.year() && selectedDate.month() === month) {
-            className += ' rdtActive';
-        }
-        var props = { key: month, className: className, 'data-value': month, onClick: onClick };
-        if (this.props.renderMonth) {
-            return this.props.renderMonth(props, month, this.props.viewDate.year(), this.props.selectedDate && this.props.selectedDate.clone());
-        }
-        return _jsx("td", __assign({}, props, { children: this.getMonthText(month) }));
-    };
-    MonthsView.prototype.isDisabledMonth = function (month) {
-        var isValidDate = this.props.isValidDate;
-        if (!isValidDate) {
-            // If no validator is set, all days are valid
-            return false;
-        }
-        // If one day in the month is valid, the year should be clickable
-        var date = this.props.viewDate.clone().set({ month: month });
-        var day = date.endOf('month').date() + 1;
-        while (day-- > 1) {
-            if (isValidDate(date.date(day))) {
-                return false;
-            }
-        }
-        return true;
-    };
-    MonthsView.prototype.getMonthText = function (month) {
-        var localMoment = this.props.viewDate;
-        var monthStr = localMoment.localeData().monthsShort(localMoment.month(month));
-        return capitalize(monthStr.substring(0, 3));
-    };
-    return MonthsView;
-}(React.Component));
-export default MonthsView;
-function getRow(rows, year) {
-    if (year < 4) {
-        return rows[0];
-    }
-    if (year < 8) {
-        return rows[1];
-    }
-    return rows[2];
-}
-function capitalize(str) {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-}

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

@@ -1,117 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-nocheck
-import React from 'react';
-import ViewNavigation from '../components/ViewNavigation';
-var YearsView = /** @class */ (function (_super) {
-    __extends(YearsView, _super);
-    function YearsView() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.disabledYearsCache = {};
-        _this._updateSelectedYear = function (event) {
-            _this.props.updateDate(event);
-        };
-        return _this;
-    }
-    YearsView.prototype.render = function () {
-        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 (_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();
-        // 12 years in 3 rows for every view
-        var rows = [[], [], []];
-        for (var year = viewYear - 1; year < viewYear + 11; year++) {
-            var row = getRow(rows, year - viewYear);
-            row.push(this.renderYear(year));
-        }
-        return rows.map(function (years, i) { return _jsx("tr", { children: years }, i); });
-    };
-    YearsView.prototype.renderYear = function (year) {
-        var selectedYear = this.getSelectedYear();
-        var className = 'rdtYear';
-        var onClick;
-        if (this.isDisabledYear(year)) {
-            className += ' rdtDisabled';
-        }
-        else {
-            onClick = this._updateSelectedYear;
-        }
-        if (selectedYear === year) {
-            className += ' rdtActive';
-        }
-        var props = { key: year, className: className, 'data-value': year, onClick: onClick };
-        return this.props.renderYear(props, year, this.props.selectedDate && this.props.selectedDate.clone());
-    };
-    YearsView.prototype.getViewYear = function () {
-        return parseInt(this.props.viewDate.year() / 10, 10) * 10;
-    };
-    YearsView.prototype.getSelectedYear = function () {
-        return this.props.selectedDate && this.props.selectedDate.year();
-    };
-    YearsView.prototype.isDisabledYear = function (year) {
-        var cache = this.disabledYearsCache;
-        if (cache[year] !== undefined) {
-            return cache[year];
-        }
-        var isValidDate = this.props.isValidDate;
-        if (!isValidDate) {
-            // If no validator is set, all days are valid
-            return false;
-        }
-        // If one day in the year is valid, the year should be clickable
-        var date = this.props.viewDate.clone().set({ year: year });
-        var day = date.endOf('year').dayOfYear() + 1;
-        while (day-- > 1) {
-            if (isValidDate(date.dayOfYear(day))) {
-                cache[year] = false;
-                return false;
-            }
-        }
-        cache[year] = true;
-        return true;
-    };
-    YearsView.defaultProps = {
-        renderYear: function (props, year) { return _jsx("td", __assign({}, props, { children: year })); },
-    };
-    return YearsView;
-}(React.Component));
-export default YearsView;
-function getRow(rows, year) {
-    if (year < 3) {
-        return rows[0];
-    }
-    if (year < 7) {
-        return rows[1];
-    }
-    return rows[2];
-}

package/ui/Elements/DatePicker/index.js

@@ -1,3 +0,0 @@
-import DatePicker from './DatePicker';
-export { DatePickerRepeat, TimePickerRepeat } from './Datetime/types';
-export default DatePicker;

package/ui/Elements/DatePicker/styles.js

@@ -1,8 +0,0 @@
-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 } from '@xstyled/styled-components';
-import { th } from '@xstyled/system';
-export var DatePickerBase = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .rdt {\n    position: relative;\n  }\n  .rdtPicker {\n    display: none;\n    position: absolute;\n    z-index: 1;\n    min-width: 250px;\n    color: ", ";\n    background: ", ";\n    border: 1px solid rgba(0, 0, 0, 0.15);\n    border-radius: 10px;\n    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n    padding: 0.5rem 1.2rem;\n    margin: 0.125rem 0rem;\n  }\n  .rdtOpen .rdtPicker {\n    display: block;\n  }\n  .rdtStatic .rdtPicker {\n    position: static;\n  }\n\n  .rdtPicker .rdtTimeToggle {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n    text-align: center;\n    font-size: 1.25rem;\n  }\n  .rdtPicker table {\n    width: 100%;\n    margin: 0;\n    border-collapse: collapse;\n  }\n  .rdtPicker td,\n  .rdtPicker th {\n    text-align: center;\n    height: 30px;\n  }\n  .rdtPicker td {\n    padding: 0 0.8rem;\n  }\n  .rdtPicker .rdtCounter .rdtBtn:hover,\n  .rdtPicker .rdtYear:hover,\n  .rdtPicker .rdtMonth:hover,\n  .rdtPicker .rdtDay:hover,\n  .rdtPicker .rdtHour:hover,\n  .rdtPicker .rdtMinute:hover,\n  .rdtPicker .rdtSecond:hover,\n  .rdtPicker .rdtTimeToggle:hover,\n  .rdtPicker .rdtSwitch:hover {\n    background: #f8f9fa;\n    cursor: pointer;\n  }\n  .rdtPicker .rdtOld,\n  .rdtPicker .rdtNew {\n    color: rgba(33, 37, 41, 0.3);\n  }\n  .rdtPicker .rdtToday {\n    position: relative;\n  }\n  .rdtPicker .rdtToday:before {\n    content: '';\n    display: inline-block;\n    border-left: 7px solid transparent;\n    border-bottom: 7px solid ", ";\n    position: absolute;\n    bottom: 4px;\n    right: 4px;\n  }\n  .rdtPicker th {\n    border-bottom: 1px solid #e9ecef;\n  }\n  .rdtPicker .dow {\n    width: 14.2857%;\n    border-bottom: none;\n    cursor: default;\n    font-weight: 600;\n  }\n  .rdtPicker .rdtPrev,\n  .rdtPicker .rdtSwitch,\n  .rdtPicker .rdtNext {\n    font-weight: 600;\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n\n  .rdtPicker .rdtNext,\n  .rdtPicker .rdtPrev {\n    width: 36px;\n    font-size: 1.4rem;\n    vertical-align: top;\n    color: ", ";\n  }\n  .rdtPicker .rdtCounter .rdtBtn {\n    font-size: 1rem;\n    display: block;\n    user-select: none;\n  }\n  .rdtPicker th.rdtDisabled,\n  .rdtPicker th.rdtDisabled:hover {\n    background: none;\n    color: #6c757d;\n    cursor: not-allowed;\n  }\n  .rdtPicker thead tr:first-child th {\n    cursor: pointer;\n  }\n  .rdtPicker thead:first-child {\n    line-height: 20px;\n  }\n  .rdtPicker thead tr:first-child th:hover {\n    background: #f8f9fa;\n  }\n  .rdtPicker .rdtTimeToggle {\n    border-top: 1px solid #e9ecef;\n  }\n  .rdtPicker button {\n    border: none;\n    background: none;\n    cursor: pointer;\n  }\n  .rdtPicker button:hover {\n    background-color: #f8f9fa;\n  }\n  .rdtPicker thead button {\n    width: 100%;\n    height: 100%;\n  }\n  .rdtPicker .rdtDays {\n    min-width: 250px;\n  }\n  .rdtPicker .rdtMonth,\n  .rdtPicker .rdtYear {\n    height: 50px;\n    width: 25%;\n    cursor: pointer;\n  }\n  .rdtPicker .rdtMonth:hover,\n  .rdtPicker .rdtYear:hover {\n    color: #16181b;\n    background: #f8f9fa;\n  }\n  .rdtPicker .rdtActiveSecond {\n    background: ", " !important;\n    color: ", " !important;\n    border-radius: 0.5rem;\n    font-weight: 600;\n    text-decoration: none !important;\n  }\n  .rdtPicker .rdtLabel {\n    cursor: default !important;\n    background: transparent !important;\n    font-weight: 600;\n    text-align: right;\n  }\n\n  .rdtPicker .rdtActive {\n    background-color: ", " !important;\n    color: ", ";\n    border-radius: 0.5rem;\n    font-weight: 600;\n  }\n  .rdtPicker .rdtActive:hover {\n    background-color: ", ";\n    color: ", ";\n    font-weight: 600;\n  }\n  .rdtPicker .rdtActive .rdtToday:before {\n    border-bottom-color: ", ";\n  }\n  .rdtPicker .rdtDisabled,\n  .rdtPicker .rdtDisabled:hover {\n    background: none;\n    color: #6c757d;\n    text-decoration: line-through;\n    cursor: not-allowed;\n  }\n  .rdtPicker .rdtDays {\n    display: inline-block;\n  }\n  .rdtPicker .rdtCounters {\n    display: inline-block;\n  }\n  .rdtPicker .rdtCounters > div {\n    float: left;\n  }\n\n  .rdtPicker .rdtActiveRange {\n    background: ", ";\n  }\n\n  .rdtPicker .rdtCounters > div :first-child {\n    visibility: hidden;\n    transform: rotate(-90deg);\n  }\n  .rdtPicker .rdtCounters > div :last-child {\n    visibility: hidden;\n    transform: rotate(90deg);\n  }\n  .rdtPicker .rdtCounters > div > span:before {\n    left: 5px;\n    visibility: visible;\n    position: relative;\n    content: '\u203A';\n    font-size: 2rem;\n    font-weight: 900;\n    color: ", ";\n    padding: 0 10px;\n  }\n  .rdtPicker .rdtCounter {\n    width: 40px;\n  }\n  .rdtPicker .rdtCounter .rdtBtn {\n    line-height: 40px;\n    cursor: pointer;\n  }\n  .rdtPicker .rdtCounter .rdtBtn:hover {\n    background: #f8f9fa;\n  }\n  .rdtPicker .rdtCounter .rdtCount {\n    line-height: 20px;\n    font-size: 1.25rem;\n  }\n  .rdtPicker .rdtCounterSeparator {\n    line-height: 100px;\n  }\n"], ["\n  .rdt {\n    position: relative;\n  }\n  .rdtPicker {\n    display: none;\n    position: absolute;\n    z-index: 1;\n    min-width: 250px;\n    color: ", ";\n    background: ", ";\n    border: 1px solid rgba(0, 0, 0, 0.15);\n    border-radius: 10px;\n    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n    padding: 0.5rem 1.2rem;\n    margin: 0.125rem 0rem;\n  }\n  .rdtOpen .rdtPicker {\n    display: block;\n  }\n  .rdtStatic .rdtPicker {\n    position: static;\n  }\n\n  .rdtPicker .rdtTimeToggle {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n    text-align: center;\n    font-size: 1.25rem;\n  }\n  .rdtPicker table {\n    width: 100%;\n    margin: 0;\n    border-collapse: collapse;\n  }\n  .rdtPicker td,\n  .rdtPicker th {\n    text-align: center;\n    height: 30px;\n  }\n  .rdtPicker td {\n    padding: 0 0.8rem;\n  }\n  .rdtPicker .rdtCounter .rdtBtn:hover,\n  .rdtPicker .rdtYear:hover,\n  .rdtPicker .rdtMonth:hover,\n  .rdtPicker .rdtDay:hover,\n  .rdtPicker .rdtHour:hover,\n  .rdtPicker .rdtMinute:hover,\n  .rdtPicker .rdtSecond:hover,\n  .rdtPicker .rdtTimeToggle:hover,\n  .rdtPicker .rdtSwitch:hover {\n    background: #f8f9fa;\n    cursor: pointer;\n  }\n  .rdtPicker .rdtOld,\n  .rdtPicker .rdtNew {\n    color: rgba(33, 37, 41, 0.3);\n  }\n  .rdtPicker .rdtToday {\n    position: relative;\n  }\n  .rdtPicker .rdtToday:before {\n    content: '';\n    display: inline-block;\n    border-left: 7px solid transparent;\n    border-bottom: 7px solid ", ";\n    position: absolute;\n    bottom: 4px;\n    right: 4px;\n  }\n  .rdtPicker th {\n    border-bottom: 1px solid #e9ecef;\n  }\n  .rdtPicker .dow {\n    width: 14.2857%;\n    border-bottom: none;\n    cursor: default;\n    font-weight: 600;\n  }\n  .rdtPicker .rdtPrev,\n  .rdtPicker .rdtSwitch,\n  .rdtPicker .rdtNext {\n    font-weight: 600;\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n\n  .rdtPicker .rdtNext,\n  .rdtPicker .rdtPrev {\n    width: 36px;\n    font-size: 1.4rem;\n    vertical-align: top;\n    color: ", ";\n  }\n  .rdtPicker .rdtCounter .rdtBtn {\n    font-size: 1rem;\n    display: block;\n    user-select: none;\n  }\n  .rdtPicker th.rdtDisabled,\n  .rdtPicker th.rdtDisabled:hover {\n    background: none;\n    color: #6c757d;\n    cursor: not-allowed;\n  }\n  .rdtPicker thead tr:first-child th {\n    cursor: pointer;\n  }\n  .rdtPicker thead:first-child {\n    line-height: 20px;\n  }\n  .rdtPicker thead tr:first-child th:hover {\n    background: #f8f9fa;\n  }\n  .rdtPicker .rdtTimeToggle {\n    border-top: 1px solid #e9ecef;\n  }\n  .rdtPicker button {\n    border: none;\n    background: none;\n    cursor: pointer;\n  }\n  .rdtPicker button:hover {\n    background-color: #f8f9fa;\n  }\n  .rdtPicker thead button {\n    width: 100%;\n    height: 100%;\n  }\n  .rdtPicker .rdtDays {\n    min-width: 250px;\n  }\n  .rdtPicker .rdtMonth,\n  .rdtPicker .rdtYear {\n    height: 50px;\n    width: 25%;\n    cursor: pointer;\n  }\n  .rdtPicker .rdtMonth:hover,\n  .rdtPicker .rdtYear:hover {\n    color: #16181b;\n    background: #f8f9fa;\n  }\n  .rdtPicker .rdtActiveSecond {\n    background: ", " !important;\n    color: ", " !important;\n    border-radius: 0.5rem;\n    font-weight: 600;\n    text-decoration: none !important;\n  }\n  .rdtPicker .rdtLabel {\n    cursor: default !important;\n    background: transparent !important;\n    font-weight: 600;\n    text-align: right;\n  }\n\n  .rdtPicker .rdtActive {\n    background-color: ", " !important;\n    color: ", ";\n    border-radius: 0.5rem;\n    font-weight: 600;\n  }\n  .rdtPicker .rdtActive:hover {\n    background-color: ", ";\n    color: ", ";\n    font-weight: 600;\n  }\n  .rdtPicker .rdtActive .rdtToday:before {\n    border-bottom-color: ", ";\n  }\n  .rdtPicker .rdtDisabled,\n  .rdtPicker .rdtDisabled:hover {\n    background: none;\n    color: #6c757d;\n    text-decoration: line-through;\n    cursor: not-allowed;\n  }\n  .rdtPicker .rdtDays {\n    display: inline-block;\n  }\n  .rdtPicker .rdtCounters {\n    display: inline-block;\n  }\n  .rdtPicker .rdtCounters > div {\n    float: left;\n  }\n\n  .rdtPicker .rdtActiveRange {\n    background: ", ";\n  }\n\n  .rdtPicker .rdtCounters > div :first-child {\n    visibility: hidden;\n    transform: rotate(-90deg);\n  }\n  .rdtPicker .rdtCounters > div :last-child {\n    visibility: hidden;\n    transform: rotate(90deg);\n  }\n  .rdtPicker .rdtCounters > div > span:before {\n    left: 5px;\n    visibility: visible;\n    position: relative;\n    content: '\u203A';\n    font-size: 2rem;\n    font-weight: 900;\n    color: ", ";\n    padding: 0 10px;\n  }\n  .rdtPicker .rdtCounter {\n    width: 40px;\n  }\n  .rdtPicker .rdtCounter .rdtBtn {\n    line-height: 40px;\n    cursor: pointer;\n  }\n  .rdtPicker .rdtCounter .rdtBtn:hover {\n    background: #f8f9fa;\n  }\n  .rdtPicker .rdtCounter .rdtCount {\n    line-height: 20px;\n    font-size: 1.25rem;\n  }\n  .rdtPicker .rdtCounterSeparator {\n    line-height: 100px;\n  }\n"])), th('colors.blue2'), th('colors.white'), th('colors.red2'), th('colors.red2'), th('colors.red1'), th('colors.white'), th('colors.red2'), th('colors.white'), th('colors.red2'), th('colors.white'), th('colors.white'), th('colors.lightGray2'), th('colors.red2'));
-var templateObject_1;

package/ui/Elements/DatePicker/utils/constants.js

@@ -1,12 +0,0 @@
-var _a, _b;
-import { DatePickerRepeat, TimePickerRepeat } from '../Datetime/types';
-import { i18n } from '@lingui/core';
-export var DatePickerRepeatTrans = (_a = {},
-    _a[DatePickerRepeat.EVERY_TODAY] = i18n._({ id: 'dataGrid.everyToday', message: 'Every today' }),
-    _a[DatePickerRepeat.EVERY_YESTERDAY] = i18n._({ id: 'dataGrid.everyYesterday', message: 'Every yesterday' }),
-    _a);
-export var TimePickerRepeatTrans = (_b = {},
-    _b[TimePickerRepeat.FROM] = i18n._({ id: 'dataGrid.timepicker.from', message: 'from' }),
-    _b[TimePickerRepeat.TO] = i18n._({ id: 'dataGrid.timepicker.to', message: 'to' }),
-    _b[TimePickerRepeat.AT] = i18n._({ id: 'dataGrid.timepicker.at', message: 'at' }),
-    _b);

package/ui/Elements/Dropdown/Dropdown.js

@@ -1,26 +0,0 @@
-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, Fragment as _Fragment } from "react/jsx-runtime";
-import styled, { th } from '@xstyled/styled-components';
-var ArrowInnerB = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var ArrowInnerA = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
-var Arrow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  left: ", ";\n  height: 0;\n  width: 0;\n  z-index: -1;\n  ", " {\n    transform: translate(-10%, -50%);\n    width: fit-content;\n    ", " {\n      border-radius: 2px;\n      background-color: ", ";\n      width: 8px;\n      height: 8px;\n      transform: rotate(45deg);\n    }\n  }\n"], ["\n  position: relative;\n  left: ", ";\n  height: 0;\n  width: 0;\n  z-index: -1;\n  ", " {\n    transform: translate(-10%, -50%);\n    width: fit-content;\n    ", " {\n      border-radius: 2px;\n      background-color: ", ";\n      width: 8px;\n      height: 8px;\n      transform: rotate(45deg);\n    }\n  }\n"])), function (_a) {
-    var verticalShift = _a.verticalShift;
-    return (verticalShift ? 'calc(50% + 70px)' : 'calc(50%)');
-}, ArrowInnerA, ArrowInnerB, th.color('white'));
-var StyledDropdownWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n\n  ", "\n\n  width: fit-content;\n  height: fit-content;\n  display: block;\n  z-index: 1;\n\n  ", " {\n    display: ", ";\n  }\n"], ["\n  position: absolute;\n\n  ", "\n\n  width: fit-content;\n  height: fit-content;\n  display: block;\n  z-index: 1;\n\n  ", " {\n    display: ", ";\n  }\n"])), function (_a) {
-    var customDropdownPosition = _a.customDropdownPosition;
-    return customDropdownPosition ||
-        "\n      top: 100%;\n      right: 0;\n    ";
-}, Arrow, function (_a) {
-    var showArrow = _a.showArrow;
-    return (showArrow ? 'block' : 'none');
-});
-var Dropdown = function (_a) {
-    var show = _a.show, className = _a.className, wrapRef = _a.wrapRef, children = _a.children, showArrow = _a.showArrow, verticalShift = _a.verticalShift, customDropdownPosition = _a.customDropdownPosition;
-    return (_jsx(_Fragment, { children: show && (_jsxs(StyledDropdownWrap, { ref: wrapRef, className: className, showArrow: showArrow, customDropdownPosition: customDropdownPosition, children: [_jsx(Arrow, { verticalShift: verticalShift, children: _jsx(ArrowInnerA, { children: _jsx(ArrowInnerB, {}) }) }), children] })) }));
-};
-export default Dropdown;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Elements/Dropdown/index.js

@@ -1,3 +0,0 @@
-import Dropdown from './Dropdown';
-export { Dropdown };
-export default Dropdown;

package/ui/Elements/Dropdown/stories/Dropdown.stories.js

@@ -1,14 +0,0 @@
-import Dropdown from '../Dropdown';
-var meta = {
-    title: 'Elements/Dropown',
-    component: Dropdown,
-    tags: ['autodocs'],
-    argTypes: {},
-};
-export default meta;
-export var Default = {
-    args: {
-        show: true,
-        children: 'DropdownContent',
-    },
-};

package/ui/Elements/Dropdown/types.js

@@ -1 +0,0 @@
-export {};

package/ui/Elements/DropdownMenu/DropdownMenu.js

@@ -1,36 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import DefaultItem from './components/DefaultItem';
-import MenuList from './components/MenuList';
-import styled from '@xstyled/styled-components';
-var StyledDropdownWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: fit-content;\n  height: fit-content;\n  background-color: white;\n  padding: 2;\n  display: block;\n  border: slim;\n  border-color: lightGray2;\n  border-radius: 10px;\n  box-shadow: dropdownMenuShadow;\n  color: red2;\n  z-index: 1;\n"], ["\n  width: fit-content;\n  height: fit-content;\n  background-color: white;\n  padding: 2;\n  display: block;\n  border: slim;\n  border-color: lightGray2;\n  border-radius: 10px;\n  box-shadow: dropdownMenuShadow;\n  color: red2;\n  z-index: 1;\n"])));
-export var DropdownMenu = function (_a) {
-    var items = _a.items, showMenu = _a.showMenu, className = _a.className, _b = _a.ItemComponent, ItemComponent = _b === void 0 ? DefaultItem : _b, header = _a.header, footer = _a.footer, rest = __rest(_a, ["items", "showMenu", "className", "ItemComponent", "header", "footer"]);
-    return (_jsx(_Fragment, { children: showMenu && (_jsxs(StyledDropdownWrap, __assign({ className: className }, rest, { children: [header || null, _jsx(MenuList, { items: items, ItemComponent: ItemComponent }), footer || null] }))) }));
-};
-var templateObject_1;

package/ui/Elements/DropdownMenu/components/DefaultItem.js

@@ -1,16 +0,0 @@
-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 styled, { css } from '@xstyled/styled-components';
-var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n  display: flex;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"], ["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n  display: flex;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"])), function (props) {
-    return props.hasSeparator && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-top: slim;\n      border-color: lightGray2;\n    "], ["\n      border-top: slim;\n      border-color: lightGray2;\n    "])));
-});
-var IconWrap = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: 10px;\n"], ["\n  margin-right: 10px;\n"])));
-var MenuItem = function (_a) {
-    var icon = _a.icon, title = _a.title, hasSeparator = _a.hasSeparator;
-    return (_jsxs(StyledListItem, { hasSeparator: hasSeparator, children: [icon && _jsx(IconWrap, { children: icon }), title] }));
-};
-export default MenuItem;
-var templateObject_1, templateObject_2, templateObject_3;

package/ui/Elements/DropdownMenu/components/MenuItem.js

@@ -1,50 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { useLocation } from 'react-router';
-import Link from '../../Link/Link';
-import styled, { css } from '@xstyled/styled-components';
-var StyledLink = styled(Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  border-top: ", ";\n  padding-top: ", ";\n  color: typoPrimary;\n  text-decoration: none;\n\n  :hover > * {\n    color: typoPrimary;\n    background-color: bgLightGray1;\n    border-radius: 6px;\n  }\n  ", "\n"], ["\n  display: block;\n  border-top: ", ";\n  padding-top: ", ";\n  color: typoPrimary;\n  text-decoration: none;\n\n  :hover > * {\n    color: typoPrimary;\n    background-color: bgLightGray1;\n    border-radius: 6px;\n  }\n  ", "\n"])), function (_a) {
-    var $hasSeparator = _a.$hasSeparator;
-    return ($hasSeparator ? '1px solid #D2D8DF' : 'none');
-}, function (_a) {
-    var $hasSeparator = _a.$hasSeparator;
-    return ($hasSeparator ? '4px' : '0');
-}, function (_a) {
-    var $isActive = _a.$isActive;
-    return $isActive && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: red1;\n    color: white;\n    border-radius: 6px;\n    :hover {\n      & svg {\n        stroke: typoPrimary;\n      }\n    }\n    & svg {\n      stroke: white;\n    }\n  }\n"], ["\n    background-color: red1;\n    color: white;\n    border-radius: 6px;\n    :hover {\n      & svg {\n        stroke: typoPrimary;\n      }\n    }\n    & svg {\n      stroke: white;\n    }\n  }\n"])));
-});
-var MenuItem = function (_a) {
-    var item = _a.item, ItemComponent = _a.ItemComponent, onClose = _a.onClose;
-    var onClick = item.onClick, link = item.link, hasSeparator = item.hasSeparator, name = item.name, autoClose = item.autoClose;
-    var location = useLocation();
-    var isActive = link === location.pathname;
-    var onClickCallback = useCallback(function (e) {
-        if (onClick) {
-            e.preventDefault();
-            onClick();
-        }
-        if (autoClose && onClose) {
-            setTimeout(function () {
-                onClose();
-            }, 200);
-        }
-    }, [autoClose, onClick, onClose]);
-    return (_jsx(StyledLink, { to: link, "$isActive": isActive, onClick: onClickCallback, "$hasSeparator": !!hasSeparator, "data-cy": name, size: "inherit", children: _jsx(ItemComponent, __assign({}, item)) }));
-};
-export default MenuItem;
-var templateObject_1, templateObject_2;

package/ui/Elements/DropdownMenu/components/MenuList.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import MenuItem from './MenuItem';
-var MenuList = function (_a) {
-    var items = _a.items, ItemComponent = _a.ItemComponent, onClose = _a.onClose;
-    return (_jsx("ul", { children: items === null || items === void 0 ? void 0 : items.map(function (item, i) {
-            return !item.hidden && _jsx(MenuItem, { item: item, ItemComponent: ItemComponent, onClose: onClose }, i);
-        }) }));
-};
-export default MenuList;

package/ui/Elements/DropdownMenu/index.js

@@ -1 +0,0 @@
-export { DropdownMenu as default } from './DropdownMenu';

package/ui/Elements/DropdownMenu/types.js

@@ -1 +0,0 @@
-export {};