@mailstep/design-system 0.8.30 → 0.8.31-beta.2

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

@@ -1,86 +1,117 @@
-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;
-	}
+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];
+    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,3 +1,4 @@
-import DatePicker from './DatePicker';
+import { default as DatePicker } from './DatePicker';
+
 export { DatePickerRepeat, TimePickerRepeat } from './Datetime/types';
 export default DatePicker;

package/ui/Elements/DatePicker/index.js

@@ -1,6 +1,3 @@
-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 };
+import DatePicker from './DatePicker';
+export { DatePickerRepeat, TimePickerRepeat } from './Datetime/types';
+export default DatePicker;

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

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

package/ui/Elements/DatePicker/styles.js

@@ -1,234 +1,8 @@
-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: ${th$1("colors.blue2")};
-    background: ${th$1("colors.white")};
-    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: ${th$1("colors.lightGray2")};
-  }
-
-  .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 };
+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.d.ts

@@ -1,3 +1,4 @@
 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,29 +1,12 @@
-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 };
+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.d.ts

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

package/ui/Elements/Dropdown/Dropdown.js

@@ -1,55 +1,26 @@
-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]
-	}) });
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { Dropdown as default };
+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.d.ts

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

package/ui/Elements/Dropdown/index.js

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

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

@@ -1,7 +1,8 @@
-import type { StoryObj } from '@storybook/react-webpack5';
+import { 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/stories/Dropdown.stories.js

@@ -0,0 +1,14 @@
+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',
+    },
+};