@mailstep/design-system 0.8.31-beta.4 → 0.8.31

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

@@ -1,117 +1,86 @@
-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 ViewNavigation from "../components/ViewNavigation.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/DatePicker/Datetime/views/YearsView.tsx
+var YearsView = class extends React.Component {
+	constructor(..._args) {
+		super(..._args);
+		this.disabledYearsCache = {};
+		this._updateSelectedYear = (event) => {
+			this.props.updateDate(event);
+		};
+	}
+	static {
+		this.defaultProps = { renderYear: (props, year) => /* @__PURE__ */ jsx("td", {
+			...props,
+			children: year
+		}) };
+	}
+	render() {
+		return /* @__PURE__ */ jsxs("div", {
+			className: "rdtYears",
+			children: [/* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("thead", { children: this.renderNavigation() }) }), /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: this.renderYears() }) })]
+		});
+	}
+	renderNavigation() {
+		const viewYear = this.getViewYear();
+		return /* @__PURE__ */ jsx(ViewNavigation, {
+			onClickPrev: () => this.props.navigate(-10, "years"),
+			onClickSwitch: () => this.props.showView("years"),
+			onClickNext: () => this.props.navigate(10, "years"),
+			switchContent: `${viewYear}-${viewYear + 9}`
+		});
+	}
+	renderYears() {
+		const viewYear = this.getViewYear();
+		let rows = [
+			[],
+			[],
+			[]
+		];
+		for (let year = viewYear - 1; year < viewYear + 11; year++) getRow(rows, year - viewYear).push(this.renderYear(year));
+		return rows.map((years, i) => /* @__PURE__ */ jsx("tr", { children: years }, i));
+	}
+	renderYear(year) {
+		const selectedYear = this.getSelectedYear();
+		let className = "rdtYear";
+		let onClick;
+		if (this.isDisabledYear(year)) className += " rdtDisabled";
+		else onClick = this._updateSelectedYear;
+		if (selectedYear === year) className += " rdtActive";
+		let props = {
+			key: year,
+			className,
+			"data-value": year,
+			onClick
+		};
+		return this.props.renderYear(props, year, this.props.selectedDate && this.props.selectedDate.clone());
+	}
+	getViewYear() {
+		return parseInt(this.props.viewDate.year() / 10, 10) * 10;
+	}
+	getSelectedYear() {
+		return this.props.selectedDate && this.props.selectedDate.year();
+	}
+	isDisabledYear(year) {
+		let cache = this.disabledYearsCache;
+		if (cache[year] !== void 0) return cache[year];
+		let isValidDate = this.props.isValidDate;
+		if (!isValidDate) return false;
+		let date = this.props.viewDate.clone().set({ year });
+		let day = date.endOf("year").dayOfYear() + 1;
+		while (day-- > 1) if (isValidDate(date.dayOfYear(day))) {
+			cache[year] = false;
+			return false;
+		}
+		cache[year] = true;
+		return true;
+	}
 };
-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];
+	if (year < 3) return rows[0];
+	if (year < 7) return rows[1];
+	return rows[2];
 }
+//#endregion
+export { YearsView as default };

package/ui/Elements/DatePicker/index.d.ts

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

package/ui/Elements/DatePicker/index.js

@@ -1,3 +1,6 @@
-import DatePicker from './DatePicker';
-export { DatePickerRepeat, TimePickerRepeat } from './Datetime/types';
-export default DatePicker;
+import { DatePickerRepeat, TimePickerRepeat } from "./Datetime/types.js";
+import DatePicker_default$1 from "./DatePicker.js";
+//#region packages/ui/Elements/DatePicker/index.ts
+var DatePicker_default = DatePicker_default$1;
+//#endregion
+export { DatePickerRepeat, TimePickerRepeat, DatePicker_default as default };

package/ui/Elements/DatePicker/styles.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const DatePickerBase: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+export declare const DatePickerBase: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/styled-components").Theme, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, "color">;

package/ui/Elements/DatePicker/styles.js

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

package/ui/Elements/DatePicker/utils/constants.d.ts

@@ -1,4 +1,3 @@
 import { DatePickerRepeat, TimePickerRepeat } from '../Datetime/types';
-
 export declare const DatePickerRepeatTrans: Record<DatePickerRepeat, string>;
 export declare const TimePickerRepeatTrans: Record<TimePickerRepeat, string>;

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

@@ -1,12 +1,29 @@
-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);
+import "../Datetime/types.js";
+import { i18n } from "@lingui/core";
+//#region packages/ui/Elements/DatePicker/utils/constants.ts
+const DatePickerRepeatTrans = {
+	["every-today"]: i18n._({
+		id: "dataGrid.everyToday",
+		message: "Every today"
+	}),
+	["every-yesterday"]: i18n._({
+		id: "dataGrid.everyYesterday",
+		message: "Every yesterday"
+	})
+};
+const TimePickerRepeatTrans = {
+	["from"]: i18n._({
+		id: "dataGrid.timepicker.from",
+		message: "from"
+	}),
+	["to"]: i18n._({
+		id: "dataGrid.timepicker.to",
+		message: "to"
+	}),
+	["at"]: i18n._({
+		id: "dataGrid.timepicker.at",
+		message: "at"
+	})
+};
+//#endregion
+export { DatePickerRepeatTrans, TimePickerRepeatTrans };

