@luminati-io/uikit 6.3.124 → 6.3.126

package/dist/umd/uikit.development.js

@@ -47227,9 +47227,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   DatePicker: () => (/* binding */ DatePicker),
 /* harmony export */   StyledDayPicker: () => (/* binding */ StyledDayPicker)
 /* harmony export */ });
-/* harmony import */ var date_fns_format__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! date-fns/format */ "./node_modules/date-fns/format.mjs");
-/* harmony import */ var date_fns_isValid__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! date-fns/isValid */ "./node_modules/date-fns/isValid.mjs");
-/* harmony import */ var date_fns_parse__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! date-fns/parse */ "./node_modules/date-fns/parse.mjs");
+/* harmony import */ var date_fns_format__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! date-fns/format */ "./node_modules/date-fns/format.mjs");
+/* harmony import */ var date_fns_isValid__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! date-fns/isValid */ "./node_modules/date-fns/isValid.mjs");
+/* harmony import */ var date_fns_parse__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! date-fns/parse */ "./node_modules/date-fns/parse.mjs");
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "prop-types");
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
@@ -47244,6 +47244,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
 /* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./shared */ "./src/input/shared.js");
 /* harmony import */ var _dropdown__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./dropdown */ "./src/input/dropdown/index.js");
+/* harmony import */ var _themes_constant__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../themes/constant */ "./src/themes/constant.js");
 // LICENSE_CODE ZON
 
 
