beesoft-components 0.2.10 → 0.2.14

package/build/index.js

@@ -2688,6 +2688,62 @@ FontAwesomeIcon.defaultProps = {
 };
 var convertCurry = convert.bind(null, React.createElement);
 
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+var classnames = createCommonjsModule(function (module) {
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString === Object.prototype.toString) {
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				} else {
+					classes.push(arg.toString());
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+});
+
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
     return NaN;
@@ -3004,6 +3060,38 @@ function isSameDay(dirtyDateLeft, dirtyDateRight) {
   return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();
 }
 
+/**
+ * @name endOfMonth
+ * @category Month Helpers
+ * @summary Return the end of a month for the given date.
+ *
+ * @description
+ * Return the end of a month for the given date.
+ * The result will be in the local timezone.
+ *
+ * ### v2.0.0 breaking changes:
+ *
+ * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
+ *
+ * @param {Date|Number} date - the original date
+ * @returns {Date} the end of a month
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // The end of a month for 2 September 2014 11:55:00:
+ * const result = endOfMonth(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 30 2014 23:59:59.999
+ */
+
+function endOfMonth(dirtyDate) {
+  requiredArgs(1, arguments);
+  var date = toDate(dirtyDate);
+  var month = date.getMonth();
+  date.setFullYear(date.getFullYear(), month + 1, 0);
+  date.setHours(23, 59, 59, 999);
+  return date;
+}
+
 /**
  * @name eachDayOfInterval
  * @category Interval Helpers
@@ -4135,6 +4223,36 @@ function subMonths(dirtyDate, dirtyAmount) {
   return addMonths(dirtyDate, -amount);
 }
 
+/**
+ * @name isBefore
+ * @category Common Helpers
+ * @summary Is the first date before the second one?
+ *
+ * @description
+ * Is the first date before the second one?
+ *
+ * ### v2.0.0 breaking changes:
+ *
+ * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
+ *
+ * @param {Date|Number} date - the date that should be before the other one to return true
+ * @param {Date|Number} dateToCompare - the date to compare with
+ * @returns {Boolean} the first date is before the second date
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Is 10 July 1989 before 11 February 1987?
+ * var result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))
+ * //=> false
+ */
+
+function isBefore(dirtyDate, dirtyDateToCompare) {
+  requiredArgs(2, arguments);
+  var date = toDate(dirtyDate);
+  var dateToCompare = toDate(dirtyDateToCompare);
+  return date.getTime() < dateToCompare.getTime();
+}
+
 // See issue: https://github.com/date-fns/date-fns/issues/376
 
 function setUTCDay(dirtyDate, dirtyDay, dirtyOptions) {
@@ -7621,62 +7739,6 @@ function OverlayPanel(_a) {
     return ReactDOM.createPortal(createElement(), appendTo);
 }
 
-/*!
-  Copyright (c) 2018 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-
-var classnames = createCommonjsModule(function (module) {
-/* global define */
-
-(function () {
-
-	var hasOwn = {}.hasOwnProperty;
-
-	function classNames() {
-		var classes = [];
-
-		for (var i = 0; i < arguments.length; i++) {
-			var arg = arguments[i];
-			if (!arg) continue;
-
-			var argType = typeof arg;
-
-			if (argType === 'string' || argType === 'number') {
-				classes.push(arg);
-			} else if (Array.isArray(arg)) {
-				if (arg.length) {
-					var inner = classNames.apply(null, arg);
-					if (inner) {
-						classes.push(inner);
-					}
-				}
-			} else if (argType === 'object') {
-				if (arg.toString === Object.prototype.toString) {
-					for (var key in arg) {
-						if (hasOwn.call(arg, key) && arg[key]) {
-							classes.push(key);
-						}
-					}
-				} else {
-					classes.push(arg.toString());
-				}
-			}
-		}
-
-		return classes.join(' ');
-	}
-
-	if (module.exports) {
-		classNames.default = classNames;
-		module.exports = classNames;
-	} else {
-		window.classNames = classNames;
-	}
-}());
-});
-
 /**
  * Checks if `value` is the
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
@@ -8188,7 +8250,7 @@ function debounce(func, wait, options) {
 var debounce_1 = debounce;
 
 function ContentEditableInput(props, ref) {
-    var value = props.value, _a = props.readOnly, readOnly = _a === void 0 ? false : _a, _b = props.debounceTime, debounceTime = _b === void 0 ? 500 : _b, _c = props.fillContainer, fillContainer = _c === void 0 ? true : _c, leftElement = props.leftElement, rightElement = props.rightElement, className = props.className, leftElementClassName = props.leftElementClassName, rightElementClassName = props.rightElementClassName, onFocus = props.onFocus, onInput = props.onInput, onElementCreate = props.onElementCreate, onLeftElementClick = props.onLeftElementClick, onRightElementClick = props.onRightElementClick;
+    var value = props.value, _a = props.readOnly, readOnly = _a === void 0 ? false : _a, _b = props.debounceTime, debounceTime = _b === void 0 ? 500 : _b, _c = props.fillContainer, fillContainer = _c === void 0 ? true : _c, leftElement = props.leftElement, rightElement = props.rightElement, className = props.className, leftElementClassName = props.leftElementClassName, rightElementClassName = props.rightElementClassName, _d = props.isSingleLine, isSingleLine = _d === void 0 ? false : _d, _e = props.allowSingleLineScroll, allowSingleLineScroll = _e === void 0 ? false : _e, onFocus = props.onFocus, onInput = props.onInput, onElementCreate = props.onElementCreate, onLeftElementClick = props.onLeftElementClick, onRightElementClick = props.onRightElementClick;
     var inputRef = useRef(null);
     var onLeftElementClicked = function (event) {
         if (onLeftElementClick) {
@@ -8211,8 +8273,13 @@ function ContentEditableInput(props, ref) {
         }
     }, debounceTime);
     var onElementCreated = function (element) {
-        if (element && onElementCreate) {
-            onElementCreate(element);
+        if (element) {
+            if (onElementCreate) {
+                onElementCreate(element);
+            }
+            if (element.offsetWidth < element.scrollWidth && value) {
+                element.setAttribute('title', value);
+            }
         }
     };
     var focus = function () {
@@ -8222,7 +8289,10 @@ function ContentEditableInput(props, ref) {
     useImperativeHandle(ref, function () { return ({
         focus: focus,
     }); });
-    var classNames = classnames({ 'bsc-w-full ': fillContainer }, 'bsc-flex bsc-flex-row bsc-shadow-sm bsc-border bsc-border-solid bsc-border-gray-300 dark:bsc-border-white dark:bsc-bg-gray-900 dark:bsc-text-white bsc-rounded-md bsc-p-2', className);
+    var classNames = classnames({ 'bsc-w-full ': fillContainer }, 'bsc-flex bsc-flex-row bsc-shadow-sm bsc-border bsc-border-solid bsc-border-gray-300 dark:bsc-border-white dark:bsc-bg-gray-900 dark:bsc-text-white bsc-rounded-md bsc-p-2', {
+        'bsc-overflow-x-auto bsc-overflow-y-hidden bsc-whitespace-pre': isSingleLine && allowSingleLineScroll,
+        'bsc-overflow-hidden bsc-whitespace-pre': isSingleLine && !allowSingleLineScroll,
+    }, className);
     var leftElementClasses = classnames('bsc-flex-shrink', { 'bsc-mr-2': leftElement }, leftElementClassName);
     var rightElementClasses = classnames('bsc-flex-shrink', { 'bsc-ml-2': rightElement }, rightElementClassName);
     return (jsxs("div", __assign({ className: classNames, ref: function (element) { return onElementCreated(element); } }, { children: [jsx("div", __assign({ className: leftElementClasses, onClick: onLeftElementClicked }, { children: leftElement }), void 0),
@@ -8386,6 +8456,9 @@ function getDefaultTime(locale) {
     tempDate.setHours(0, 0, 0, 0);
     return tempDate.toLocaleTimeString(locale.code);
 }
+function isDateBetween(checkDate, startComparisonDate, endComparisonDate) {
+    return checkDate.getTime() >= startComparisonDate.getTime() && checkDate.getTime() <= endComparisonDate.getTime();
+}
 function loadLocale(localeToLoad) {
     return new Promise(function (resolve, reject) {
         import("date-fns/locale/" + localeToLoad)
@@ -8445,15 +8518,19 @@ var DateTimeActionType;
     DateTimeActionType[DateTimeActionType["MonthSelector"] = 1] = "MonthSelector";
     DateTimeActionType[DateTimeActionType["YearSelector"] = 2] = "YearSelector";
     DateTimeActionType[DateTimeActionType["TimeSelector"] = 3] = "TimeSelector";
-    DateTimeActionType[DateTimeActionType["SetViewDate"] = 4] = "SetViewDate";
-    DateTimeActionType[DateTimeActionType["SetSelectedDate"] = 5] = "SetSelectedDate";
-    DateTimeActionType[DateTimeActionType["SetSelectedDateRange"] = 6] = "SetSelectedDateRange";
-    DateTimeActionType[DateTimeActionType["ResetSelectedDateChanged"] = 7] = "ResetSelectedDateChanged";
-    DateTimeActionType[DateTimeActionType["ResetSelectedDateRangeChanged"] = 8] = "ResetSelectedDateRangeChanged";
-    DateTimeActionType[DateTimeActionType["InitializeDates"] = 9] = "InitializeDates";
+    DateTimeActionType[DateTimeActionType["DateRangeSelector"] = 4] = "DateRangeSelector";
+    DateTimeActionType[DateTimeActionType["SetViewDate"] = 5] = "SetViewDate";
+    DateTimeActionType[DateTimeActionType["SetSelectedDate"] = 6] = "SetSelectedDate";
+    DateTimeActionType[DateTimeActionType["SetSelectedDateRange"] = 7] = "SetSelectedDateRange";
+    DateTimeActionType[DateTimeActionType["SetSelectedStartDate"] = 8] = "SetSelectedStartDate";
+    DateTimeActionType[DateTimeActionType["SetSelectedEndDate"] = 9] = "SetSelectedEndDate";
+    DateTimeActionType[DateTimeActionType["ResetSelectedDateChanged"] = 10] = "ResetSelectedDateChanged";
+    DateTimeActionType[DateTimeActionType["ResetSelectedDateRangeChanged"] = 11] = "ResetSelectedDateRangeChanged";
+    DateTimeActionType[DateTimeActionType["ClearDates"] = 12] = "ClearDates";
+    DateTimeActionType[DateTimeActionType["InitializeDates"] = 13] = "InitializeDates";
 })(DateTimeActionType || (DateTimeActionType = {}));
 var reducer = function (state, action) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     switch (action.type) {
         case DateTimeActionType.DaySelector:
             return __assign(__assign({}, state), { currentSelector: DateTimeActionType.DaySelector, currentViewDate: action.viewDate || state.currentViewDate });
@@ -8463,17 +8540,36 @@ var reducer = function (state, action) {
             return __assign(__assign({}, state), { currentSelector: DateTimeActionType.YearSelector });
         case DateTimeActionType.TimeSelector:
             return __assign(__assign({}, state), { currentSelector: DateTimeActionType.TimeSelector });
+        case DateTimeActionType.DateRangeSelector:
+            return __assign(__assign({}, state), { currentSelector: DateTimeActionType.DateRangeSelector, currentViewDate: action.viewDate || state.currentViewDate });
         case DateTimeActionType.SetViewDate:
             return __assign(__assign({}, state), { currentViewDate: action.viewDate || new Date(), dateInitialized: true });
         case DateTimeActionType.SetSelectedDate:
-            return __assign(__assign({}, state), { selectedDate: action.selectedDate || state.selectedDate, selectedDateChanged: ((_a = state.originalSetDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = action.selectedDate) === null || _b === void 0 ? void 0 : _b.getTime()) });
+            return __assign(__assign({}, state), { selectedDate: action.selectedDate || state.selectedDate, selectedDateChanged: !state.selectedDateChanged
+                    ? ((_a = state.originalSetDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = action.selectedDate) === null || _b === void 0 ? void 0 : _b.getTime())
+                    : true });
         case DateTimeActionType.SetSelectedDateRange:
             return __assign(__assign({}, state), { selectedStartDate: action.selectedStartDate || state.selectedStartDate, selectedEndDate: action.selectedEndDate || state.selectedEndDate, selectedDateChanged: ((_c = state.originalSetStartDate) === null || _c === void 0 ? void 0 : _c.getTime()) !== ((_d = action.selectedStartDate) === null || _d === void 0 ? void 0 : _d.getTime()) ||
                     ((_e = state.originalSetEndDate) === null || _e === void 0 ? void 0 : _e.getTime()) !== ((_f = action.selectedEndDate) === null || _f === void 0 ? void 0 : _f.getTime()) });
+        case DateTimeActionType.SetSelectedStartDate:
+            return __assign(__assign({}, state), { selectedStartDate: action.selectedStartDate, selectedEndDate: undefined, selectedDateChanged: !state.selectedDateChanged
+                    ? ((_g = state.originalSetStartDate) === null || _g === void 0 ? void 0 : _g.getTime()) !== ((_h = action.selectedStartDate) === null || _h === void 0 ? void 0 : _h.getTime())
+                    : true });
+        case DateTimeActionType.SetSelectedEndDate:
+            return __assign(__assign({}, state), { selectedEndDate: action.selectedEndDate, selectedDateChanged: !state.selectedDateChanged
+                    ? ((_j = state.originalSetEndDate) === null || _j === void 0 ? void 0 : _j.getTime()) !== ((_k = action.selectedEndDate) === null || _k === void 0 ? void 0 : _k.getTime())
+                    : true });
         case DateTimeActionType.ResetSelectedDateChanged:
             return __assign(__assign({}, state), { originalSetDate: action.selectedDate || state.selectedDate, selectedDateChanged: false });
         case DateTimeActionType.ResetSelectedDateRangeChanged:
             return __assign(__assign({}, state), { originalSetStartDate: action.selectedStartDate || state.selectedStartDate, originalSetEndDate: action.selectedEndDate || state.selectedEndDate, selectedDateChanged: false });
+        case DateTimeActionType.ClearDates:
+            return {
+                currentSelector: state.currentSelector,
+                currentViewDate: state.currentViewDate,
+                selectedDateChanged: false,
+                dateInitialized: true,
+            };
         case DateTimeActionType.InitializeDates:
             var baseState = __assign(__assign({}, state), { currentViewDate: getInitialDate(action.initialDate), dateInitialized: true });
             if (!Array.isArray(action.initialDate)) {
@@ -8498,10 +8594,10 @@ function DateTimeCalendar(_a) {
     var _e = useState(false), isLocaleLoaded = _e[0], setIsLocaleLoaded = _e[1];
     var loadedLocale = useRef();
     var weekDaysRef = useRef();
-    var selectedDateRef = useRef();
-    var _f = useState(), selectedStartComparison = _f[0], setSelectedStartComparison = _f[1];
-    var _g = useState(), selectedEndComparison = _g[0], setSelectedEndComparison = _g[1];
-    var isShiftDown = useKeyDown(['Meta', 'Control']);
+    var _f = useState(), currentSelectedDate = _f[0], setCurrentSelectedDate = _f[1];
+    var _g = useState(), selectedStartComparison = _g[0], setSelectedStartComparison = _g[1];
+    var _h = useState(), selectedEndComparison = _h[0], setSelectedEndComparison = _h[1];
+    useKeyDown(['Meta', 'Control']);
     var context = useContext(DateTimeContext);
     var viewTemplate = context.calendarTemplate;
     var loadLocaleObject = function () { return __awaiter(_this, void 0, void 0, function () {
@@ -8535,14 +8631,25 @@ function DateTimeCalendar(_a) {
     }, [viewDate, isLocaleLoaded]);
     useEffect(function () {
         if (selectedDate) {
-            selectedDateRef.current = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate());
+            setCurrentSelectedDate(new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()));
+        }
+        else {
+            setCurrentSelectedDate(undefined);
         }
     }, [selectedDate]);
     useEffect(function () {
-        if (selectedStartDate && selectedEndDate) {
-            setSelectedStartComparison(new Date(selectedStartDate.getFullYear(), selectedStartDate.getMonth(), selectedStartDate.getDate()).getTime());
+        if (selectedStartDate) {
+            setSelectedStartComparison(new Date(selectedStartDate.getFullYear(), selectedStartDate.getMonth(), selectedStartDate.getDate(), 0, 0, 0).getTime());
+        }
+        else {
+            setSelectedStartComparison(undefined);
+        }
+        if (selectedEndDate) {
             setSelectedEndComparison(new Date(selectedEndDate.getFullYear(), selectedEndDate.getMonth(), selectedEndDate.getDate(), 23, 59, 59).getTime());
         }
+        else {
+            setSelectedEndComparison(undefined);
+        }
     }, [selectedStartDate, selectedEndDate]);
     useEffect(function () {
         if (loadedLocale.current && locale) {
@@ -8569,17 +8676,19 @@ function DateTimeCalendar(_a) {
         else {
             if (!onDateSelected)
                 throw new Error('Range selection mode requires onDateSelected to be set');
-            if (!selectedStartDate || (selectedStartDate && !isShiftDown)) {
+            if (!selectedStartDate || isBefore(date, selectedStartDate)) {
                 onDateSelected(date);
             }
-            else if (selectedStartDate && isShiftDown) {
+            else if (selectedStartDate && !selectedEndDate) {
                 onDateSelected(date, { setEndDate: true });
             }
+            else if (selectedStartDate && selectedEndDate) {
+                onDateSelected(date);
+            }
         }
     };
     var isSelectedDate = function (currentDate) {
-        var _a;
-        return ((_a = selectedDateRef.current) === null || _a === void 0 ? void 0 : _a.toLocaleDateString()) === currentDate.toLocaleDateString();
+        return (currentSelectedDate === null || currentSelectedDate === void 0 ? void 0 : currentSelectedDate.toLocaleDateString()) === currentDate.toLocaleDateString();
     };
     var isInSelectedDateRange = function (currentDate) {
         if (selectedStartComparison && selectedEndComparison) {
@@ -8616,7 +8725,10 @@ function DateTimeCalendar(_a) {
                             },
                             _a[(context.colors.selectedDateColor || 'bsc-bg-blue-100') + " dark:bsc-bg-white dark:bsc-text-black bsc-rounded-full"] = column &&
                                 column.dayValue &&
-                                ((selectedDateRef.current && isSelectedDate(column.dayValue)) ||
+                                ((currentSelectedDate && isSelectedDate(column.dayValue)) ||
+                                    (selectedStartComparison &&
+                                        !selectedEndComparison &&
+                                        isSameDay(selectedStartComparison, column.dayValue)) ||
                                     (selectedStartComparison && selectedEndComparison && isInSelectedDateRange(column.dayValue))),
                             _a['bsc-cursor-pointer'] = isSelectable,
                             _a['bsc-text-red-300 bsc-cursor-not-allowed'] = !isSelectable,
@@ -8738,14 +8850,13 @@ function DateTimeRangeSelector(_a) {
     var onDateSelected = function (date, options) {
         if (!options || !options.setEndDate) {
             dispatcher({
-                type: DateTimeActionType.SetSelectedDateRange,
+                type: DateTimeActionType.SetSelectedStartDate,
                 selectedStartDate: date,
-                selectedEndDate: date,
             });
         }
         else {
             dispatcher({
-                type: DateTimeActionType.SetSelectedDateRange,
+                type: DateTimeActionType.SetSelectedEndDate,
                 selectedEndDate: date,
             });
         }
@@ -8887,9 +8998,10 @@ function DateTimeYearSelector(_a) {
 }
 
 function DateTime(_a) {
-    var value = _a.value, _b = _a.readOnly, readOnly = _b === void 0 ? false : _b, label = _a.label, _c = _a.useDefaultDateValue, useDefaultDateValue = _c === void 0 ? false : _c, locale = _a.locale, _d = _a.dateSelection, dateSelection = _d === void 0 ? DateSelectionType.DateTime : _d, dateFormat = _a.dateFormat, timeConstraints = _a.timeConstraints, icon = _a.icon, _e = _a.iconPosition, iconPosition = _e === void 0 ? CalendarIconPosition.Right : _e, inputElement = _a.inputElement, _f = _a.colors, colors = _f === void 0 ? createDefaultColors() : _f, selectableDate = _a.selectableDate, isValidDate = _a.isValidDate, onChange = _a.onChange, calendarTemplate = _a.calendarTemplate, dateScrollerTemplate = _a.dateScrollerTemplate, inputTemplate = _a.inputTemplate;
-    var _g = useState(false), selectorOpen = _g[0], setSelectorOpen = _g[1];
-    var _h = useState(), dropDownTarget = _h[0], setDropDownTarget = _h[1];
+    var _b;
+    var value = _a.value, _c = _a.readOnly, readOnly = _c === void 0 ? false : _c, label = _a.label, _d = _a.useDefaultDateValue, useDefaultDateValue = _d === void 0 ? false : _d, locale = _a.locale, className = _a.className, _e = _a.dateSelection, dateSelection = _e === void 0 ? DateSelectionType.DateTime : _e, dateFormat = _a.dateFormat, timeConstraints = _a.timeConstraints, icon = _a.icon, _f = _a.iconPosition, iconPosition = _f === void 0 ? CalendarIconPosition.Right : _f, inputElement = _a.inputElement, _g = _a.colors, colors = _g === void 0 ? createDefaultColors() : _g, selectableDate = _a.selectableDate, isValidDate = _a.isValidDate, onChange = _a.onChange, calendarTemplate = _a.calendarTemplate, dateScrollerTemplate = _a.dateScrollerTemplate, inputTemplate = _a.inputTemplate;
+    var _h = useState(false), selectorOpen = _h[0], setSelectorOpen = _h[1];
+    var _j = useState(), dropDownTarget = _j[0], setDropDownTarget = _j[1];
     var language = useRef(locale || getBrowserLanguage());
     var loadedLocale = useRef();
     var inputElementRef = useRef();
@@ -8990,21 +9102,42 @@ function DateTime(_a) {
         selectedDateChanged: false,
         dateInitialized: false,
     };
-    var _j = useReducer(reducer, initialState), state = _j[0], dispatcher = _j[1];
+    var _k = useReducer(reducer, initialState), state = _k[0], dispatcher = _k[1];
     var onFocus = function (event) {
         setDropDownElement();
         setSelectorOpen(true);
     };
     var onInput = function (event) {
-        var inputDate = parseDate(event.target.innerText);
+        var dateString = event.target.innerText;
+        var inputDate = dateSelection !== DateSelectionType.DateRange ? parseDate(dateString) : parseDateRange(dateString);
         if (inputDate) {
+            if (!Array.isArray(inputDate)) {
+                dispatcher({
+                    type: DateTimeActionType.SetViewDate,
+                    viewDate: inputDate,
+                });
+                dispatcher({
+                    type: DateTimeActionType.SetSelectedDate,
+                    selectedDate: inputDate,
+                });
+            }
+            else {
+                if (!isDateBetween(inputDate[0], startOfMonth(state.currentViewDate), endOfMonth(addMonths(state.currentViewDate, 1)))) {
+                    dispatcher({
+                        type: DateTimeActionType.SetViewDate,
+                        viewDate: inputDate[0],
+                    });
+                }
+                dispatcher({
+                    type: DateTimeActionType.SetSelectedDateRange,
+                    selectedStartDate: inputDate[0],
+                    selectedEndDate: inputDate[1],
+                });
+            }
+        }
+        else if (dateString === '') {
             dispatcher({
-                type: DateTimeActionType.SetViewDate,
-                viewDate: inputDate,
-            });
-            dispatcher({
-                type: DateTimeActionType.SetSelectedDate,
-                selectedDate: inputDate,
+                type: DateTimeActionType.ClearDates,
             });
         }
     };
@@ -9131,8 +9264,12 @@ function DateTime(_a) {
     };
     var defaultTemplate = function (props, children) { return (jsx(Fragment$1, { children: children }, void 0)); };
     var template = inputTemplate || defaultTemplate;
+    var inputStyles = classnames('bsc-text-left', (_b = {},
+        _b["" + ((colors === null || colors === void 0 ? void 0 : colors.readOnlyInputBgColor) || 'bsc-bg-gray-200')] = readOnly,
+        _b["" + ((colors === null || colors === void 0 ? void 0 : colors.inputBgColor) || 'bsc-bg-white')] = !readOnly,
+        _b), "dark:bsc-bg-black " + (colors === null || colors === void 0 ? void 0 : colors.inputBorderColor) + " bc-dt-input", className);
     return (jsx(DateTimeContext.Provider, __assign({ value: contextProps }, { children: jsxs("div", __assign({ className: "bc-date-time" }, { children: [jsxs(TemplateOutlet, __assign({ props: inputTemplateProps, template: template }, { children: [label && jsx("label", __assign({ className: "dark:bsc-text-white bc-dt-label" }, { children: label }), void 0),
-                        jsx(ContentEditableInput$1, __assign({ value: getValue(), readOnly: readOnly, className: "bsc-text-left " + (readOnly ? (colors === null || colors === void 0 ? void 0 : colors.readOnlyInputBgColor) || 'bsc-bg-gray-200' : (colors === null || colors === void 0 ? void 0 : colors.inputBgColor) || 'bsc-bg-white') + " dark:bsc-bg-black " + (colors === null || colors === void 0 ? void 0 : colors.inputBorderColor) + " bc-dt-input", onFocus: onFocus, onInput: onInput, onElementCreate: onInputElementCreated }, inputProps), void 0)] }), void 0),
+                        jsx(ContentEditableInput$1, __assign({ value: getValue(), readOnly: readOnly, className: inputStyles, onFocus: onFocus, onInput: onInput, onElementCreate: onInputElementCreated }, inputProps), void 0)] }), void 0),
                 jsx(OverlayPanel, __assign({ visible: selectorOpen, target: dropDownTarget, shouldTargetCloseOverlay: false, shouldScrollCloseOverlay: true, hidden: onDateTimeHidden }, { children: jsxs(Fragment$1, { children: [state.currentSelector === DateTimeActionType.DaySelector &&
                                 canShowDateSelectors &&
                                 state.dateInitialized &&
@@ -9179,7 +9316,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/*! tailwindcss v2.1.2 | MIT License | https://tailwindcss.com */\n\n/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\n\n/*\nDocument\n========\n*/\n\n/**\nUse a better box model (opinionated).\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box;\n}\n\n/**\nUse a more readable tab size (opinionated).\n*/\n\nhtml {\n  -moz-tab-size: 4;\n  tab-size: 4;\n}\n\n/**\n1. Correct the line height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n*/\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/*\nSections\n========\n*/\n\n/**\nRemove the margin in all browsers.\n*/\n\nbody {\n  margin: 0;\n}\n\n/**\nImprove consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n*/\n\nbody {\n  font-family:\n\t\tsystem-ui,\n\t\t-apple-system, /* Firefox supports this but not yet `system-ui` */\n\t\t'Segoe UI',\n\t\tRoboto,\n\t\tHelvetica,\n\t\tArial,\n\t\tsans-serif,\n\t\t'Apple Color Emoji',\n\t\t'Segoe UI Emoji';\n}\n\n/*\nGrouping content\n================\n*/\n\n/**\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n}\n\n/*\nText-level semantics\n====================\n*/\n\n/**\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/**\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n2. Correct the odd 'em' font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family:\n\t\tui-monospace,\n\t\tSFMono-Regular,\n\t\tConsolas,\n\t\t'Liberation Mono',\n\t\tMenlo,\n\t\tmonospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/**\nPrevent 'sub' and 'sup' elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\nTabular data\n============\n*/\n\n/**\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n}\n\n/*\nForms\n=====\n*/\n\n/**\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\nRemove the inheritance of text transform in Edge and Firefox.\n1. Remove the inheritance of text transform in Firefox.\n*/\n\nbutton,\nselect { /* 1 */\n  text-transform: none;\n}\n\n/**\nCorrect the inability to style clickable types in iOS and Safari.\n*/\n\nbutton,\n[type='button'] {\n  -webkit-appearance: button;\n}\n\n/**\nRemove the inner border and padding in Firefox.\n*/\n\n/**\nRestore the focus styles unset by the previous rule.\n*/\n\n/**\nRemove the additional ':invalid' styles in Firefox.\nSee: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737\n*/\n\n/**\nRemove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.\n*/\n\nlegend {\n  padding: 0;\n}\n\n/**\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n/**\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n/**\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n/**\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to 'inherit' in Safari.\n*/\n\n/*\nInteractive\n===========\n*/\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/**\n * Manually forked from SUIT CSS Base: https://github.com/suitcss/base\n * A thin layer on top of normalize.css that provides a starting point more\n * suitable for web applications.\n */\n\n/**\n * Removes the default spacing and border for appropriate elements.\n */\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nbutton {\n  background-color: transparent;\n  background-image: none;\n}\n\n/**\n * Work around a Firefox/IE bug where the transparent `button` background\n * results in a loss of the default `button` focus styles.\n */\n\nbutton:focus {\n  outline: 1px dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nol,\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/**\n * Tailwind custom reset styles\n */\n\n/**\n * 1. Use the user's configured `sans` font-family (with Tailwind's default\n *    sans-serif font stack as a fallback) as a sane default.\n * 2. Use Tailwind's default \"normal\" line-height so the user isn't forced\n *    to override it to ensure consistency even when using the default theme.\n */\n\nhtml {\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 1 */\n  line-height: 1.5; /* 2 */\n}\n\n/**\n * Inherit font-family and line-height from `html` so users can set them as\n * a class directly on the `html` element.\n */\n\nbody {\n  font-family: inherit;\n  line-height: inherit;\n}\n\n/**\n * 1. Prevent padding and border from affecting element width.\n *\n *    We used to set this in the html element and inherit from\n *    the parent element for everything else. This caused issues\n *    in shadow-dom-enhanced elements like <details> where the content\n *    is wrapped by a div with box-sizing set to `content-box`.\n *\n *    https://github.com/mozdevs/cssremedy/issues/4\n *\n *\n * 2. Allow adding a border to an element by just adding a border-width.\n *\n *    By default, the way the browser specifies that an element should have no\n *    border is by setting it's border-style to `none` in the user-agent\n *    stylesheet.\n *\n *    In order to easily add borders to elements by just setting the `border-width`\n *    property, we change the default border-style for all elements to `solid`, and\n *    use border-width to hide them instead. This way our `border` utilities only\n *    need to set the `border-width` property instead of the entire `border`\n *    shorthand, making our border utilities much more straightforward to compose.\n *\n *    https://github.com/tailwindcss/tailwindcss/pull/116\n */\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n/*\n * Ensure horizontal rules are visible by default\n */\n\nhr {\n  border-top-width: 1px;\n}\n\n/**\n * Undo the `border-style: none` reset that Normalize applies to images so that\n * our `border-{width}` utilities have the expected effect.\n *\n * The Normalize reset is unnecessary for us since we default the border-width\n * to 0 on all elements.\n *\n * https://github.com/tailwindcss/tailwindcss/issues/362\n */\n\nimg {\n  border-style: solid;\n}\n\ntextarea {\n  resize: vertical;\n}\n\ninput::-webkit-input-placeholder, textarea::-webkit-input-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\nbutton {\n  cursor: pointer;\n}\n\ntable {\n  border-collapse: collapse;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/**\n * Reset links to optimize for opt-in styling instead of\n * opt-out.\n */\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/**\n * Reset form element properties that are easy to forget to\n * style explicitly so you don't inadvertently introduce\n * styles that deviate from your design system. These styles\n * supplement a partial reset that is already applied by\n * normalize.css.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  padding: 0;\n  line-height: inherit;\n  color: inherit;\n}\n\n/**\n * Use the configured 'mono' font family for elements that\n * are expected to be rendered with a monospace font, falling\n * back to the system monospace stack if there is no configured\n * 'mono' font family.\n */\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n/**\n * Make replaced elements `display: block` by default as that's\n * the behavior you want almost all of the time. Inspired by\n * CSS Remedy, with `svg` added as well.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block;\n  vertical-align: middle;\n}\n\n/**\n * Constrain images and videos to the parent width and preserve\n * their intrinsic aspect ratio.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n.bsc-bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.bsc-bg-gray-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));\n}\n\n.bsc-bg-gray-900 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(17, 24, 39, var(--tw-bg-opacity));\n}\n\n.bsc-bg-red-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));\n}\n\n.bsc-bg-green-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(209, 250, 229, var(--tw-bg-opacity));\n}\n\n.bsc-bg-blue-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(219, 234, 254, var(--tw-bg-opacity));\n}\n\n.bsc-bg-blue-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(191, 219, 254, var(--tw-bg-opacity));\n}\n\n.hover\\:bsc-bg-gray-300:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));\n}\n\n.bsc-dark .dark\\:bsc-bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n\n.bsc-dark .dark\\:bsc-bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.bsc-dark .dark\\:bsc-bg-gray-900 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(17, 24, 39, var(--tw-bg-opacity));\n}\n\n.bsc-dark .dark\\:hover\\:bsc-bg-white:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.bsc-border-black {\n  --tw-border-opacity: 1;\n  border-color: rgba(0, 0, 0, var(--tw-border-opacity));\n}\n\n.bsc-border-gray-300 {\n  --tw-border-opacity: 1;\n  border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n}\n\n.bsc-border-gray-400 {\n  --tw-border-opacity: 1;\n  border-color: rgba(156, 163, 175, var(--tw-border-opacity));\n}\n\n.bsc-border-gray-500 {\n  --tw-border-opacity: 1;\n  border-color: rgba(107, 114, 128, var(--tw-border-opacity));\n}\n\n.bsc-dark .dark\\:bsc-border-white {\n  --tw-border-opacity: 1;\n  border-color: rgba(255, 255, 255, var(--tw-border-opacity));\n}\n\n.bsc-rounded-md {\n  border-radius: 0.375rem;\n}\n\n.bsc-rounded-full {\n  border-radius: 9999px;\n}\n\n.bsc-border-solid {\n  border-style: solid;\n}\n\n.bsc-border-none {\n  border-style: none;\n}\n\n.bsc-border {\n  border-width: 1px;\n}\n\n.bsc-border-r {\n  border-right-width: 1px;\n}\n\n.bsc-cursor-pointer {\n  cursor: pointer;\n}\n\n.bsc-cursor-not-allowed {\n  cursor: not-allowed;\n}\n\n.bsc-flex {\n  display: -webkit-flex;\n  display: flex;\n}\n\n.bsc-grid {\n  display: grid;\n}\n\n.bsc-flex-row {\n  -webkit-flex-direction: row;\n          flex-direction: row;\n}\n\n.bsc-flex-col {\n  -webkit-flex-direction: column;\n          flex-direction: column;\n}\n\n.bsc-justify-center {\n  -webkit-justify-content: center;\n          justify-content: center;\n}\n\n.bsc-flex-grow {\n  -webkit-flex-grow: 1;\n          flex-grow: 1;\n}\n\n.bsc-flex-shrink {\n  -webkit-flex-shrink: 1;\n          flex-shrink: 1;\n}\n\n.bsc-font-bold {\n  font-weight: 700;\n}\n\n.bsc-mr-2 {\n  margin-right: 0.5rem;\n}\n\n.bsc-ml-2 {\n  margin-left: 0.5rem;\n}\n\n.focus\\:bsc-outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n\n.bsc-overflow-scroll {\n  overflow: scroll;\n}\n\n.bsc-p-2 {\n  padding: 0.5rem;\n}\n\n.bsc-p-4 {\n  padding: 1rem;\n}\n\n.bsc-py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.bsc-px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.bsc-pr-4 {\n  padding-right: 1rem;\n}\n\n.bsc-pl-4 {\n  padding-left: 1rem;\n}\n\n.bsc-pb-8 {\n  padding-bottom: 2rem;\n}\n\n.bsc-absolute {\n  position: absolute;\n}\n\n* {\n  --tw-shadow: 0 0 #0000;\n}\n\n.bsc-shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.bsc-shadow {\n  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n* {\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n}\n\n.bsc-text-left {\n  text-align: left;\n}\n\n.bsc-text-center {\n  text-align: center;\n}\n\n.bsc-text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgba(156, 163, 175, var(--tw-text-opacity));\n}\n\n.bsc-text-red-300 {\n  --tw-text-opacity: 1;\n  color: rgba(252, 165, 165, var(--tw-text-opacity));\n}\n\n.bsc-dark .dark\\:bsc-text-black {\n  --tw-text-opacity: 1;\n  color: rgba(0, 0, 0, var(--tw-text-opacity));\n}\n\n.bsc-dark .dark\\:bsc-text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.bsc-dark .dark\\:hover\\:bsc-text-black:hover {\n  --tw-text-opacity: 1;\n  color: rgba(0, 0, 0, var(--tw-text-opacity));\n}\n\n.bsc-w-full {\n  width: 100%;\n}\n\n.bsc-gap-3 {\n  gap: 0.75rem;\n}\n\n.bsc-gap-4 {\n  gap: 1rem;\n}\n\n.bsc-grid-cols-4 {\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n\n.bsc-grid-cols-7 {\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n\n.bsc-col-span-4 {\n  grid-column: span 4 / span 4;\n}\n\n@-webkit-keyframes bsc-spin {\n  to {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n\n@keyframes bsc-spin {\n  to {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n\n@-webkit-keyframes bsc-ping {\n  75%, 100% {\n    -webkit-transform: scale(2);\n            transform: scale(2);\n    opacity: 0;\n  }\n}\n\n@keyframes bsc-ping {\n  75%, 100% {\n    -webkit-transform: scale(2);\n            transform: scale(2);\n    opacity: 0;\n  }\n}\n\n@-webkit-keyframes bsc-pulse {\n  50% {\n    opacity: .5;\n  }\n}\n\n@keyframes bsc-pulse {\n  50% {\n    opacity: .5;\n  }\n}\n\n@-webkit-keyframes bsc-bounce {\n  0%, 100% {\n    -webkit-transform: translateY(-25%);\n            transform: translateY(-25%);\n    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\n            animation-timing-function: cubic-bezier(0.8,0,1,1);\n  }\n\n  50% {\n    -webkit-transform: none;\n            transform: none;\n    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\n            animation-timing-function: cubic-bezier(0,0,0.2,1);\n  }\n}\n\n@keyframes bsc-bounce {\n  0%, 100% {\n    -webkit-transform: translateY(-25%);\n            transform: translateY(-25%);\n    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\n            animation-timing-function: cubic-bezier(0.8,0,1,1);\n  }\n\n  50% {\n    -webkit-transform: none;\n            transform: none;\n    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\n            animation-timing-function: cubic-bezier(0,0,0.2,1);\n  }\n}\n\nbody {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n\n@media (min-width: 640px) {\n}\n\n@media (min-width: 768px) {\n}\n\n@media (min-width: 1024px) {\n}\n\n@media (min-width: 1280px) {\n}\n\n@media (min-width: 1536px) {\n}\n";
+var css_248z = "/*! tailwindcss v2.1.2 | MIT License | https://tailwindcss.com */\n\n/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\n\n/*\nDocument\n========\n*/\n\n/**\nUse a better box model (opinionated).\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box;\n}\n\n/**\nUse a more readable tab size (opinionated).\n*/\n\nhtml {\n  -moz-tab-size: 4;\n  tab-size: 4;\n}\n\n/**\n1. Correct the line height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n*/\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/*\nSections\n========\n*/\n\n/**\nRemove the margin in all browsers.\n*/\n\nbody {\n  margin: 0;\n}\n\n/**\nImprove consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n*/\n\nbody {\n  font-family:\n\t\tsystem-ui,\n\t\t-apple-system, /* Firefox supports this but not yet `system-ui` */\n\t\t'Segoe UI',\n\t\tRoboto,\n\t\tHelvetica,\n\t\tArial,\n\t\tsans-serif,\n\t\t'Apple Color Emoji',\n\t\t'Segoe UI Emoji';\n}\n\n/*\nGrouping content\n================\n*/\n\n/**\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n}\n\n/*\nText-level semantics\n====================\n*/\n\n/**\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/**\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n2. Correct the odd 'em' font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family:\n\t\tui-monospace,\n\t\tSFMono-Regular,\n\t\tConsolas,\n\t\t'Liberation Mono',\n\t\tMenlo,\n\t\tmonospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/**\nPrevent 'sub' and 'sup' elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\nTabular data\n============\n*/\n\n/**\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n}\n\n/*\nForms\n=====\n*/\n\n/**\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\nRemove the inheritance of text transform in Edge and Firefox.\n1. Remove the inheritance of text transform in Firefox.\n*/\n\nbutton,\nselect { /* 1 */\n  text-transform: none;\n}\n\n/**\nCorrect the inability to style clickable types in iOS and Safari.\n*/\n\nbutton,\n[type='button'] {\n  -webkit-appearance: button;\n}\n\n/**\nRemove the inner border and padding in Firefox.\n*/\n\n/**\nRestore the focus styles unset by the previous rule.\n*/\n\n/**\nRemove the additional ':invalid' styles in Firefox.\nSee: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737\n*/\n\n/**\nRemove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.\n*/\n\nlegend {\n  padding: 0;\n}\n\n/**\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n/**\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n/**\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n/**\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to 'inherit' in Safari.\n*/\n\n/*\nInteractive\n===========\n*/\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/**\n * Manually forked from SUIT CSS Base: https://github.com/suitcss/base\n * A thin layer on top of normalize.css that provides a starting point more\n * suitable for web applications.\n */\n\n/**\n * Removes the default spacing and border for appropriate elements.\n */\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nbutton {\n  background-color: transparent;\n  background-image: none;\n}\n\n/**\n * Work around a Firefox/IE bug where the transparent `button` background\n * results in a loss of the default `button` focus styles.\n */\n\nbutton:focus {\n  outline: 1px dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nol,\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/**\n * Tailwind custom reset styles\n */\n\n/**\n * 1. Use the user's configured `sans` font-family (with Tailwind's default\n *    sans-serif font stack as a fallback) as a sane default.\n * 2. Use Tailwind's default \"normal\" line-height so the user isn't forced\n *    to override it to ensure consistency even when using the default theme.\n */\n\nhtml {\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 1 */\n  line-height: 1.5; /* 2 */\n}\n\n/**\n * Inherit font-family and line-height from `html` so users can set them as\n * a class directly on the `html` element.\n */\n\nbody {\n  font-family: inherit;\n  line-height: inherit;\n}\n\n/**\n * 1. Prevent padding and border from affecting element width.\n *\n *    We used to set this in the html element and inherit from\n *    the parent element for everything else. This caused issues\n *    in shadow-dom-enhanced elements like <details> where the content\n *    is wrapped by a div with box-sizing set to `content-box`.\n *\n *    https://github.com/mozdevs/cssremedy/issues/4\n *\n *\n * 2. Allow adding a border to an element by just adding a border-width.\n *\n *    By default, the way the browser specifies that an element should have no\n *    border is by setting it's border-style to `none` in the user-agent\n *    stylesheet.\n *\n *    In order to easily add borders to elements by just setting the `border-width`\n *    property, we change the default border-style for all elements to `solid`, and\n *    use border-width to hide them instead. This way our `border` utilities only\n *    need to set the `border-width` property instead of the entire `border`\n *    shorthand, making our border utilities much more straightforward to compose.\n *\n *    https://github.com/tailwindcss/tailwindcss/pull/116\n */\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n/*\n * Ensure horizontal rules are visible by default\n */\n\nhr {\n  border-top-width: 1px;\n}\n\n/**\n * Undo the `border-style: none` reset that Normalize applies to images so that\n * our `border-{width}` utilities have the expected effect.\n *\n * The Normalize reset is unnecessary for us since we default the border-width\n * to 0 on all elements.\n *\n * https://github.com/tailwindcss/tailwindcss/issues/362\n */\n\nimg {\n  border-style: solid;\n}\n\ntextarea {\n  resize: vertical;\n}\n\ninput::-webkit-input-placeholder, textarea::-webkit-input-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\nbutton {\n  cursor: pointer;\n}\n\ntable {\n  border-collapse: collapse;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/**\n * Reset links to optimize for opt-in styling instead of\n * opt-out.\n */\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/**\n * Reset form element properties that are easy to forget to\n * style explicitly so you don't inadvertently introduce\n * styles that deviate from your design system. These styles\n * supplement a partial reset that is already applied by\n * normalize.css.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  padding: 0;\n  line-height: inherit;\n  color: inherit;\n}\n\n/**\n * Use the configured 'mono' font family for elements that\n * are expected to be rendered with a monospace font, falling\n * back to the system monospace stack if there is no configured\n * 'mono' font family.\n */\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n/**\n * Make replaced elements `display: block` by default as that's\n * the behavior you want almost all of the time. Inspired by\n * CSS Remedy, with `svg` added as well.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block;\n  vertical-align: middle;\n}\n\n/**\n * Constrain images and videos to the parent width and preserve\n * their intrinsic aspect ratio.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n.bsc-bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.bsc-bg-gray-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));\n}\n\n.bsc-bg-gray-900 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(17, 24, 39, var(--tw-bg-opacity));\n}\n\n.bsc-bg-red-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));\n}\n\n.bsc-bg-green-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(209, 250, 229, var(--tw-bg-opacity));\n}\n\n.bsc-bg-blue-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(219, 234, 254, var(--tw-bg-opacity));\n}\n\n.bsc-bg-blue-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(191, 219, 254, var(--tw-bg-opacity));\n}\n\n.hover\\:bsc-bg-gray-300:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));\n}\n\n.bsc-dark .dark\\:bsc-bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n\n.bsc-dark .dark\\:bsc-bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.bsc-dark .dark\\:bsc-bg-gray-900 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(17, 24, 39, var(--tw-bg-opacity));\n}\n\n.bsc-dark .dark\\:hover\\:bsc-bg-white:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.bsc-border-transparent {\n  border-color: transparent;\n}\n\n.bsc-border-black {\n  --tw-border-opacity: 1;\n  border-color: rgba(0, 0, 0, var(--tw-border-opacity));\n}\n\n.bsc-border-gray-300 {\n  --tw-border-opacity: 1;\n  border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n}\n\n.bsc-border-gray-400 {\n  --tw-border-opacity: 1;\n  border-color: rgba(156, 163, 175, var(--tw-border-opacity));\n}\n\n.bsc-border-gray-500 {\n  --tw-border-opacity: 1;\n  border-color: rgba(107, 114, 128, var(--tw-border-opacity));\n}\n\n.bsc-dark .dark\\:bsc-border-white {\n  --tw-border-opacity: 1;\n  border-color: rgba(255, 255, 255, var(--tw-border-opacity));\n}\n\n.bsc-rounded-md {\n  border-radius: 0.375rem;\n}\n\n.bsc-rounded-full {\n  border-radius: 9999px;\n}\n\n.bsc-border-solid {\n  border-style: solid;\n}\n\n.bsc-border-none {\n  border-style: none;\n}\n\n.bsc-border {\n  border-width: 1px;\n}\n\n.bsc-border-r {\n  border-right-width: 1px;\n}\n\n.bsc-cursor-pointer {\n  cursor: pointer;\n}\n\n.bsc-cursor-not-allowed {\n  cursor: not-allowed;\n}\n\n.bsc-flex {\n  display: flex;\n}\n\n.bsc-grid {\n  display: grid;\n}\n\n.bsc-flex-row {\n  flex-direction: row;\n}\n\n.bsc-flex-col {\n  flex-direction: column;\n}\n\n.bsc-justify-center {\n  justify-content: center;\n}\n\n.bsc-flex-grow {\n  flex-grow: 1;\n}\n\n.bsc-flex-shrink {\n  flex-shrink: 1;\n}\n\n.bsc-font-bold {\n  font-weight: 700;\n}\n\n.bsc-text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n\n.bsc-mr-2 {\n  margin-right: 0.5rem;\n}\n\n.bsc-ml-2 {\n  margin-left: 0.5rem;\n}\n\n.focus\\:bsc-outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n\n.bsc-overflow-hidden {\n  overflow: hidden;\n}\n\n.bsc-overflow-scroll {\n  overflow: scroll;\n}\n\n.bsc-overflow-x-auto {\n  overflow-x: auto;\n}\n\n.bsc-overflow-y-hidden {\n  overflow-y: hidden;\n}\n\n.bsc-p-2 {\n  padding: 0.5rem;\n}\n\n.bsc-p-4 {\n  padding: 1rem;\n}\n\n.bsc-py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.bsc-px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.bsc-pr-4 {\n  padding-right: 1rem;\n}\n\n.bsc-pl-4 {\n  padding-left: 1rem;\n}\n\n.bsc-pb-8 {\n  padding-bottom: 2rem;\n}\n\n.bsc-absolute {\n  position: absolute;\n}\n\n* {\n  --tw-shadow: 0 0 #0000;\n}\n\n.bsc-shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.bsc-shadow {\n  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n* {\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n}\n\n.bsc-text-left {\n  text-align: left;\n}\n\n.bsc-text-center {\n  text-align: center;\n}\n\n.bsc-text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgba(156, 163, 175, var(--tw-text-opacity));\n}\n\n.bsc-text-red-300 {\n  --tw-text-opacity: 1;\n  color: rgba(252, 165, 165, var(--tw-text-opacity));\n}\n\n.bsc-dark .dark\\:bsc-text-black {\n  --tw-text-opacity: 1;\n  color: rgba(0, 0, 0, var(--tw-text-opacity));\n}\n\n.bsc-dark .dark\\:bsc-text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.bsc-dark .dark\\:hover\\:bsc-text-black:hover {\n  --tw-text-opacity: 1;\n  color: rgba(0, 0, 0, var(--tw-text-opacity));\n}\n\n.bsc-whitespace-pre {\n  white-space: pre;\n}\n\n.bsc-w-24 {\n  width: 6rem;\n}\n\n.bsc-w-full {\n  width: 100%;\n}\n\n.bsc-gap-3 {\n  gap: 0.75rem;\n}\n\n.bsc-gap-4 {\n  gap: 1rem;\n}\n\n.bsc-grid-cols-4 {\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n\n.bsc-grid-cols-7 {\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n\n.bsc-col-span-4 {\n  grid-column: span 4 / span 4;\n}\n\n@-webkit-keyframes bsc-spin {\n  to {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n\n@keyframes bsc-spin {\n  to {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n\n@-webkit-keyframes bsc-ping {\n  75%, 100% {\n    -webkit-transform: scale(2);\n            transform: scale(2);\n    opacity: 0;\n  }\n}\n\n@keyframes bsc-ping {\n  75%, 100% {\n    -webkit-transform: scale(2);\n            transform: scale(2);\n    opacity: 0;\n  }\n}\n\n@-webkit-keyframes bsc-pulse {\n  50% {\n    opacity: .5;\n  }\n}\n\n@keyframes bsc-pulse {\n  50% {\n    opacity: .5;\n  }\n}\n\n@-webkit-keyframes bsc-bounce {\n  0%, 100% {\n    -webkit-transform: translateY(-25%);\n            transform: translateY(-25%);\n    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\n            animation-timing-function: cubic-bezier(0.8,0,1,1);\n  }\n\n  50% {\n    -webkit-transform: none;\n            transform: none;\n    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\n            animation-timing-function: cubic-bezier(0,0,0.2,1);\n  }\n}\n\n@keyframes bsc-bounce {\n  0%, 100% {\n    -webkit-transform: translateY(-25%);\n            transform: translateY(-25%);\n    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\n            animation-timing-function: cubic-bezier(0.8,0,1,1);\n  }\n\n  50% {\n    -webkit-transform: none;\n            transform: none;\n    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\n            animation-timing-function: cubic-bezier(0,0,0.2,1);\n  }\n}\n\nbody {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n\n@media (min-width: 640px) {\n}\n\n@media (min-width: 768px) {\n}\n\n@media (min-width: 1024px) {\n}\n\n@media (min-width: 1280px) {\n}\n\n@media (min-width: 1536px) {\n}\n";
 styleInject(css_248z);
 
 /*!