package/ui/Elements/Dropdown/Dropdown.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-import { DropdownProps } from './types';
-
+import { type FC } from 'react';
+import { type DropdownProps } from './types';
 declare const Dropdown: FC<DropdownProps>;
 export default Dropdown;

package/ui/Elements/Dropdown/Dropdown.js

@@ -1,26 +1,55 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import "react";
+import styled$1, { th } from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/Dropdown/Dropdown.tsx
+const ArrowInnerB = styled$1.div``;
+const ArrowInnerA = styled$1.div``;
+const Arrow = styled$1.div`
+  position: relative;
+  left: ${({ verticalShift }) => verticalShift ? "calc(50% + 70px)" : "calc(50%)"};
+  height: 0;
+  width: 0;
+  z-index: -1;
+  ${ArrowInnerA} {
+    transform: translate(-10%, -50%);
+    width: fit-content;
+    ${ArrowInnerB} {
+      border-radius: 2px;
+      background-color: ${th.color("white")};
+      width: 8px;
+      height: 8px;
+      transform: rotate(45deg);
+    }
+  }
+`;
+const StyledDropdownWrap = styled$1.div`
+  position: absolute;
+
+  ${({ customDropdownPosition }) => customDropdownPosition || `
+      top: 100%;
+      right: 0;
+    `}
+
+  width: fit-content;
+  height: fit-content;
+  display: block;
+  z-index: 1;
+
+  ${Arrow} {
+    display: ${({ showArrow }) => showArrow ? "block" : "none"};
+  }
+`;
+const Dropdown = ({ show, className, wrapRef, children, showArrow, verticalShift, customDropdownPosition }) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: show && /* @__PURE__ */ jsxs(StyledDropdownWrap, {
+		ref: wrapRef,
+		className,
+		showArrow,
+		customDropdownPosition,
+		children: [/* @__PURE__ */ jsx(Arrow, {
+			verticalShift,
+			children: /* @__PURE__ */ jsx(ArrowInnerA, { children: /* @__PURE__ */ jsx(ArrowInnerB, {}) })
+		}), children]
+	}) });
 };
-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;
+//#endregion
+export { Dropdown as default };

package/ui/Elements/Dropdown/index.d.ts

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

package/ui/Elements/Dropdown/index.js

@@ -1,3 +1,5 @@
-import Dropdown from './Dropdown';
-export { Dropdown };
-export default Dropdown;
+import Dropdown from "./Dropdown.js";
+//#region packages/ui/Elements/Dropdown/index.ts
+var Dropdown_default = Dropdown;
+//#endregion
+export { Dropdown, Dropdown_default as default };

package/ui/Elements/Dropdown/stories/Dropdown.stories.d.ts

@@ -1,8 +1,7 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../types').DropdownProps>;
+    component: import("react").FC<import("../types").DropdownProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Dropdown/types.d.ts

@@ -1,5 +1,4 @@
 import { RefObject } from 'react';
-
 export type DropdownProps = {
     show?: boolean;
     className?: string;