@@ -47282,6 +47283,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
+
 var DatePicker = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef(function (props, ref) {
   var onChange = props.onChange,
     disabledDays = props.disabledDays,
@@ -47434,11 +47436,11 @@ var PickerField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forw
     if (inputEditable && inputValue.changed) {
       var parsed = getTextDate(inputValue.text, rest.format, rest.isRange);
       if (rest.isRange) {
-        if (parsed && (0,date_fns_isValid__WEBPACK_IMPORTED_MODULE_11__["default"])(parsed.from)) {
+        if (parsed && (0,date_fns_isValid__WEBPACK_IMPORTED_MODULE_12__["default"])(parsed.from)) {
           var upd = {
             from: parsed.from
           };
-          if ((0,date_fns_isValid__WEBPACK_IMPORTED_MODULE_11__["default"])(parsed.to)) upd.to = parsed.to;
+          if ((0,date_fns_isValid__WEBPACK_IMPORTED_MODULE_12__["default"])(parsed.to)) upd.to = parsed.to;
           onChange(upd);
         } else {
           setInputValue({
@@ -47446,7 +47448,7 @@ var PickerField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forw
             chnaged: false
           });
         }
-      } else if ((0,date_fns_isValid__WEBPACK_IMPORTED_MODULE_11__["default"])(parsed)) onChange(parsed);else setInputValue({
+      } else if ((0,date_fns_isValid__WEBPACK_IMPORTED_MODULE_12__["default"])(parsed)) onChange(parsed);else setInputValue({
         text: getDateText(rest) || '',
         changed: false
       });
@@ -47495,6 +47497,7 @@ function clampToMonthDay(day, year, monthIndex) {
   return new Date(year, monthIndex, d);
 }
 var PickerPopover = function PickerPopover(_ref) {
+  var _selected$from, _selected$from$getFul;
   var mode = _ref.mode,
     selected = _ref.selected,
     onChange = _ref.onChange,
@@ -47506,6 +47509,28 @@ var PickerPopover = function PickerPopover(_ref) {
     pickerProps = _ref.pickerProps,
     onMonthChange = _ref.onMonthChange,
     rest = _objectWithoutProperties(_ref, _excluded3);
+  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showYearPicker = _useState6[0],
+    setShowYearPicker = _useState6[1];
+  var currentYear = new Date().getFullYear();
+  var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(function () {
+      return rest.month || rest.defaultMonth || new Date();
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    internalMonth = _useState8[0],
+    setInternalMonth = _useState8[1];
+  var selectedYear = selected instanceof Date ? selected.getFullYear() : selected === null || selected === void 0 || (_selected$from = selected.from) === null || _selected$from === void 0 || (_selected$from$getFul = _selected$from.getFullYear) === null || _selected$from$getFul === void 0 ? void 0 : _selected$from$getFul.call(_selected$from);
+  var onYearSelect = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (year) {
+    var newMonth = new Date(internalMonth);
+    newMonth.setFullYear(year);
+    setInternalMonth(newMonth);
+    onMonthChange === null || onMonthChange === void 0 || onMonthChange(newMonth);
+    if (mode != 'range' && selected instanceof Date) {
+      onChange(clampToMonthDay(selected.getDate(), year, newMonth.getMonth()));
+    }
+    setShowYearPicker(false);
+  }, [internalMonth, onMonthChange, mode, selected, onChange]);
   var onSelect = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (_, day, modifiers) {
     if (modifiers.disabled) return;
     var value = day;
@@ -47527,12 +47552,34 @@ var PickerPopover = function PickerPopover(_ref) {
     if (hideOnChange && (mode != 'range' || value.from && value.to)) hidePopover();
   }, [mode, selected]);
   var _onMonthChange = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (_m) {
+    setInternalMonth(_m);
     onMonthChange === null || onMonthChange === void 0 || onMonthChange(_m);
     if (mode == 'range') return;
     if (selected) {
       onChange(clampToMonthDay(selected.getDate(), _m.getFullYear(), _m.getMonth()));
     }
   }, [onMonthChange, selected, mode, onChange]);
+  var pickerComponents = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, defaultPickerComponents), {}, {
+      CaptionLabel: function CaptionLabel(captionProps) {
+        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(CaptionToggleWrapper, {
+          onMouseDown: function onMouseDown(e) {
+            return e.stopPropagation();
+          },
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            setShowYearPicker(function (prev) {
+              return !prev;
+            });
+          }
+        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("span", null, captionProps.children), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_4__.Icon, {
+          name: "ChevronDown",
+          color: "icon",
+          size: "xs"
+        }));
+      }
+    });
+  }, []);
   var render = typeof renderPopover == 'function' ? renderPopover : function (_ref2) {
     var picker = _ref2.picker;
     return picker;
@@ -47543,13 +47590,34 @@ var PickerPopover = function PickerPopover(_ref) {
       e.preventDefault();
     }
   }, render({
-    picker: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledDayPicker, _extends({}, rest, pickerProps, {
+    picker: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(PickerContainer, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledDayPicker, _extends({}, rest, pickerProps, {
+      $hidden: showYearPicker,
       captionLayout: captionLayout,
+      month: internalMonth,
       onMonthChange: _onMonthChange,
       onSelect: onSelect,
       mode: mode,
-      selected: selected
-    })),
+      selected: selected,
+      components: pickerComponents
+    })), showYearPicker && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(YearPickerOverlay, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(CaptionToggleWrapper, {
+      onMouseDown: function onMouseDown(e) {
+        return e.stopPropagation();
+      },
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        setShowYearPicker(function (prev) {
+          return !prev;
+        });
+      }
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("span", null, (0,date_fns_format__WEBPACK_IMPORTED_MODULE_13__["default"])(internalMonth, 'MMMM yyyy')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_4__.Icon, {
+      name: "ChevronUp",
+      color: "icon",
+      size: "xs"
+    })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(YearPickerGrid, {
+      selectedYear: selectedYear,
+      currentYear: currentYear,
+      onYearSelect: onYearSelect
+    }))),
     hidePopover: hidePopover,
     // XXX legacy api
     popover: {
@@ -47571,9 +47639,19 @@ var DayPickerWrapper = styled_components__WEBPACK_IMPORTED_MODULE_3___default().
   var spacing = _ref3.spacing;
   return spacing['02'];
 }));
+var PickerContainer = styled_components__WEBPACK_IMPORTED_MODULE_3___default().div.withConfig({
+  displayName: "PickerContainer",
+  componentId: "sc-1gurvxq-1"
+})(["position:relative;"]);
+var YearPickerOverlay = styled_components__WEBPACK_IMPORTED_MODULE_3___default().div.withConfig({
+  displayName: "YearPickerOverlay",
+  componentId: "sc-1gurvxq-2"
+})(["position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;background-color:", ";border-radius:4px;"], theme(function (t) {
+  return t.color.bg;
+}));
 var StyledDropdown = styled_components__WEBPACK_IMPORTED_MODULE_3___default()(_dropdown__WEBPACK_IMPORTED_MODULE_10__.Dropdown).withConfig({
   displayName: "StyledDropdown",
-  componentId: "sc-1gurvxq-1"
+  componentId: "sc-1gurvxq-3"
 })(["display:inline-flex;"]);
 var CustomSelectDropdown = function CustomSelectDropdown(_ref4) {
   var options = _ref4.options,
@@ -47645,40 +47723,132 @@ var chevrons = {
   left: 'ChevronLeft',
   right: 'ChevronRight'
 };
-var StyledDayPicker = styled_components__WEBPACK_IMPORTED_MODULE_3___default()(react_day_picker__WEBPACK_IMPORTED_MODULE_2__.DayPicker).attrs({
-  components: {
-    DayButton: function DayButton(_ref6) {
-      var modifiers = _ref6.modifiers,
-        tabIndex = _ref6.tabIndex,
-        rest = _objectWithoutProperties(_ref6, _excluded5);
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_day_picker__WEBPACK_IMPORTED_MODULE_2__.DayButton, _extends({}, rest, {
-        modifiers: _objectSpread(_objectSpread({}, modifiers), {}, {
-          focused: false
-        }),
-        tabIndex: -1
-      }));
-    },
-    Dropdown: CustomSelectDropdown,
-    YearsDropdown: YearsDropdown,
-    Chevron: function Chevron(_ref7) {
-      var orientation = _ref7.orientation,
-        disabled = _ref7.disabled;
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_4__.Icon, {
-        name: chevrons[orientation],
-        disabled: disabled,
-        color: "icon",
-        size: "sm"
-      });
-    }
+var defaultPickerComponents = {
+  DayButton: function DayButton(_ref6) {
+    var modifiers = _ref6.modifiers,
+      tabIndex = _ref6.tabIndex,
+      rest = _objectWithoutProperties(_ref6, _excluded5);
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_day_picker__WEBPACK_IMPORTED_MODULE_2__.DayButton, _extends({}, rest, {
+      modifiers: _objectSpread(_objectSpread({}, modifiers), {}, {
+        focused: false
+      }),
+      tabIndex: -1
+    }));
   },
-  fixedWeeks: true
+  Dropdown: CustomSelectDropdown,
+  YearsDropdown: YearsDropdown,
+  Chevron: function Chevron(_ref7) {
+    var orientation = _ref7.orientation,
+      disabled = _ref7.disabled;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_4__.Icon, {
+      name: chevrons[orientation],
+      disabled: disabled,
+      color: "icon",
+      size: "sm"
+    });
+  }
+};
+var YEAR_RANGE_BEFORE = 50;
+var YEAR_RANGE_AFTER = 20;
+var YearPickerGrid = function YearPickerGrid(_ref8) {
+  var selectedYear = _ref8.selectedYear,
+    currentYear = _ref8.currentYear,
+    onYearSelect = _ref8.onYearSelect;
+  var years = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    var start = currentYear - YEAR_RANGE_BEFORE;
+    var end = currentYear + YEAR_RANGE_AFTER;
+    var result = [];
+    for (var y = start; y <= end; y++) result.push(y);
+    return result;
+  }, [currentYear]);
+  var gridRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)();
+  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
+    if (!gridRef.current) return;
+    var target = gridRef.current.querySelector('[data-selected="true"]') || gridRef.current.querySelector('[data-current="true"]');
+    if (target) target.scrollIntoView({
+      block: 'center'
+    });
+  }, []);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(YearGridScroller, {
+    ref: gridRef,
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(YearGrid, null, years.map(function (year) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(YearCell, {
+      key: year,
+      "data-selected": year == selectedYear ? 'true' : undefined,
+      "data-current": year == currentYear ? 'true' : undefined,
+      $isSelected: year == selectedYear,
+      $isCurrent: year == currentYear,
+      onClick: function onClick() {
+        return onYearSelect(year);
+      }
+    }, year);
+  })));
+};
+var YearGridScroller = styled_components__WEBPACK_IMPORTED_MODULE_3___default().div.withConfig({
+  displayName: "YearGridScroller",
+  componentId: "sc-1gurvxq-4"
+})(["overflow-y:auto;flex:1;width:100%;border-top:1px solid ", ";", ""], theme(function (t) {
+  return t.color.border_secondary;
+}), function (p) {
+  return (0,_themes_constant__WEBPACK_IMPORTED_MODULE_11__.scrollbars)(p.theme).thin;
+});
+var YearGrid = styled_components__WEBPACK_IMPORTED_MODULE_3___default().div.withConfig({
+  displayName: "YearGrid",
+  componentId: "sc-1gurvxq-5"
+})(["display:grid;grid-template-columns:repeat(4,1fr);gap:12px;"]);
+var YearCell = styled_components__WEBPACK_IMPORTED_MODULE_3___default().button.withConfig({
+  displayName: "YearCell",
+  componentId: "sc-1gurvxq-6"
+})(["display:flex;align-items:center;justify-content:center;height:32px;border-radius:4px;cursor:pointer;font-family:", ";font-weight:", ";font-size:", ";color:", ";background-color:", ";border:1px solid ", ";&:hover{background-color:", ";border-color:", ";color:", ";}"], theme(function (t) {
+  return t.font_family.sans;
+}), theme(function (t) {
+  return t.font_weight.regular;
+}), theme(function (t) {
+  return t.font_size.xs;
+}), function (p) {
+  return p.$isSelected ? p.theme.color.text_white : p.theme.color.text_secondary;
+}, function (p) {
+  return p.$isSelected ? p.theme.color.bg_fill_primary_hover : p.theme.color.bg;
+}, function (p) {
+  return p.$isCurrent && !p.$isSelected ? p.theme.color.border_primary_hover : 'transparent';
+}, function (p) {
+  return p.$isSelected ? p.theme.color.bg_fill_primary_hover : p.theme.color.bg_elevated;
+}, function (p) {
+  return p.$isSelected ? p.theme.color.bg_fill_primary_hover : p.theme.color.border_primary_hover;
+}, function (p) {
+  return p.$isSelected ? p.theme.color.text_white : p.theme.color.text_primary;
+});
+var CaptionToggleWrapper = styled_components__WEBPACK_IMPORTED_MODULE_3___default().button.withConfig({
+  displayName: "CaptionToggleWrapper",
+  componentId: "sc-1gurvxq-7"
+})(["height:36px;display:inline-flex;align-items:center;justify-content:center;gap:4px;background:none;border:none;cursor:pointer;padding:0;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";"], theme(function (t) {
+  return t.font_family.sans;
+}), theme(function (t) {
+  return t.font_weight.regular;
+}), theme(function (t) {
+  return t.font_size.sm;
+}), theme(function (t) {
+  return t.line_height.none;
+}), theme(function (t) {
+  return t.color.text_secondary;
+}));
+var StyledDayPicker = styled_components__WEBPACK_IMPORTED_MODULE_3___default()(react_day_picker__WEBPACK_IMPORTED_MODULE_2__.DayPicker).attrs(function (props) {
+  return {
+    components: props.components || defaultPickerComponents,
+    fixedWeeks: true
+  };
 }).withConfig({
   displayName: "StyledDayPicker",
-  componentId: "sc-1gurvxq-2"
-})([".rdp-months{position:relative;display:flex;}.rdp-month{padding:", " ", ";&:nth-of-type(2){border-left:1px solid ", ";}}.rdp-month_caption{box-sizing:border-box;height:36px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;.rdp-caption_label{width:100%;text-align:center;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";}.rdp-dropdowns{display:flex;align-items:center;justify-content:center;gap:8px;font-family:'Inter',sans-serif;font-style:normal;font-weight:", ";font-size:", ";}}.rdp-nav{position:absolute;top:16px;right:12px;left:12px;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;.rdp-button_previous,.rdp-button_next{display:flex;align-items:center;justify-content:center;padding:0;border:0 none;border-radius:4px;cursor:pointer;background-color:", ";.rdp-chevron{width:20px;height:20px;fill:", ";}&:hover:not(:disabled){background-color:", ";.rdp-chevron{fill:", ";}}&:active:not(:disabled){background-color:", ";.rdp-chevron{fill:", ";}}&:disabled{.rdp-chevron{fill:", ";}cursor:not-allowed;}}}.rdp-month_grid{border-collapse:collapse;border:none;border-spacing:0;}.rdp-weekday{box-sizing:border-box;min-width:32px;max-width:32px;height:32px;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";}.rdp-today .rdp-day_button{color:", ";font-weight:", ";}.rdp-selected .rdp-day_button{background-color:", ";border:1px solid ", ";color:", ";}.rdp-range_middle{.rdp-day_button{background-color:", ";border:1px solid ", ";color:", ";}&.rdp-today .rdp-day_button{color:", ";}}.rdp-day_button{display:flex;flex-direction:column;justify-content:center;align-items:center;width:32px;height:32px;box-sizing:border-box;border-radius:4px;border:1px solid ", ";background-color:", ";cursor:pointer;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";&:hover:not(:disabled){background-color:", ";border:1px solid ", ";color:", ";}&:disabled{color:", ";cursor:not-allowed;}}.rdp-range_start:not(.rdp-range_end) .rdp-day_button,.rdp-range_middle .rdp-day_button{border-top-right-radius:0;border-bottom-right-radius:0;}.rdp-range_end:not(.rdp-range_start) .rdp-day_button,.rdp-range_middle .rdp-day_button{border-top-left-radius:0;border-bottom-left-radius:0;}.rdp-day{padding:0;}"], theme(function (t) {
-  return t.spacing['03'];
-}), theme(function (t) {
+  componentId: "sc-1gurvxq-8"
+})(["", " .rdp-months{position:relative;display:flex;}.rdp-month{padding:0 ", " ", ";&:nth-of-type(2){border-left:1px solid ", ";}}.rdp-month_caption{box-sizing:border-box;height:36px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;.rdp-caption_label{width:100%;text-align:center;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";}.rdp-dropdowns{display:flex;align-items:center;justify-content:center;gap:8px;font-family:'Inter',sans-serif;font-style:normal;font-weight:", ";font-size:", ";}}.rdp-nav{position:absolute;top:8px;right:12px;left:12px;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;pointer-events:none;.rdp-button_previous,.rdp-button_next{pointer-events:auto;display:flex;align-items:center;justify-content:center;padding:0;border:0 none;border-radius:4px;cursor:pointer;background-color:", ";.rdp-chevron{width:20px;height:20px;fill:", ";}&:hover:not(:disabled){background-color:", ";.rdp-chevron{fill:", ";}}&:active:not(:disabled){background-color:", ";.rdp-chevron{fill:", ";}}&:disabled{.rdp-chevron{fill:", ";}cursor:not-allowed;}}}.rdp-month_grid{border-collapse:collapse;border:none;border-spacing:0;}.rdp-weekday{box-sizing:border-box;min-width:32px;max-width:32px;height:32px;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";}.rdp-today .rdp-day_button{color:", ";font-weight:", ";}.rdp-selected .rdp-day_button{background-color:", ";border:1px solid ", ";color:", ";}.rdp-range_middle{.rdp-day_button{background-color:", ";border:1px solid ", ";color:", ";}&.rdp-today .rdp-day_button{color:", ";}}.rdp-day_button{display:flex;flex-direction:column;justify-content:center;align-items:center;width:32px;height:32px;box-sizing:border-box;border-radius:4px;border:1px solid ", ";background-color:", ";cursor:pointer;font-family:", ";font-style:normal;font-weight:", ";font-size:", ";line-height:", ";color:", ";&:hover:not(:disabled){background-color:", ";border:1px solid ", ";color:", ";}&:disabled{color:", ";cursor:not-allowed;}}.rdp-range_start:not(.rdp-range_end) .rdp-day_button,.rdp-range_middle .rdp-day_button{border-top-right-radius:0;border-bottom-right-radius:0;}.rdp-range_end:not(.rdp-range_start) .rdp-day_button,.rdp-range_middle .rdp-day_button{border-top-left-radius:0;border-bottom-left-radius:0;}.rdp-day{padding:0;}"], function (p) {
+  return p.$hidden && 'visibility: hidden;';
+}, theme(function (t) {
   return t.spacing['04'];
+}), theme(function (t) {
+  return t.spacing['03'];
 }), theme(function (t) {
   return t.color.border_secondary;
 }), theme(function (t) {
@@ -47769,9 +47939,9 @@ var getDateText = function getDateText(props) {
   if (isRange) {
     var from = value.from,
       to = value.to;
-    return (from ? (0,date_fns_format__WEBPACK_IMPORTED_MODULE_12__["default"])(from, fmt) : placeholder || '') + ' - ' + (to ? (0,date_fns_format__WEBPACK_IMPORTED_MODULE_12__["default"])(to, fmt) : placeholder || '');
+    return (from ? (0,date_fns_format__WEBPACK_IMPORTED_MODULE_13__["default"])(from, fmt) : placeholder || '') + ' - ' + (to ? (0,date_fns_format__WEBPACK_IMPORTED_MODULE_13__["default"])(to, fmt) : placeholder || '');
   }
-  return (0,date_fns_format__WEBPACK_IMPORTED_MODULE_12__["default"])(value, fmt);
+  return (0,date_fns_format__WEBPACK_IMPORTED_MODULE_13__["default"])(value, fmt);
 };
 var getTextDate = function getTextDate(value, _format, isRange) {
   var fmt = _format || 'dd/MM/yyyy';
@@ -47782,11 +47952,11 @@ var getTextDate = function getTextDate(value, _format, isRange) {
       from = _value$split2[0],
       to = _value$split2[1];
     return {
-      from: from ? (0,date_fns_parse__WEBPACK_IMPORTED_MODULE_13__["default"])(from, fmt, new Date()) : null,
-      to: to ? (0,date_fns_parse__WEBPACK_IMPORTED_MODULE_13__["default"])(to, fmt, new Date()) : null
+      from: from ? (0,date_fns_parse__WEBPACK_IMPORTED_MODULE_14__["default"])(from, fmt, new Date()) : null,
+      to: to ? (0,date_fns_parse__WEBPACK_IMPORTED_MODULE_14__["default"])(to, fmt, new Date()) : null
     };
   }
-  return (0,date_fns_parse__WEBPACK_IMPORTED_MODULE_13__["default"])(value, fmt, new Date());
+  return (0,date_fns_parse__WEBPACK_IMPORTED_MODULE_14__["default"])(value, fmt, new Date());
 };
 var getDefaultMonth = function getDefaultMonth(value) {
   if (value instanceof Date) return value;
@@ -54952,7 +55122,7 @@ __webpack_require__.r(__webpack_exports__);
 
 /*jslint react:true*/
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["className", "classNamePrefix", "onClick", "hotKey", "size"];
+var _excluded = ["className", "classNamePrefix", "onClick", "hotKey", "size", "disabled"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -54975,6 +55145,7 @@ var ModalButton = function ModalButton(_ref) {
     hotKey = _ref.hotKey,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'sm' : _ref$size,
+    disabled = _ref.disabled,
     rest = _objectWithoutProperties(_ref, _excluded);
   var hotKeyIcon = getHotKeyIcon(hotKey);
   var useHotKeyIcon = typeof rest.icon == 'undefined' && typeof hotKeyIcon != 'undefined';
@@ -54986,21 +55157,24 @@ var ModalButton = function ModalButton(_ref) {
     if (!hotKey) return;
     (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 || _document$activeEleme.blur();
     var onKeydown = function onKeydown(e) {
-      var _onClickRef$current;
-      if (e.key && e.key.toLowerCase() == hotKey.toLowerCase()) (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 || _onClickRef$current.call(onClickRef, e);
+      if (e.key && e.key.toLowerCase() == hotKey.toLowerCase() && !disabled) {
+        var _onClickRef$current;
+        (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 || _onClickRef$current.call(onClickRef, e);
+      }
     };
     window.addEventListener('keydown', onKeydown);
     return function () {
       return window.removeEventListener('keydown', onKeydown);
     };
-  }, [hotKey]);
+  }, [hotKey, disabled]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledModalButton, _extends({
     onClick: onClick,
     size: size,
     className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, {
       '-with_hot_key': useHotKeyIcon
     }, className),
-    classNamePrefix: classNamePrefix
+    classNamePrefix: classNamePrefix,
+    disabled: disabled
   }, rest, {
     iconPlacement: iconPlacement,
     icon: icon,