beesoft-components 0.2.7 → 0.2.8

package/build/index.js

@@ -2751,20 +2751,21 @@ var formatDistanceLocale = {
     other: 'almost {{count}} years'
   }
 };
-function formatDistance(token, count, options) {
-  options = options || {};
+
+var formatDistance = function (token, count, options) {
   var result;
+  var tokenValue = formatDistanceLocale[token];
 
-  if (typeof formatDistanceLocale[token] === 'string') {
-    result = formatDistanceLocale[token];
+  if (typeof tokenValue === 'string') {
+    result = tokenValue;
   } else if (count === 1) {
-    result = formatDistanceLocale[token].one;
+    result = tokenValue.one;
   } else {
-    result = formatDistanceLocale[token].other.replace('{{count}}', count);
+    result = tokenValue.other.replace('{{count}}', count.toString());
   }
 
-  if (options.addSuffix) {
-    if (options.comparison > 0) {
+  if (options !== null && options !== void 0 && options.addSuffix) {
+    if (options.comparison && options.comparison > 0) {
       return 'in ' + result;
     } else {
       return result + ' ago';
@@ -2772,11 +2773,12 @@ function formatDistance(token, count, options) {
   }
 
   return result;
-}
+};
 
 function buildFormatLongFn(args) {
-  return function (dirtyOptions) {
-    var options = dirtyOptions || {};
+  return function () {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    // TODO: Remove String()
     var width = options.width ? String(options.width) : args.defaultWidth;
     var format = args.formats[width] || args.formats[args.defaultWidth];
     return format;
@@ -2824,9 +2826,10 @@ var formatRelativeLocale = {
   nextWeek: "eeee 'at' p",
   other: 'P'
 };
-function formatRelative(token, _date, _baseDate, _options) {
+
+var formatRelative = function (token, _date, _baseDate, _options) {
   return formatRelativeLocale[token];
-}
+};
 
 function buildLocalizeFn(args) {
   return function (dirtyIndex, dirtyOptions) {
@@ -2846,7 +2849,8 @@ function buildLocalizeFn(args) {
       valuesArray = args.values[_width] || args.values[_defaultWidth];
     }
 
-    var index = args.argumentCallback ? args.argumentCallback(dirtyIndex) : dirtyIndex;
+    var index = args.argumentCallback ? args.argumentCallback(dirtyIndex) : dirtyIndex; // @ts-ignore: For some reason TypeScript just don't want to match it, no matter how hard we try. I challange you to try to remove it!
+
     return valuesArray[index];
   };
 }
@@ -2859,12 +2863,12 @@ var eraValues = {
 var quarterValues = {
   narrow: ['1', '2', '3', '4'],
   abbreviated: ['Q1', 'Q2', 'Q3', 'Q4'],
-  wide: ['1st quarter', '2nd quarter', '3rd quarter', '4th quarter'] // Note: in English, the names of days of the week and months are capitalized.
-  // If you are making a new locale based on this one, check if the same is true for the language you're working on.
-  // Generally, formatted dates should look like they are in the middle of a sentence,
-  // e.g. in Spanish language the weekdays and months should be in the lowercase.
+  wide: ['1st quarter', '2nd quarter', '3rd quarter', '4th quarter']
+}; // Note: in English, the names of days of the week and months are capitalized.
+// If you are making a new locale based on this one, check if the same is true for the language you're working on.
+// Generally, formatted dates should look like they are in the middle of a sentence,
+// e.g. in Spanish language the weekdays and months should be in the lowercase.
 
-};
 var monthValues = {
   narrow: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
   abbreviated: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
@@ -2941,16 +2945,13 @@ var formattingDayPeriodValues = {
   }
 };
 
-function ordinalNumber(dirtyNumber, _dirtyOptions) {
+var ordinalNumber = function (dirtyNumber, _options) {
   var number = Number(dirtyNumber); // If ordinal numbers depend on context, for example,
   // if they are different for different grammatical genders,
-  // use `options.unit`:
+  // use `options.unit`.
   //
-  //   var options = dirtyOptions || {}
-  //   var unit = String(options.unit)
-  //
-  // where `unit` can be 'year', 'quarter', 'month', 'week', 'date', 'dayOfYear',
-  // 'day', 'hour', 'minute', 'second'
+  // `unit` can be 'year', 'quarter', 'month', 'week', 'date', 'dayOfYear',
+  // 'day', 'hour', 'minute', 'second'.
 
   var rem100 = number % 100;
 
@@ -2968,7 +2969,7 @@ function ordinalNumber(dirtyNumber, _dirtyOptions) {
   }
 
   return number + 'th';
-}
+};
 
 var localize = {
   ordinalNumber: ordinalNumber,
@@ -2980,7 +2981,7 @@ var localize = {
     values: quarterValues,
     defaultWidth: 'wide',
     argumentCallback: function (quarter) {
-      return Number(quarter) - 1;
+      return quarter - 1;
     }
   }),
   month: buildLocalizeFn({
@@ -2999,36 +3000,9 @@ var localize = {
   })
 };
 
-function buildMatchPatternFn(args) {
-  return function (dirtyString, dirtyOptions) {
-    var string = String(dirtyString);
-    var options = dirtyOptions || {};
-    var matchResult = string.match(args.matchPattern);
-
-    if (!matchResult) {
-      return null;
-    }
-
-    var matchedString = matchResult[0];
-    var parseResult = string.match(args.parsePattern);
-
-    if (!parseResult) {
-      return null;
-    }
-
-    var value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
-    value = options.valueCallback ? options.valueCallback(value) : value;
-    return {
-      value: value,
-      rest: string.slice(matchedString.length)
-    };
-  };
-}
-
 function buildMatchFn(args) {
-  return function (dirtyString, dirtyOptions) {
-    var string = String(dirtyString);
-    var options = dirtyOptions || {};
+  return function (string) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var width = options.width;
     var matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth];
     var matchResult = string.match(matchPattern);
@@ -3039,23 +3013,18 @@ function buildMatchFn(args) {
 
     var matchedString = matchResult[0];
     var parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
+    var key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, function (pattern) {
+      return pattern.test(matchedString);
+    }) : findKey(parsePatterns, function (pattern) {
+      return pattern.test(matchedString);
+    });
     var value;
-
-    if (Object.prototype.toString.call(parsePatterns) === '[object Array]') {
-      value = findIndex(parsePatterns, function (pattern) {
-        return pattern.test(matchedString);
-      });
-    } else {
-      value = findKey(parsePatterns, function (pattern) {
-        return pattern.test(matchedString);
-      });
-    }
-
-    value = args.valueCallback ? args.valueCallback(value) : value;
+    value = args.valueCallback ? args.valueCallback(key) : key;
     value = options.valueCallback ? options.valueCallback(value) : value;
+    var rest = string.slice(matchedString.length);
     return {
       value: value,
-      rest: string.slice(matchedString.length)
+      rest: rest
     };
   };
 }
@@ -3066,6 +3035,8 @@ function findKey(object, predicate) {
       return key;
     }
   }
+
+  return undefined;
 }
 
 function findIndex(array, predicate) {
@@ -3074,6 +3045,26 @@ function findIndex(array, predicate) {
       return key;
     }
   }
+
+  return undefined;
+}
+
+function buildMatchPatternFn(args) {
+  return function (string) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var matchResult = string.match(args.matchPattern);
+    if (!matchResult) return null;
+    var matchedString = matchResult[0];
+    var parseResult = string.match(args.parsePattern);
+    if (!parseResult) return null;
+    var value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
+    value = options.valueCallback ? options.valueCallback(value) : value;
+    var rest = string.slice(matchedString.length);
+    return {
+      value: value,
+      rest: rest
+    };
+  };
 }
 
 var matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i;
@@ -3181,7 +3172,6 @@ var match = {
  * @author Sasha Koss [@kossnocorp]{@link https://github.com/kossnocorp}
  * @author Lesha Koss [@leshakoss]{@link https://github.com/leshakoss}
  */
-
 var locale = {
   code: 'en-US',
   formatDistance: formatDistance,
@@ -3336,7 +3326,7 @@ function assign(target, dirtyObject) {
   dirtyObject = dirtyObject || {};
 
   for (var property in dirtyObject) {
-    if (dirtyObject.hasOwnProperty(property)) {
+    if (Object.prototype.hasOwnProperty.call(dirtyObject, property)) {
       target[property] = dirtyObject[property];
     }
   }
@@ -5304,28 +5294,28 @@ var unescapedLatinCharacterRegExp = /[a-zA-Z]/;
  * | Day of week (formatting)        |  90 | E..EEE  | Mon, Tue, Wed, ..., Sun           |       |
  * |                                 |     | EEEE    | Monday, Tuesday, ..., Sunday      | 2     |
  * |                                 |     | EEEEE   | M, T, W, T, F, S, S               |       |
- * |                                 |     | EEEEEE  | Mo, Tu, We, Th, Fr, Su, Sa        |       |
+ * |                                 |     | EEEEEE  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
  * | ISO day of week (formatting)    |  90 | i       | 1, 2, 3, ..., 7                   | 5     |
  * |                                 |     | io      | 1st, 2nd, ..., 7th                | 5     |
  * |                                 |     | ii      | 01, 02, ..., 07                   | 5     |
  * |                                 |     | iii     | Mon, Tue, Wed, ..., Sun           | 5     |
  * |                                 |     | iiii    | Monday, Tuesday, ..., Sunday      | 2,5   |
  * |                                 |     | iiiii   | M, T, W, T, F, S, S               | 5     |
- * |                                 |     | iiiiii  | Mo, Tu, We, Th, Fr, Su, Sa        | 5     |
+ * |                                 |     | iiiiii  | Mo, Tu, We, Th, Fr, Sa, Su        | 5     |
  * | Local day of week (formatting)  |  90 | e       | 2, 3, 4, ..., 1                   |       |
  * |                                 |     | eo      | 2nd, 3rd, ..., 1st                | 5     |
  * |                                 |     | ee      | 02, 03, ..., 01                   |       |
  * |                                 |     | eee     | Mon, Tue, Wed, ..., Sun           |       |
  * |                                 |     | eeee    | Monday, Tuesday, ..., Sunday      | 2     |
  * |                                 |     | eeeee   | M, T, W, T, F, S, S               |       |
- * |                                 |     | eeeeee  | Mo, Tu, We, Th, Fr, Su, Sa        |       |
+ * |                                 |     | eeeeee  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
  * | Local day of week (stand-alone) |  90 | c       | 2, 3, 4, ..., 1                   |       |
  * |                                 |     | co      | 2nd, 3rd, ..., 1st                | 5     |
  * |                                 |     | cc      | 02, 03, ..., 01                   |       |
  * |                                 |     | ccc     | Mon, Tue, Wed, ..., Sun           |       |
  * |                                 |     | cccc    | Monday, Tuesday, ..., Sunday      | 2     |
  * |                                 |     | ccccc   | M, T, W, T, F, S, S               |       |
- * |                                 |     | cccccc  | Mo, Tu, We, Th, Fr, Su, Sa        |       |
+ * |                                 |     | cccccc  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
  * | AM, PM                          |  80 | a..aaa  | AM, PM                            |       |
  * |                                 |     | aaaa    | a.m., p.m.                        | 2     |
  * |                                 |     | aaaaa   | a, p                              |       |
@@ -5564,9 +5554,9 @@ function parse(dirtyDateString, dirtyFormatString, dirtyReferenceDate, dirtyOpti
   var subFnOptions = {
     firstWeekContainsDate: firstWeekContainsDate,
     weekStartsOn: weekStartsOn,
-    locale: locale$1 // If timezone isn't specified, it will be set to the system timezone
+    locale: locale$1
+  }; // If timezone isn't specified, it will be set to the system timezone
 
-  };
   var setters = [{
     priority: TIMEZONE_UNIT_PRIORITY,
     subPriority: -1,
@@ -6939,7 +6929,7 @@ function OverlayPanel(_a) {
         }
         return (jsx(BeeSoftTransition, __assign({ start: visibility, timeout: transitionDuration, showTransitionOptions: showTransitionOptions, hideTransitionOptions: hideTransitionOptions, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExited: onExited }, { children: function (_a) {
                 var state = _a.state, defaultStyle = _a.defaultStyle, transitionStyles = _a.transitionStyles;
-                return (jsx("div", __assign({ className: "bsc-absolute bsc-bg-white dark:bsc-bg-gray-900 bsc-border bsc-border-solid dark:bsc-text-white dark:bsc-border-white bsc-shadow", style: __assign(__assign(__assign({}, baseStyles), defaultStyle), transitionStyles[state]), ref: function (element) { return element && onMarkupCreated(element); } }, { children: children }), void 0));
+                return (jsx("div", __assign({ className: "absolute bg-white dark:bg-gray-900 border border-solid dark:text-white dark:border-white shadow", style: __assign(__assign(__assign({}, baseStyles), defaultStyle), transitionStyles[state]), ref: function (element) { return element && onMarkupCreated(element); } }, { children: children }), void 0));
             } }), void 0));
     };
     return ReactDOM.createPortal(createElement(), appendTo);
@@ -7546,11 +7536,11 @@ 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 leftElementClasses = classnames('bsc-flex-shrink', { 'bsc-mr-2': leftElement }, leftElementClassName);
-    var rightElementClasses = classnames('bsc-flex-shrink', { 'bsc-ml-2': rightElement }, rightElementClassName);
+    var classNames = classnames({ 'w-full ': fillContainer }, 'flex flex-row shadow-sm border border-solid border-gray-300 dark:border-white dark:bg-gray-900 dark:text-white rounded-md p-2', className);
+    var leftElementClasses = classnames('flex-shrink', { 'mr-2': leftElement }, leftElementClassName);
+    var rightElementClasses = classnames('flex-shrink', { '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),
-            jsx("div", __assign({ ref: inputRef, className: "bsc-flex-grow focus:bsc-outline-none", contentEditable: !readOnly, suppressContentEditableWarning: true, onFocus: onFocused, onInput: onInputChanged }, { children: value }), void 0),
+            jsx("div", __assign({ ref: inputRef, className: "flex-grow focus:outline-none", contentEditable: !readOnly, suppressContentEditableWarning: true, onFocus: onFocused, onInput: onInputChanged }, { children: value }), void 0),
             jsx("div", __assign({ className: rightElementClasses, onClick: onRightElementClicked }, { children: rightElement }), void 0)] }), void 0));
 }
 var ContentEditableInput$1 = forwardRef(ContentEditableInput);
@@ -7653,32 +7643,6 @@ function subMonths(dirtyDate, dirtyAmount) {
   return addMonths(dirtyDate, -amount);
 }
 
-function useKeyDown(keyCode) {
-    var _a = useState(false), keyDown = _a[0], setKeyDown = _a[1];
-    var keyCodes = typeof keyCode === 'string' ? [keyCode] : keyCode;
-    var downHandler = function (_a) {
-        var key = _a.key;
-        if (keyCodes.includes(key)) {
-            setKeyDown(true);
-        }
-    };
-    var upHandler = function (_a) {
-        var key = _a.key;
-        if (keyCodes.includes(key)) {
-            setKeyDown(false);
-        }
-    };
-    useEffect(function () {
-        window.addEventListener('keydown', downHandler);
-        window.addEventListener('keyup', upHandler);
-        return function () {
-            window.removeEventListener('keydown', downHandler);
-            window.removeEventListener('keyup', upHandler);
-        };
-    }, []);
-    return keyDown;
-}
-
 /**
  * @name addDays
  * @category Day Helpers
@@ -7720,6 +7684,36 @@ function addDays(dirtyDate, dirtyAmount) {
   return date;
 }
 
+/**
+ * @name startOfDay
+ * @category Day Helpers
+ * @summary Return the start of a day for the given date.
+ *
+ * @description
+ * Return the start of a day 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 start of a day
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // The start of a day for 2 September 2014 11:55:00:
+ * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 02 2014 00:00:00
+ */
+
+function startOfDay(dirtyDate) {
+  requiredArgs(1, arguments);
+  var date = toDate(dirtyDate);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+
 /**
  * @name addYears
  * @category Year Helpers
@@ -7749,6 +7743,36 @@ function addYears(dirtyDate, dirtyAmount) {
   return addMonths(dirtyDate, amount * 12);
 }
 
+/**
+ * @name isSameDay
+ * @category Day Helpers
+ * @summary Are the given dates in the same day?
+ *
+ * @description
+ * Are the given dates in the same day?
+ *
+ * ### 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} dateLeft - the first date to check
+ * @param {Date|Number} dateRight - the second date to check
+ * @returns {Boolean} the dates are in the same day
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?
+ * var result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))
+ * //=> true
+ */
+
+function isSameDay(dirtyDateLeft, dirtyDateRight) {
+  requiredArgs(2, arguments);
+  var dateLeftStartOfDay = startOfDay(dirtyDateLeft);
+  var dateRightStartOfDay = startOfDay(dirtyDateRight);
+  return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();
+}
+
 /**
  * @name eachDayOfInterval
  * @category Interval Helpers
@@ -7884,7 +7908,7 @@ function startOfMonth(dirtyDate) {
  *
  * @example
  * // Each year between 6 February 2014 and 10 August 2017:
- * var result = eachYearOfInterval({
+ * const result = eachYearOfInterval({
  *   start: new Date(2014, 1, 6),
  *   end: new Date(2017, 7, 10)
  * })
@@ -8043,7 +8067,37 @@ function subDays(dirtyDate, dirtyAmount) {
   return addDays(dirtyDate, -amount);
 }
 
-var baseMap = [7, 6, 5, 4, 3, 2, 1];
+/**
+ * @name isToday
+ * @category Day Helpers
+ * @summary Is the given date today?
+ * @pure false
+ *
+ * @description
+ * Is the given date today?
+ *
+ * > ⚠️ Please note that this function is not present in the FP submodule as
+ * > it uses `Date.now()` internally hence impure and can't be safely curried.
+ *
+ * ### 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 to check
+ * @returns {Boolean} the date is today
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // If today is 6 October 2014, is 6 October 14:00:00 today?
+ * var result = isToday(new Date(2014, 9, 6, 14, 0))
+ * //=> true
+ */
+
+function isToday(dirtyDate) {
+  requiredArgs(1, arguments);
+  return isSameDay(dirtyDate, Date.now());
+}
+
 /**
  * @name nextDay
  * @category Weekday Helpers
@@ -8070,18 +8124,9 @@ var baseMap = [7, 6, 5, 4, 3, 2, 1];
 
 function nextDay(date, day) {
   requiredArgs(2, arguments);
-  var map = genMap(day);
-  return addDays(toDate(date), map[getDay(toDate(date))]);
-}
-
-function genMap(daysToMove) {
-  if (daysToMove === 0) {
-    return baseMap;
-  } else {
-    var mapStart = baseMap.slice(-daysToMove);
-    var mapEnd = baseMap.slice(0, baseMap.length - daysToMove);
-    return mapStart.concat(mapEnd);
-  }
+  var delta = day - getDay(date);
+  if (delta <= 0) delta += 7;
+  return addDays(date, delta);
 }
 
 /**
@@ -8188,6 +8233,32 @@ function subYears(dirtyDate, dirtyAmount) {
   return addYears(dirtyDate, -amount);
 }
 
+function useKeyDown(keyCode) {
+    var _a = useState(false), keyDown = _a[0], setKeyDown = _a[1];
+    var keyCodes = typeof keyCode === 'string' ? [keyCode] : keyCode;
+    var downHandler = function (_a) {
+        var key = _a.key;
+        if (keyCodes.includes(key)) {
+            setKeyDown(true);
+        }
+    };
+    var upHandler = function (_a) {
+        var key = _a.key;
+        if (keyCodes.includes(key)) {
+            setKeyDown(false);
+        }
+    };
+    useEffect(function () {
+        window.addEventListener('keydown', downHandler);
+        window.addEventListener('keyup', upHandler);
+        return function () {
+            window.removeEventListener('keydown', downHandler);
+            window.removeEventListener('keyup', upHandler);
+        };
+    }, []);
+    return keyDown;
+}
+
 function getMonthMatrix(matrixDate, locale, loadOtherMonths) {
     var _a, _b;
     if (loadOtherMonths === void 0) { loadOtherMonths = true; }
@@ -8327,6 +8398,14 @@ function loadLocale(localeToLoad) {
             .catch(function (error) { return reject(error); });
     });
 }
+function createDefaultColors() {
+    return {
+        inputBgColor: 'bg-white',
+        readOnlyInputBgColor: 'bg-gray-200',
+        selectedDateColor: 'bg-blue-100',
+        todayDateColor: 'bg-green-100',
+    };
+}
 
 var DateSelectionType;
 (function (DateSelectionType) {
@@ -8357,6 +8436,7 @@ var CalendarIconPosition;
 (function (CalendarIconPosition) {
     CalendarIconPosition[CalendarIconPosition["Right"] = 0] = "Right";
     CalendarIconPosition[CalendarIconPosition["Left"] = 1] = "Left";
+    CalendarIconPosition[CalendarIconPosition["None"] = 2] = "None";
 })(CalendarIconPosition || (CalendarIconPosition = {}));
 
 var DateTimeActionType;
@@ -8523,29 +8603,32 @@ function DateTimeCalendar(_a) {
         isSelectedDate: isSelectedDate,
         isInSelectedDateRange: isInSelectedDateRange,
     };
-    var defaultTemplate = function (props, children) { return (jsx("div", __assign({ className: "bsc-w-full bc-dt-calendar" }, { children: children }), void 0)); };
+    var defaultTemplate = function (props, children) { return (jsx("div", __assign({ className: "w-full bc-dt-calendar" }, { children: children }), void 0)); };
     var template = viewTemplate || defaultTemplate;
-    return (jsx(TemplateOutlet, __assign({ props: templateProps, template: template }, { children: jsxs("div", __assign({ className: "bsc-grid bsc-grid-cols-7 bsc-gap-3 bc-dt-day-row" }, { children: [(_b = weekDaysRef.current) === null || _b === void 0 ? void 0 : _b.map(function (day, index) { return (jsx("div", __assign({ className: "bsc-text-center bsc-font-bold bc-dt-day-cell" }, { children: day }), index)); }),
+    return (jsx(TemplateOutlet, __assign({ props: templateProps, template: template }, { children: jsxs("div", __assign({ className: "grid grid-cols-7 gap-3 bc-dt-day-row" }, { children: [(_b = weekDaysRef.current) === null || _b === void 0 ? void 0 : _b.map(function (day, index) { return (jsx("div", __assign({ className: "text-center font-bold bc-dt-day-cell" }, { children: day }), index)); }),
                 monthMatrix === null || monthMatrix === void 0 ? void 0 : monthMatrix.map(function (row, rIndex) {
                     return row.map(function (column, cIndex) {
-                        var _a, _b;
+                        var _a;
+                        var _b, _c;
                         var isSelectable = column.dayValue !== null && (selectableDate === undefined || selectableDate(column.dayValue));
-                        var dayStyles = classnames('bsc-text-center bsc-py-1', {
-                            'bsc-text-gray-400': !column.isCurrent,
-                            'bsc-bg-blue-100 dark:bsc-bg-white dark:bsc-text-black bsc-rounded-full': column &&
+                        var dayStyles = classnames('text-center py-1', (_a = {
+                                'text-gray-400': !column.isCurrent
+                            },
+                            _a[(context.colors.selectedDateColor || 'bg-blue-100') + " dark:bg-white dark:text-black rounded-full"] = column &&
                                 column.dayValue &&
                                 ((selectedDateRef.current && isSelectedDate(column.dayValue)) ||
                                     (selectedStartComparison && selectedEndComparison && isInSelectedDateRange(column.dayValue))),
-                            'bsc-cursor-pointer': isSelectable,
-                            'bsc-text-red-300 bsc-cursor-not-allowed': !isSelectable,
-                        }, 'bc-dt-date-cell');
+                            _a['cursor-pointer'] = isSelectable,
+                            _a['text-red-300 cursor-not-allowed'] = !isSelectable,
+                            _a[(context.colors.todayDateColor || 'bg-green-100') + " dark:text-black rounded-full"] = column.dayValue && isToday(column.dayValue) && !isSelectedDate(column.dayValue),
+                            _a), 'bc-dt-date-cell');
                         return (jsx("div", __assign({ className: dayStyles, onClick: function () {
                                 return column &&
                                     column.dayValue &&
                                     isSelectable &&
                                     (isValidDate === undefined || isValidDate(column.dayValue)) &&
                                     onDateClicked(column.dayValue);
-                            } }, { children: (_a = column.dayValue) === null || _a === void 0 ? void 0 : _a.getDate().toLocaleString((_b = loadedLocale.current) === null || _b === void 0 ? void 0 : _b.code) }), rIndex.toString() + cIndex.toString()));
+                            } }, { children: (_b = column.dayValue) === null || _b === void 0 ? void 0 : _b.getDate().toLocaleString((_c = loadedLocale.current) === null || _c === void 0 ? void 0 : _c.code) }), rIndex.toString() + cIndex.toString()));
                     });
                 })] }), void 0) }), void 0));
 }
@@ -8561,11 +8644,11 @@ function DateTimeScroller(_a) {
         onMovePrevious: onMovePrevious,
         onMoveNext: onMoveNext,
     };
-    var defaultTemplate = function (props, children) { return (jsx("div", __assign({ className: "bsc-w-full bsc-flex bsc-flex-row bsc-py-1 bsc-px-2 bc-dt-scroller" }, { children: children }), void 0)); };
+    var defaultTemplate = function (props, children) { return (jsx("div", __assign({ className: "w-full flex flex-row py-1 px-2 bc-dt-scroller" }, { children: children }), void 0)); };
     var template = viewTemplate || defaultTemplate;
-    return (jsxs(TemplateOutlet, __assign({ props: templateProps, template: template }, { children: [jsx("div", __assign({ className: "bsc-flex-shrink bsc-cursor-pointer bc-dt-scroller-left" }, { children: jsx("button", __assign({ className: "focus:bsc-outline-none", onClick: onMovePrevious }, { children: jsx(FontAwesomeIcon, { icon: ['fas', 'angle-left'] }, void 0) }), void 0) }), void 0),
-            jsx("div", __assign({ className: "bsc-flex-grow bsc-text-center bsc-cursor-pointer bc-dt-scroller-title", onClick: onTitleClicked }, { children: title }), void 0),
-            jsx("div", __assign({ className: "bsc-flex-shrink bsc-cursor-pointer bc-dt-scroller-right" }, { children: jsx("button", __assign({ className: "focus:bsc-outline-none", onClick: onMoveNext }, { children: jsx(FontAwesomeIcon, { icon: ['fas', 'angle-right'] }, void 0) }), void 0) }), void 0)] }), void 0));
+    return (jsxs(TemplateOutlet, __assign({ props: templateProps, template: template }, { children: [jsx("div", __assign({ className: "flex-shrink cursor-pointer bc-dt-scroller-left" }, { children: jsx("button", __assign({ className: "focus:outline-none", onClick: onMovePrevious }, { children: jsx(FontAwesomeIcon, { icon: ['fas', 'angle-left'] }, void 0) }), void 0) }), void 0),
+            jsx("div", __assign({ className: "flex-grow text-center cursor-pointer bc-dt-scroller-title", onClick: onTitleClicked }, { children: title }), void 0),
+            jsx("div", __assign({ className: "flex-shrink cursor-pointer bc-dt-scroller-right" }, { children: jsx("button", __assign({ className: "focus:outline-none", onClick: onMoveNext }, { children: jsx(FontAwesomeIcon, { icon: ['fas', 'angle-right'] }, void 0) }), void 0) }), void 0)] }), void 0));
 }
 
 function DateTimeDaySelector(_a) {
@@ -8605,9 +8688,9 @@ function DateTimeDaySelector(_a) {
         }
         return '';
     };
-    return (jsxs("div", __assign({ className: "bsc-p-2 bc-dt-day-selector" }, { children: [jsx(DateTimeScroller, { title: getCurrentMonthYear(), scrollerType: DateScrollerType.Day, onTitleClicked: onMonthClicked, onMovePrevious: movePreviousMonth, onMoveNext: moveNextMonth }, void 0),
+    return (jsxs("div", __assign({ className: "p-2 bc-dt-day-selector" }, { children: [jsx(DateTimeScroller, { title: getCurrentMonthYear(), scrollerType: DateScrollerType.Day, onTitleClicked: onMonthClicked, onMovePrevious: movePreviousMonth, onMoveNext: moveNextMonth }, void 0),
             jsx(DateTimeCalendar, { viewDate: viewDate, selectedDate: selectedDate, locale: locale, selectableDate: selectableDate, isValidDate: isValidDate, dispatcher: dispatcher }, void 0),
-            showTimeSelector && (jsx("div", __assign({ className: "bsc-w-full bsc-flex bsc-flex-row bsc-p-2 bsc-justify-center bc-dt-time-value-wrapper" }, { children: jsx("div", __assign({ className: "bsc-p-2 bsc-cursor-pointer hover:bsc-bg-gray-300 dark:hover:bsc-bg-white dark:hover:bsc-text-black dark:bsc-text-white bc-dt-time-value", onClick: onTimeClicked }, { children: (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toLocaleTimeString(locale.code)) || getDefaultTime(locale) }), void 0) }), void 0))] }), void 0));
+            showTimeSelector && (jsx("div", __assign({ className: "w-full flex flex-row p-2 justify-center bc-dt-time-value-wrapper" }, { children: jsx("div", __assign({ className: "p-2 cursor-pointer hover:bg-gray-300 dark:hover:bg-white dark:hover:text-black dark:text-white bc-dt-time-value", onClick: onTimeClicked }, { children: (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toLocaleTimeString(locale.code)) || getDefaultTime(locale) }), void 0) }), void 0))] }), void 0));
 }
 
 function DateTimeMonthSelector(_a) {
@@ -8643,9 +8726,9 @@ function DateTimeMonthSelector(_a) {
             type: DateTimeActionType.YearSelector,
         });
     };
-    return (jsxs("div", __assign({ className: "bsc-p-2 bc-dt-month-selector", style: { minWidth: '20rem' } }, { children: [jsx(DateTimeScroller, { title: getCurrentYear(), scrollerType: DateScrollerType.Month, onTitleClicked: onYearClicked, onMovePrevious: movePreviousYear, onMoveNext: moveNextYear }, void 0),
-            jsx("div", __assign({ className: "bsc-w-full bsc-grid bsc-grid-cols-4 bsc-gap-4 bc-dt-month-grid" }, { children: monthMatrix.current.map(function (row, rIndex) {
-                    return row.map(function (column, cIndex) { return (jsx("div", __assign({ className: "bsc-text-center bsc-cursor-pointer bc-dt-month-cell", onClick: function () { return onMonthClicked(column.monthNumber); } }, { children: column.monthName }), rIndex.toString() + cIndex.toString())); });
+    return (jsxs("div", __assign({ className: "p-2 bc-dt-month-selector", style: { minWidth: '20rem' } }, { children: [jsx(DateTimeScroller, { title: getCurrentYear(), scrollerType: DateScrollerType.Month, onTitleClicked: onYearClicked, onMovePrevious: movePreviousYear, onMoveNext: moveNextYear }, void 0),
+            jsx("div", __assign({ className: "w-full grid grid-cols-4 gap-4 bc-dt-month-grid" }, { children: monthMatrix.current.map(function (row, rIndex) {
+                    return row.map(function (column, cIndex) { return (jsx("div", __assign({ className: "text-center cursor-pointer bc-dt-month-cell", onClick: function () { return onMonthClicked(column.monthNumber); } }, { children: column.monthName }), rIndex.toString() + cIndex.toString())); });
                 }) }), void 0)] }), void 0));
 }
 
@@ -8688,9 +8771,9 @@ function DateTimeRangeSelector(_a) {
             });
         }
     };
-    return (jsxs("div", __assign({ className: "bsc-flex bsc-flex-col bc-dt-range-selector" }, { children: [jsx("div", __assign({ className: "bsc-flex-shrink bc-dt-range-scroller-wrapper" }, { children: jsx(DateTimeScroller, { title: getSelectorTitle(), scrollerType: DateScrollerType.Range, onMovePrevious: movePreviousMonth, onMoveNext: moveNextMonth }, void 0) }), void 0),
-            jsx("div", __assign({ className: "bsc-flex-grow" }, { children: jsxs("div", __assign({ className: "bsc-flex bsc-flex-row bsc-py-1 bsc-px-2 bc-dt-range-wrapper" }, { children: [jsx("div", __assign({ className: "bsc-border-r bsc-border-solid bsc-border-gray-400 bsc-pr-4 bc-dt-range-calendar-1" }, { children: jsx(DateTimeCalendar, { viewDate: viewDate, selectedStartDate: selectedStartDate, selectedEndDate: selectedEndDate, selectionMode: CalendarSelectionMode.Range, onDateSelected: onDateSelected, locale: locale, dispatcher: dispatcher }, void 0) }), void 0),
-                        jsx("div", __assign({ className: "bsc-pl-4 bc-dt-range-calendar-2" }, { children: jsx(DateTimeCalendar, { viewDate: nextMonth, selectedStartDate: selectedStartDate, selectedEndDate: selectedEndDate, selectionMode: CalendarSelectionMode.Range, onDateSelected: onDateSelected, locale: locale, dispatcher: dispatcher }, void 0) }), void 0)] }), void 0) }), void 0)] }), void 0));
+    return (jsxs("div", __assign({ className: "flex flex-col bc-dt-range-selector" }, { children: [jsx("div", __assign({ className: "flex-shrink bc-dt-range-scroller-wrapper" }, { children: jsx(DateTimeScroller, { title: getSelectorTitle(), scrollerType: DateScrollerType.Range, onMovePrevious: movePreviousMonth, onMoveNext: moveNextMonth }, void 0) }), void 0),
+            jsx("div", __assign({ className: "flex-grow" }, { children: jsxs("div", __assign({ className: "flex flex-row py-1 px-2 bc-dt-range-wrapper" }, { children: [jsx("div", __assign({ className: "border-r border-solid border-gray-400 pr-4 bc-dt-range-calendar-1" }, { children: jsx(DateTimeCalendar, { viewDate: viewDate, selectedStartDate: selectedStartDate, selectedEndDate: selectedEndDate, selectionMode: CalendarSelectionMode.Range, onDateSelected: onDateSelected, locale: locale, dispatcher: dispatcher }, void 0) }), void 0),
+                        jsx("div", __assign({ className: "pl-4 bc-dt-range-calendar-2" }, { children: jsx(DateTimeCalendar, { viewDate: nextMonth, selectedStartDate: selectedStartDate, selectedEndDate: selectedEndDate, selectionMode: CalendarSelectionMode.Range, onDateSelected: onDateSelected, locale: locale, dispatcher: dispatcher }, void 0) }), void 0)] }), void 0) }), void 0)] }), void 0));
 }
 
 function DateTimeTimeSelector(_a) {
@@ -8757,19 +8840,19 @@ function DateTimeTimeSelector(_a) {
             type: DateTimeActionType.DaySelector,
         });
     };
-    return (jsx("div", __assign({ className: "bsc-flex bsc-flex-row bsc-justify-center bsc-p-2 bc-dt-time-selector", style: { minWidth: '15rem' } }, { children: jsxs("div", __assign({ className: "bsc-w-full bsc-grid bsc-grid-cols-4 bsc-gap-4 bc-dt-time-grid" }, { children: [showDateSelector && (jsx("div", __assign({ className: "bsc-text-center bsc-cursor-pointer hover:bsc-bg-gray-300 dark:bsc-text-white dark:hover:bsc-bg-white dark:hover:bsc-text-black bsc-col-span-4 bc-dt-time-date-value", onClick: onDateClicked }, { children: dateString.current }), void 0)),
-                jsx("div", __assign({ className: "bsc-text-center bsc-cursor-pointer bc-dt-time-hour-increase" }, { children: jsx("button", __assign({ className: "focus:bsc-outline-none", onClick: increaseHour }, { children: jsx(FontAwesomeIcon, { icon: ['fas', 'chevron-up'] }, void 0) }), void 0) }), void 0),
+    return (jsx("div", __assign({ className: "flex flex-row justify-center p-2 bc-dt-time-selector", style: { minWidth: '15rem' } }, { children: jsxs("div", __assign({ className: "w-full grid grid-cols-4 gap-4 bc-dt-time-grid" }, { children: [showDateSelector && (jsx("div", __assign({ className: "text-center cursor-pointer hover:bg-gray-300 dark:text-white dark:hover:bg-white dark:hover:text-black col-span-4 bc-dt-time-date-value", onClick: onDateClicked }, { children: dateString.current }), void 0)),
+                jsx("div", __assign({ className: "text-center cursor-pointer bc-dt-time-hour-increase" }, { children: jsx("button", __assign({ className: "focus:outline-none", onClick: increaseHour }, { children: jsx(FontAwesomeIcon, { icon: ['fas', 'chevron-up'] }, void 0) }), void 0) }), void 0),
                 jsx("div", { children: "\u00A0" }, void 0),
-                jsx("div", __assign({ className: "bsc-text-center bsc-cursor-pointer bc-dt-time-minute-increase" }, { children: jsx("button", __assign({ className: "focus:bsc-outline-none", onClick: increaseMinute }, { children: jsx(FontAwesomeIcon, { icon: ['fas', 'chevron-up'] }, void 0) }), void 0) }), void 0),
-                jsx("div", __assign({ className: "bsc-text-center bsc-cursor-pointer bc-dt-time-meridian-increase" }, { children: jsx("button", __assign({ className: "focus:bsc-outline-none", onClick: changeMeridian }, { children: jsx(FontAwesomeIcon, { icon: ['fas', 'chevron-up'] }, void 0) }), void 0) }), void 0),
-                jsx("div", __assign({ className: "bsc-text-center bc-dt-time-hour-value" }, { children: hours.current[currentHour] }), void 0),
-                jsx("div", __assign({ className: "bsc-text-center bc-dt-time-separator" }, { children: ":" }), void 0),
-                jsx("div", __assign({ className: "bsc-text-center bc-dt-time-minute-value" }, { children: minutes.current[currentMinute] }), void 0),
-                jsx("div", __assign({ className: "bsc-text-center bc-dt-time-meridian-value" }, { children: ampm.current[currentMeridian] }), void 0),
-                jsx("div", __assign({ className: "bsc-text-center bsc-cursor-pointer bc-dt-time-hour-decrease" }, { children: jsx("button", __assign({ className: "focus:bsc-outline-none", onClick: decreaseHour }, { children: jsx(FontAwesomeIcon, { icon: ['fas', 'chevron-down'] }, void 0) }), void 0) }), void 0),
+                jsx("div", __assign({ className: "text-center cursor-pointer bc-dt-time-minute-increase" }, { children: jsx("button", __assign({ className: "focus:outline-none", onClick: increaseMinute }, { children: jsx(FontAwesomeIcon, { icon: ['fas', 'chevron-up'] }, void 0) }), void 0) }), void 0),
+                jsx("div", __assign({ className: "text-center cursor-pointer bc-dt-time-meridian-increase" }, { children: jsx("button", __assign({ className: "focus:outline-none", onClick: changeMeridian }, { children: jsx(FontAwesomeIcon, { icon: ['fas', 'chevron-up'] }, void 0) }), void 0) }), void 0),
+                jsx("div", __assign({ className: "text-center bc-dt-time-hour-value" }, { children: hours.current[currentHour] }), void 0),
+                jsx("div", __assign({ className: "text-center bc-dt-time-separator" }, { children: ":" }), void 0),
+                jsx("div", __assign({ className: "text-center bc-dt-time-minute-value" }, { children: minutes.current[currentMinute] }), void 0),
+                jsx("div", __assign({ className: "text-center bc-dt-time-meridian-value" }, { children: ampm.current[currentMeridian] }), void 0),
+                jsx("div", __assign({ className: "text-center cursor-pointer bc-dt-time-hour-decrease" }, { children: jsx("button", __assign({ className: "focus:outline-none", onClick: decreaseHour }, { children: jsx(FontAwesomeIcon, { icon: ['fas', 'chevron-down'] }, void 0) }), void 0) }), void 0),
                 jsx("div", { children: "\u00A0" }, void 0),
-                jsx("div", __assign({ className: "bsc-text-center bsc-cursor-pointer bc-dt-time-minute-decrease" }, { children: jsx("button", __assign({ className: "focus:bsc-outline-none", onClick: decreaseMinute }, { children: jsx(FontAwesomeIcon, { icon: ['fas', 'chevron-down'] }, void 0) }), void 0) }), void 0),
-                jsx("div", __assign({ className: "bsc-text-center bsc-cursor-pointer bc-dt-time-meridian-decrease" }, { children: jsx("button", __assign({ className: "focus:bsc-outline-none", onClick: changeMeridian }, { children: jsx(FontAwesomeIcon, { icon: ['fas', 'chevron-down'] }, void 0) }), void 0) }), void 0)] }), void 0) }), void 0));
+                jsx("div", __assign({ className: "text-center cursor-pointer bc-dt-time-minute-decrease" }, { children: jsx("button", __assign({ className: "focus:outline-none", onClick: decreaseMinute }, { children: jsx(FontAwesomeIcon, { icon: ['fas', 'chevron-down'] }, void 0) }), void 0) }), void 0),
+                jsx("div", __assign({ className: "text-center cursor-pointer bc-dt-time-meridian-decrease" }, { children: jsx("button", __assign({ className: "focus:outline-none", onClick: changeMeridian }, { children: jsx(FontAwesomeIcon, { icon: ['fas', 'chevron-down'] }, void 0) }), void 0) }), void 0)] }), void 0) }), void 0));
 }
 
 function DateTimeYearSelector(_a) {
@@ -8798,21 +8881,22 @@ function DateTimeYearSelector(_a) {
     };
     var getCurrentDecade = function () { return yearMatrix[0][0].toString() + " - " + yearMatrix[2][1].toString(); };
     return (jsxs("div", __assign({ className: "bc-dt-year-selector", style: { minWidth: '20rem' } }, { children: [jsx(DateTimeScroller, { title: getCurrentDecade(), scrollerType: DateScrollerType.Year, onMovePrevious: movePreviousDecade, onMoveNext: moveNextDecade }, void 0),
-            jsx("div", __assign({ className: "bsc-w-full bc-dt-year-wrapper" }, { children: jsx("div", __assign({ className: "bsc-grid bsc-grid-cols-4 bsc-gap-4 bc-dt-year-grid" }, { children: yearMatrix.map(function (row, rIndex) {
-                        return row.map(function (column, cIndex) { return (jsx("div", __assign({ className: "bsc-text-center bsc-cursor-pointer bc-dt-year-cell", onClick: function () { return onYearClicked(column); } }, { children: column }), rIndex.toString() + cIndex.toString())); });
+            jsx("div", __assign({ className: "w-full bc-dt-year-wrapper" }, { children: jsx("div", __assign({ className: "grid grid-cols-4 gap-4 bc-dt-year-grid" }, { children: yearMatrix.map(function (row, rIndex) {
+                        return row.map(function (column, cIndex) { return (jsx("div", __assign({ className: "text-center cursor-pointer bc-dt-year-cell", onClick: function () { return onYearClicked(column); } }, { children: column }), rIndex.toString() + cIndex.toString())); });
                     }) }), void 0) }), void 0)] }), void 0));
 }
 
 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, selectableDate = _a.selectableDate, isValidDate = _a.isValidDate, onChange = _a.onChange, calendarTemplate = _a.calendarTemplate, dateScrollerTemplate = _a.dateScrollerTemplate, inputTemplate = _a.inputTemplate;
-    var _f = useState(false), selectorOpen = _f[0], setSelectorOpen = _f[1];
-    var _g = useState(), dropDownTarget = _g[0], setDropDownTarget = _g[1];
+    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 language = useRef(locale || getBrowserLanguage());
     var loadedLocale = useRef();
     var inputElementRef = useRef();
     var contextProps = {
         calendarTemplate: calendarTemplate,
         dateScrollerTemplate: dateScrollerTemplate,
+        colors: colors,
     };
     useEffect(function () {
         if (language.current) {
@@ -8906,7 +8990,7 @@ function DateTime(_a) {
         selectedDateChanged: false,
         dateInitialized: false,
     };
-    var _h = useReducer(reducer, initialState), state = _h[0], dispatcher = _h[1];
+    var _j = useReducer(reducer, initialState), state = _j[0], dispatcher = _j[1];
     var onFocus = function (event) {
         setDropDownElement();
         setSelectorOpen(true);
@@ -9023,17 +9107,19 @@ function DateTime(_a) {
     };
     var canShowDateSelectors = dateSelection === DateSelectionType.DateTime || dateSelection === DateSelectionType.DateOnly;
     var canShowTimeSelector = dateSelection === DateSelectionType.DateTime || dateSelection === DateSelectionType.TimeOnly;
-    var inputProps = iconPosition === CalendarIconPosition.Right
-        ? {
-            rightElement: icon || jsx(FontAwesomeIcon, { icon: ['far', 'calendar-alt'] }, void 0),
-            rightElementClassName: !readOnly ? 'bsc-cursor-pointer' : undefined,
-            onRightElementClick: !readOnly ? onCalendarClick : undefined,
-        }
-        : {
-            leftElement: icon || jsx(FontAwesomeIcon, { icon: ['far', 'calendar-alt'] }, void 0),
-            leftElementClassName: !readOnly ? 'bsc-cursor-pointer' : undefined,
-            onLeftElementClick: !readOnly ? onCalendarClick : undefined,
-        };
+    var inputProps = iconPosition === CalendarIconPosition.None
+        ? {}
+        : iconPosition === CalendarIconPosition.Right
+            ? {
+                rightElement: icon || jsx(FontAwesomeIcon, { icon: ['far', 'calendar-alt'] }, void 0),
+                rightElementClassName: !readOnly ? 'cursor-pointer' : undefined,
+                onRightElementClick: !readOnly ? onCalendarClick : undefined,
+            }
+            : {
+                leftElement: icon || jsx(FontAwesomeIcon, { icon: ['far', 'calendar-alt'] }, void 0),
+                leftElementClassName: !readOnly ? 'cursor-pointer' : undefined,
+                onLeftElementClick: !readOnly ? onCalendarClick : undefined,
+            };
     var inputTemplateProps = {
         label: label,
         readOnly: readOnly,
@@ -9047,8 +9133,8 @@ function DateTime(_a) {
     };
     var defaultTemplate = function (props, children) { return (jsx(Fragment$1, { children: children }, void 0)); };
     var template = inputTemplate || defaultTemplate;
-    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 ? ' bsc-bg-gray-200' : ' bsc-bg-white') + " dark:bsc-bg-black bc-dt-input", onFocus: onFocus, onInput: onInput, onElementCreate: onInputElementCreated }, inputProps), void 0)] }), void 0),
+    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:text-white bc-dt-label" }, { children: label }), void 0),
+                        jsx(ContentEditableInput$1, __assign({ value: getValue(), readOnly: readOnly, className: "text-left " + (readOnly ? (colors === null || colors === void 0 ? void 0 : colors.readOnlyInputBgColor) || 'bg-gray-200' : (colors === null || colors === void 0 ? void 0 : colors.inputBgColor) || 'bg-white') + " dark: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(OverlayPanel, __assign({ visible: selectorOpen, target: dropDownTarget, shouldTargetCloseOverlay: false, shouldScrollCloseOverlay: true, hidden: onDateTimeHidden }, { children: jsxs(Fragment$1, { children: [state.currentSelector === DateTimeActionType.DaySelector &&
                                 canShowDateSelectors &&
                                 state.dateInitialized &&
@@ -9095,7 +9181,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-blue-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(219, 234, 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-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-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 {\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-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-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.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.bg-gray-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));\n}\n\n.bg-gray-900 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(17, 24, 39, var(--tw-bg-opacity));\n}\n\n.bg-red-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));\n}\n\n.bg-green-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(209, 250, 229, var(--tw-bg-opacity));\n}\n\n.bg-blue-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(219, 234, 254, var(--tw-bg-opacity));\n}\n\n.bg-blue-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(191, 219, 254, var(--tw-bg-opacity));\n}\n\n.hover\\:bg-gray-300:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));\n}\n\n.dark .dark\\:bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n\n.dark .dark\\:bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.dark .dark\\:bg-gray-900 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(17, 24, 39, var(--tw-bg-opacity));\n}\n\n.dark .dark\\:hover\\:bg-white:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.border-black {\n  --tw-border-opacity: 1;\n  border-color: rgba(0, 0, 0, var(--tw-border-opacity));\n}\n\n.border-gray-300 {\n  --tw-border-opacity: 1;\n  border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n}\n\n.border-gray-400 {\n  --tw-border-opacity: 1;\n  border-color: rgba(156, 163, 175, var(--tw-border-opacity));\n}\n\n.border-gray-500 {\n  --tw-border-opacity: 1;\n  border-color: rgba(107, 114, 128, var(--tw-border-opacity));\n}\n\n.dark .dark\\:border-white {\n  --tw-border-opacity: 1;\n  border-color: rgba(255, 255, 255, var(--tw-border-opacity));\n}\n\n.rounded-md {\n  border-radius: 0.375rem;\n}\n\n.rounded-full {\n  border-radius: 9999px;\n}\n\n.border-solid {\n  border-style: solid;\n}\n\n.border-none {\n  border-style: none;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-r {\n  border-right-width: 1px;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n\n.flex {\n  display: -webkit-flex;\n  display: flex;\n}\n\n.table {\n  display: table;\n}\n\n.grid {\n  display: grid;\n}\n\n.hidden {\n  display: none;\n}\n\n.flex-row {\n  -webkit-flex-direction: row;\n          flex-direction: row;\n}\n\n.flex-col {\n  -webkit-flex-direction: column;\n          flex-direction: column;\n}\n\n.justify-center {\n  -webkit-justify-content: center;\n          justify-content: center;\n}\n\n.flex-grow {\n  -webkit-flex-grow: 1;\n          flex-grow: 1;\n}\n\n.flex-shrink {\n  -webkit-flex-shrink: 1;\n          flex-shrink: 1;\n}\n\n.font-bold {\n  font-weight: 700;\n}\n\n.mr-2 {\n  margin-right: 0.5rem;\n}\n\n.ml-2 {\n  margin-left: 0.5rem;\n}\n\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n\n.overflow-scroll {\n  overflow: scroll;\n}\n\n.p-2 {\n  padding: 0.5rem;\n}\n\n.p-4 {\n  padding: 1rem;\n}\n\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.pr-4 {\n  padding-right: 1rem;\n}\n\n.pl-4 {\n  padding-left: 1rem;\n}\n\n.pb-8 {\n  padding-bottom: 2rem;\n}\n\n.static {\n  position: static;\n}\n\n.absolute {\n  position: absolute;\n}\n\n* {\n  --tw-shadow: 0 0 #0000;\n}\n\n.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.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.text-left {\n  text-align: left;\n}\n\n.text-center {\n  text-align: center;\n}\n\n.text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgba(156, 163, 175, var(--tw-text-opacity));\n}\n\n.text-red-300 {\n  --tw-text-opacity: 1;\n  color: rgba(252, 165, 165, var(--tw-text-opacity));\n}\n\n.dark .dark\\:text-black {\n  --tw-text-opacity: 1;\n  color: rgba(0, 0, 0, var(--tw-text-opacity));\n}\n\n.dark .dark\\:text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.dark .dark\\:hover\\:text-black:hover {\n  --tw-text-opacity: 1;\n  color: rgba(0, 0, 0, var(--tw-text-opacity));\n}\n\n.visible {\n  visibility: visible;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.gap-3 {\n  gap: 0.75rem;\n}\n\n.gap-4 {\n  gap: 1rem;\n}\n\n.grid-cols-4 {\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n\n.grid-cols-7 {\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n\n.col-span-4 {\n  grid-column: span 4 / span 4;\n}\n\n.transition {\n  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;\n  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n@-webkit-keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n\n@keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n\n@-webkit-keyframes ping {\n  75%, 100% {\n    -webkit-transform: scale(2);\n            transform: scale(2);\n    opacity: 0;\n  }\n}\n\n@keyframes ping {\n  75%, 100% {\n    -webkit-transform: scale(2);\n            transform: scale(2);\n    opacity: 0;\n  }\n}\n\n@-webkit-keyframes pulse {\n  50% {\n    opacity: .5;\n  }\n}\n\n@keyframes pulse {\n  50% {\n    opacity: .5;\n  }\n}\n\n@-webkit-keyframes 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 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);
 
 /*!