@mailstep/design-system 0.8.27 → 0.8.28

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

@@ -1,281 +1,86 @@
-function _assert_this_initialized(self) {
-    if (self === void 0) {
-        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
-    return self;
-}
-function _call_super(_this, derived, args) {
-    derived = _get_prototype_of(derived);
-    return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
-}
-function _class_call_check(instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-        throw new TypeError("Cannot call a class as a function");
-    }
-}
-function _defineProperties(target, props) {
-    for(var i = 0; i < props.length; i++){
-        var descriptor = props[i];
-        descriptor.enumerable = descriptor.enumerable || false;
-        descriptor.configurable = true;
-        if ("value" in descriptor) descriptor.writable = true;
-        Object.defineProperty(target, descriptor.key, descriptor);
-    }
-}
-function _create_class(Constructor, protoProps, staticProps) {
-    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) _defineProperties(Constructor, staticProps);
-    return Constructor;
-}
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _get_prototype_of(o) {
-    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
-        return o.__proto__ || Object.getPrototypeOf(o);
-    };
-    return _get_prototype_of(o);
-}
-function _inherits(subClass, superClass) {
-    if (typeof superClass !== "function" && superClass !== null) {
-        throw new TypeError("Super expression must either be null or a function");
-    }
-    subClass.prototype = Object.create(superClass && superClass.prototype, {
-        constructor: {
-            value: subClass,
-            writable: true,
-            configurable: true
-        }
-    });
-    if (superClass) _set_prototype_of(subClass, superClass);
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-        }
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-function _possible_constructor_return(self, call) {
-    if (call && (_type_of(call) === "object" || typeof call === "function")) {
-        return call;
-    }
-    return _assert_this_initialized(self);
-}
-function _set_prototype_of(o, p) {
-    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
-        o.__proto__ = p;
-        return o;
-    };
-    return _set_prototype_of(o, p);
-}
-function _type_of(obj) {
-    "@swc/helpers - typeof";
-    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
-}
-function _is_native_reflect_construct() {
-    try {
-        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
-    } catch (_) {}
-    return (_is_native_reflect_construct = function() {
-        return !!result;
-    })();
-}
-import { jsx, jsxs } from "react/jsx-runtime";
+import ViewNavigation from "../components/ViewNavigation.js";
 import React from "react";
-import ViewNavigation from "../components/ViewNavigation";
-var YearsView = /*#__PURE__*/ function(_React_Component) {
-    "use strict";
-    _inherits(YearsView, _React_Component);
-    function YearsView() {
-        _class_call_check(this, YearsView);
-        var _this;
-        _this = _call_super(this, YearsView, arguments);
-        _this.disabledYearsCache = {};
-        _this._updateSelectedYear = function(event) {
-            _this.props.updateDate(event);
-        };
-        return _this;
-    }
-    _create_class(YearsView, [
-        {
-            key: "render",
-            value: function 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()
-                            })
-                        })
-                    ]
-                });
-            }
-        },
-        {
-            key: "renderNavigation",
-            value: function renderNavigation() {
-                var _this = this;
-                var viewYear = this.getViewYear();
-                return /* @__PURE__ */ jsx(ViewNavigation, {
-                    onClickPrev: function onClickPrev() {
-                        return _this.props.navigate(-10, "years");
-                    },
-                    onClickSwitch: function onClickSwitch() {
-                        return _this.props.showView("years");
-                    },
-                    onClickNext: function onClickNext() {
-                        return _this.props.navigate(10, "years");
-                    },
-                    switchContent: "".concat(viewYear, "-").concat(viewYear + 9)
-                });
-            }
-        },
-        {
-            key: "renderYears",
-            value: function renderYears() {
-                var viewYear = this.getViewYear();
-                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 /* @__PURE__ */ jsx("tr", {
-                        children: years
-                    }, i);
-                });
-            }
-        },
-        {
-            key: "renderYear",
-            value: function renderYear(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());
-            }
-        },
-        {
-            key: "getViewYear",
-            value: function getViewYear() {
-                return parseInt(this.props.viewDate.year() / 10, 10) * 10;
-            }
-        },
-        {
-            key: "getSelectedYear",
-            value: function getSelectedYear() {
-                return this.props.selectedDate && this.props.selectedDate.year();
-            }
-        },
-        {
-            key: "isDisabledYear",
-            value: function isDisabledYear(year) {
-                var cache = this.disabledYearsCache;
-                if (cache[year] !== void 0) {
-                    return cache[year];
-                }
-                var isValidDate = this.props.isValidDate;
-                if (!isValidDate) {
-                    return false;
-                }
-                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;
-            }
-        }
-    ]);
-    return YearsView;
-}(React.Component);
-YearsView.defaultProps = {
-    renderYear: function renderYear(props, year) {
-        return /* @__PURE__ */ jsx("td", _object_spread_props(_object_spread({}, props), {
-            children: year
-        }));
-    }
+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;
+	}
 };
 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.js

@@ -1,4 +1,6 @@
-import DatePicker from "./DatePicker";
-import { DatePickerRepeat, TimePickerRepeat } from "./Datetime/types";
-var DatePicker_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.js

@@ -1,36 +1,234 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\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: '›';\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"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled, { x } from "@xstyled/styled-components";
-import { th } from "@xstyled/system";
-var DatePickerBase = styled(x.div)(_templateObject(), 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"));
+import styled$1, { x } from "@xstyled/styled-components";
+import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+//#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 };