@gympass/yoga 7.53.8 → 7.54.1

package/cjs/Datepicker/web/Calendar.js

@@ -97,7 +97,7 @@ var DayField = _styledComponents["default"].div(_templateObject4 || (_templateOb
       radii = _ref4$theme$yoga.radii,
       spacing = _ref4$theme$yoga.spacing,
       datepicker = _ref4$theme$yoga.components.datepicker;
-  return "\n    p {\n        color: " + getDayFieldColor(selected, disabled, colors, aux) + ";\n        z-index: 1;\n    }\n    width: " + datepicker.width.day + "px;\n    height: " + datepicker.width.day + "px;\n    padding: " + spacing.zero + "px 21.3px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: " + (inRange ? colors.clear : colors.white) + ";\n    position: relative;\n    cursor: pointer;\n    " + (selected && inRange ? "border-radius: " + getDayFieldRadius(aux, radii) : "") + "\n    " + (selected && !disabled ? "&:before {\n            content: '';\n            position: absolute;\n            background: " + colors.vibin + ";\n            width: " + datepicker.width.day + "px;\n            height: " + datepicker.width.day + "px;\n            border-radius: " + radii.circle + "px;\n        }" : "") + "\n    " + (!disabled ? "&:hover {\n            &:before {\n              content: '';\n              position: absolute;\n              border: 1px solid " + colors.secondary + ";\n              width: " + datepicker.width.day + "px;\n              height: " + datepicker.width.day + "px;\n              border-radius: " + radii.circle + "px;\n            }\n          }" : "") + "\n";
+  return "\n    p {\n        color: " + getDayFieldColor(selected, disabled, colors, aux) + ";\n        z-index: 1;\n    }\n    width: " + datepicker.width.day + "px;\n    height: " + datepicker.width.day + "px;\n    padding: " + spacing.zero + "px 21.3px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: " + (inRange ? colors.clear : colors.white) + ";\n    position: relative;\n    cursor: pointer;\n    " + (selected && inRange ? "border-radius: " + getDayFieldRadius(aux, radii) + ";" : "") + "\n    " + (selected && !disabled ? "&:before {\n            content: '';\n            position: absolute;\n            background: " + colors.vibin + ";\n            width: " + datepicker.width.day + "px;\n            height: " + datepicker.width.day + "px;\n            border-radius: " + radii.circle + "px;\n        };" : "") + "\n    " + (!disabled ? "&:hover {\n            &:before {\n              content: '';\n              position: absolute;\n              border: 1px solid " + colors.secondary + ";\n              width: " + datepicker.width.day + "px;\n              height: " + datepicker.width.day + "px;\n              border-radius: " + radii.circle + "px;\n            }\n          };" : "") + "\n";
 });
 
 var Row = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref5) {
@@ -114,7 +114,9 @@ function Calendar(_ref6) {
       onSelectSingle = _ref6.onSelectSingle,
       onSelectRange = _ref6.onSelectRange,
       disablePastDates = _ref6.disablePastDates,
-      disableFutureDates = _ref6.disableFutureDates;
+      disableFutureDates = _ref6.disableFutureDates,
+      disablePastFrom = _ref6.disablePastFrom,
+      disableFutureFrom = _ref6.disableFutureFrom;
 
   var _useState = (0, _react.useState)(new Date().getUTCMonth()),
       month = _useState[0],
@@ -125,11 +127,14 @@ function Calendar(_ref6) {
       setYear = _useState2[1];
 
   (0, _react.useEffect)(function () {
-    if (startDate) {
+    if (endDate) {
+      setMonth(endDate.getUTCMonth());
+      setYear(endDate.getUTCFullYear());
+    } else if (startDate) {
       setMonth(startDate.getUTCMonth());
       setYear(startDate.getUTCFullYear());
     }
-  }, [startDate]);
+  }, [startDate, endDate]);
 
   var getDayOfWeek = function getDayOfWeek(day) {
     return new Date(Date.UTC(year, month, day)).getUTCDay();
@@ -159,8 +164,8 @@ function Calendar(_ref6) {
     var local = new Date(Date.UTC(year, month, day));
     var now = new Date();
     var nowUTC = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate());
-    var pastDatesDisabled = disablePastDates && local.getTime() < nowUTC;
-    var futureDateDisabled = disableFutureDates && local.getTime() > nowUTC;
+    var pastDatesDisabled = disablePastDates && local.getTime() < nowUTC || disablePastFrom && local.getTime() < new Date(Date.UTC(disablePastFrom.getFullYear(), disablePastFrom.getMonth(), disablePastFrom.getDate()));
+    var futureDateDisabled = disableFutureDates && local.getTime() > nowUTC || disableFutureFrom && local.getTime() > new Date(Date.UTC(disableFutureFrom.getFullYear(), disableFutureFrom.getMonth(), disableFutureFrom.getDate()));
     return pastDatesDisabled || futureDateDisabled;
   };
 
@@ -341,7 +346,9 @@ Calendar.propTypes = {
   onSelectSingle: _propTypes.func,
   onSelectRange: _propTypes.func,
   disablePastDates: _propTypes.bool,
-  disableFutureDates: _propTypes.bool
+  disableFutureDates: _propTypes.bool,
+  disablePastFrom: (0, _propTypes.instanceOf)(Date),
+  disableFutureFrom: (0, _propTypes.instanceOf)(Date)
 };
 Calendar.defaultProps = {
   startDate: undefined,
@@ -349,7 +356,9 @@ Calendar.defaultProps = {
   onSelectSingle: null,
   onSelectRange: null,
   disablePastDates: false,
-  disableFutureDates: false
+  disableFutureDates: false,
+  disablePastFrom: undefined,
+  disableFutureFrom: undefined
 };
 var _default = Calendar;
 exports["default"] = _default;

package/cjs/Datepicker/web/Datepicker.js

@@ -39,7 +39,7 @@ var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObje
   return props.fullWidth ? '100%' : (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n          ", "px\n        "])), _Theme.theme.components.input.width);
 });
 
-var getSelectorBorderColor = function getSelectorBorderColor(open, error, disabled, colors, input) {
+var getSelectorBorderColor = function getSelectorBorderColor(open, error, disabled, inputFilled, colors) {
   if (error) {
     return colors.feedback.attention[1];
   }
@@ -48,22 +48,23 @@ var getSelectorBorderColor = function getSelectorBorderColor(open, error, disabl
     return colors.elements.backgroundAndDisabled;
   }
 
-  if (open) {
-    return colors.deep;
+  if (open || inputFilled) {
+    return colors.secondary;
   }
 
-  return input.border.color["default"];
+  return colors.elements.lineAndBorders;
 };
 
 var Selector = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var open = _ref.open,
       error = _ref.error,
       disabled = _ref.disabled,
+      inputFilled = _ref.inputFilled,
       _ref$theme$yoga = _ref.theme.yoga,
       components = _ref$theme$yoga.components,
       colors = _ref$theme$yoga.colors,
       spacing = _ref$theme$yoga.spacing;
-  return "\n    position: relative;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    box-sizing: border-box;\n    height: " + components.input.height + "px;\n    width: 100%;\n    padding: " + spacing.small + "px;\n    background-color: " + colors.white + ";\n    border-radius: " + components.input.border.radius + "px;\n    border-width: " + components.input.border.width + "px;\n    border-style: solid;\n    border-color: " + getSelectorBorderColor(open, error, disabled, colors, components.input) + "\n    color: " + components.input.font.color.focus + ";\n  ";
+  return "\n    position: relative;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    box-sizing: border-box;\n    height: " + components.input.height + "px;\n    width: 100%;\n    padding: " + spacing.small + "px;\n    background-color: " + colors.white + ";\n    border-radius: " + components.input.border.radius + "px;\n    border-width: " + components.input.border.width + "px;\n    border-style: solid;\n    border-color: " + getSelectorBorderColor(open, error, disabled, inputFilled, colors) + ";\n    &:hover {\n      border-color: " + colors.secondary + ";\n    }\n  ";
 });
 
 var Input = (0, _styledComponents["default"])(_yoga.Text.Small)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
@@ -125,27 +126,31 @@ function Datepicker(_ref8) {
   var fullWidth = _ref8.fullWidth,
       type = _ref8.type,
       placeholder = _ref8.placeholder,
-      initialDate = _ref8.startDate,
-      finishDate = _ref8.endDate,
+      startDate = _ref8.startDate,
+      endDate = _ref8.endDate,
       onSelectSingle = _ref8.onSelectSingle,
       disabled = _ref8.disabled,
       onSelectRange = _ref8.onSelectRange,
+      customOnSelectRange = _ref8.customOnSelectRange,
       disablePastDates = _ref8.disablePastDates,
       disableFutureDates = _ref8.disableFutureDates,
+      disablePastFrom = _ref8.disablePastFrom,
+      disableFutureFrom = _ref8.disableFutureFrom,
       error = _ref8.error,
-      onOpen = _ref8.onOpen;
+      onOpen = _ref8.onOpen,
+      displayEndDateOnly = _ref8.displayEndDateOnly;
 
   var _useState = (0, _react.useState)(),
       open = _useState[0],
       setOpen = _useState[1];
 
-  var _useState2 = (0, _react.useState)(initialDate),
-      startDate = _useState2[0],
-      setStartDate = _useState2[1];
+  var _useState2 = (0, _react.useState)(startDate),
+      startDateLocal = _useState2[0],
+      setStartDateLocal = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(finishDate),
-      endDate = _useState3[0],
-      setEndDate = _useState3[1];
+  var _useState3 = (0, _react.useState)(endDate),
+      endDateLocal = _useState3[0],
+      setEndDateLocal = _useState3[1];
 
   var ref = (0, _react.useRef)(null);
 
@@ -163,18 +168,23 @@ function Datepicker(_ref8) {
   };
 
   (0, _react.useEffect)(function () {
-    if (type === 'single' && onSelectSingle) {
-      onSelectSingle(startDate);
+    setInputFilled(startDate || endDate);
+  }, [startDate, endDate]);
+  (0, _react.useEffect)(function () {
+    setInputFilled(startDate || endDate);
+    setStartDateLocal(startDate);
+    setEndDateLocal(endDate);
+
+    if (type === 'single' && startDate) {
       setOpen(false.toString());
-    } else if (type === 'range' && onSelectRange) {
-      onSelectRange(startDate, endDate);
     }
 
-    setInputFilled(!!startDate);
-  }, [startDate, endDate]);
+    if ((startDate || endDate) && onSelectRange) onSelectRange(startDate, endDate);
+    if (displayEndDateOnly && !endDate) setInputFilled(false);
+  }, [startDate, endDate, type]);
 
   var onDateSingleSelect = function onDateSingleSelect(startLocal) {
-    setStartDate(startLocal);
+    onSelectSingle(startLocal);
   };
 
   (0, _react.useEffect)(function () {
@@ -182,27 +192,38 @@ function Datepicker(_ref8) {
   }, [open]);
 
   var onDateRangeSelect = function onDateRangeSelect(selectedDate) {
-    if (!endDate) {
-      if (!startDate) {
-        setStartDate(selectedDate);
-      } else if (selectedDate < startDate) {
-        setStartDate(selectedDate);
-        setEndDate(undefined);
-      } else setEndDate(selectedDate);
+    if (customOnSelectRange) {
+      customOnSelectRange(selectedDate);
+      return;
+    }
+
+    var onSelectRangeCallback = function onSelectRangeCallback(start, end) {
+      if (onSelectRange) {
+        onSelectRange(start, end);
+      }
+    };
+
+    if (!startDateLocal || startDateLocal > selectedDate && !endDateLocal || endDateLocal) {
+      setStartDateLocal(selectedDate);
+      if (endDateLocal) setEndDateLocal(undefined);
+      onSelectRangeCallback(selectedDate, undefined);
     } else {
-      setStartDate(selectedDate);
-      setEndDate(undefined);
+      setEndDateLocal(selectedDate);
+      onSelectRangeCallback(startDateLocal, selectedDate);
     }
   };
 
   var renderInput = function renderInput() {
-    if (!startDate && !endDate) {
+    if (!startDate && !endDate || displayEndDateOnly && !endDate) {
       return /*#__PURE__*/_react["default"].createElement(InputPlaceholder, {
         disabled: disabled
       }, placeholder != null ? placeholder : "Select Date");
     }
 
     var dateFormat = 'MMM d, yyyy';
+    if (displayEndDateOnly) return /*#__PURE__*/_react["default"].createElement(Input, {
+      disabled: disabled
+    }, endDate && (0, _dateFns.format)(endDate, dateFormat));
     return startDate && /*#__PURE__*/_react["default"].createElement(Input, {
       disabled: disabled
     }, (0, _dateFns.format)(startDate, dateFormat), endDate && " - " + (0, _dateFns.format)(endDate, dateFormat));
@@ -214,7 +235,8 @@ function Datepicker(_ref8) {
   }, /*#__PURE__*/_react["default"].createElement(Selector, {
     open: open === 'true',
     disabled: disabled,
-    error: error
+    error: error,
+    inputFilled: inputFilled
   }, renderInput(), /*#__PURE__*/_react["default"].createElement(TButton, {
     onClick: function onClick() {
       if (!disabled) {
@@ -232,12 +254,14 @@ function Datepicker(_ref8) {
     onBlur: onBlur
   }, /*#__PURE__*/_react["default"].createElement(_Calendar["default"], {
     type: type,
-    startDate: startDate,
-    endDate: endDate,
+    startDate: startDateLocal,
+    endDate: endDateLocal,
     onSelectSingle: onDateSingleSelect,
     onSelectRange: onDateRangeSelect,
     disablePastDates: disablePastDates,
-    disableFutureDates: disableFutureDates
+    disableFutureDates: disableFutureDates,
+    disablePastFrom: disablePastFrom,
+    disableFutureFrom: disableFutureFrom
   })));
 }
 
@@ -250,10 +274,14 @@ Datepicker.propTypes = {
   disabled: _propTypes.bool,
   onSelectSingle: _propTypes.func,
   onSelectRange: _propTypes.func,
+  customOnSelectRange: _propTypes.func,
   disablePastDates: _propTypes.bool,
   disableFutureDates: _propTypes.bool,
+  disablePastFrom: (0, _propTypes.instanceOf)(Date),
+  disableFutureFrom: (0, _propTypes.instanceOf)(Date),
   error: _propTypes.string,
-  onOpen: _propTypes.func
+  onOpen: _propTypes.func,
+  displayEndDateOnly: _propTypes.bool
 };
 Datepicker.defaultProps = {
   fullWidth: false,
@@ -263,10 +291,14 @@ Datepicker.defaultProps = {
   disabled: false,
   onSelectSingle: undefined,
   onSelectRange: undefined,
+  customOnSelectRange: undefined,
   disablePastDates: false,
   disableFutureDates: false,
+  disablePastFrom: undefined,
+  disableFutureFrom: undefined,
   error: undefined,
-  onOpen: undefined
+  onOpen: undefined,
+  displayEndDateOnly: false
 };
 var _default = Datepicker;
 exports["default"] = _default;

package/cjs/Datepicker/web/Datepicker.test.js

@@ -30,8 +30,7 @@ describe('<Datepicker />', function () {
       expect(container).toMatchSnapshot();
     });
     it('should match with default selected date single Datepicker', function () {
-      var mockedDate = new Date(2022, 7, 3);
-      jest.useFakeTimers('modern').setSystemTime(mockedDate);
+      jest.useFakeTimers('modern').setSystemTime(testDate);
 
       var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
         type: "single",
@@ -42,8 +41,7 @@ describe('<Datepicker />', function () {
       expect(container).toMatchSnapshot();
     });
     it('should match with default selected dates range Datepicker', function () {
-      var mockedDate = new Date(2022, 7, 3);
-      jest.useFakeTimers('modern').setSystemTime(mockedDate);
+      jest.useFakeTimers('modern').setSystemTime(testDate);
       var endDate = new Date();
       endDate.setDate(testDate.getDate() + 15);
 
@@ -110,7 +108,7 @@ describe('<Datepicker />', function () {
         type: "single",
         onSelectSingle: onSelectSingle
       })));
-      expect(onSelectSingle).toHaveBeenCalledTimes(1);
+      expect(onSelectSingle).not.toHaveBeenCalled();
 
       _react2.fireEvent.click(_react2.screen.getByRole('button'));
 
@@ -118,7 +116,7 @@ describe('<Datepicker />', function () {
 
       _react2.fireEvent.click(day10);
 
-      expect(onSelectSingle).toHaveBeenCalledTimes(2);
+      expect(onSelectSingle).toHaveBeenCalledTimes(1);
     });
     it('should call onSelectRange function on range Datepicker', function () {
       var onSelectRange = jest.fn();
@@ -126,7 +124,7 @@ describe('<Datepicker />', function () {
         type: "range",
         onSelectRange: onSelectRange
       })));
-      expect(onSelectRange).toHaveBeenCalledTimes(1);
+      expect(onSelectRange).not.toHaveBeenCalled();
 
       _react2.fireEvent.click(_react2.screen.getByRole('button'));
 
@@ -136,11 +134,33 @@ describe('<Datepicker />', function () {
 
       _react2.fireEvent.click(day10);
 
+      expect(onSelectRange).toHaveBeenCalledTimes(1);
+
+      _react2.fireEvent.click(day20);
+
       expect(onSelectRange).toHaveBeenCalledTimes(2);
+    });
+    it('should call onCustomSelectRange function on range Datepicker', function () {
+      var onCustomSelectRange = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "range",
+        onSelectRange: onCustomSelectRange
+      })));
+      expect(onCustomSelectRange).not.toHaveBeenCalled();
+
+      _react2.fireEvent.click(_react2.screen.getByRole('button'));
+
+      var day10 = _react2.screen.queryAllByText('10')[0];
+
+      var day20 = _react2.screen.queryAllByText('20')[0];
+
+      _react2.fireEvent.click(day10);
+
+      expect(onCustomSelectRange).toHaveBeenCalledTimes(1);
 
       _react2.fireEvent.click(day20);
 
-      expect(onSelectRange).toHaveBeenCalledTimes(3);
+      expect(onCustomSelectRange).toHaveBeenCalledTimes(2);
     });
     it('should display default date on single Datepicker', function () {
       var currentDate = new Date();
@@ -210,6 +230,36 @@ describe('<Datepicker />', function () {
         return expect(_react2.screen.getAllByText("" + (i + 1))[0].closest('div')).toHaveAttribute('disabled');
       });
     });
+    it('should disable past dates from specific date', function () {
+      jest.useFakeTimers('modern').setSystemTime(testDate);
+      var date = new Date();
+      date.setDate(testDate.getDate() + 15);
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        disablePastFrom: date
+      })));
+
+      _react2.fireEvent.click(_react2.screen.getByRole('button'));
+
+      for (var i = 1; i <= 17; i++) {
+        expect(_react2.screen.getAllByText("" + i)[0].closest('div')).toHaveAttribute('disabled');
+      }
+    });
+    it('should disable future dates from specific date', function () {
+      jest.useFakeTimers('modern').setSystemTime(testDate);
+      var date = new Date();
+      date.setDate(testDate.getDate() + 15);
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        disableFutureFrom: date
+      })));
+
+      _react2.fireEvent.click(_react2.screen.getByRole('button'));
+
+      for (var i = 19; i <= 31; i++) {
+        expect(_react2.screen.getAllByText("" + i)[0].closest('div')).toHaveAttribute('disabled');
+      }
+    });
     it('should be disabled', function () {
       (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
         type: "single",

package/cjs/Tag/native/Informative.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireDefault(require("react"));var _styledComponents=_interopRequireWildcard(require("styled-components"));var _propTypes=require("prop-types");var _yogaSystem=require("@gympass/yoga-system");var _Tag=require("./Tag");var _Icon=_interopRequireDefault(require("../../Icon"));var _excluded=["children","icon","theme","small"];var _templateObject,_templateObject2,_templateObject3;function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Informative=(0,_styledComponents["default"])(_Tag.StyledTag)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n\n  ","\n"])),function(_ref){var variant=_ref.variant,_ref$theme$yoga=_ref.theme.yoga,_ref$theme$yoga$color=_ref$theme$yoga.colors,text=_ref$theme$yoga$color.text,_ref$theme$yoga$color2=_ref$theme$yoga$color.feedback[variant],color=_ref$theme$yoga$color2===void 0?{light:text.secondary}:_ref$theme$yoga$color2,tag=_ref$theme$yoga.components.tag;return"\n    background-color: "+color.light+";\n    border-color: "+color.light+";\n    border-radius: "+tag.border.radius+"px;\n  ";},_yogaSystem.margins);var Wrapper=_styledComponents["default"].View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n"])));var StyledTextInformative=(0,_styledComponents["default"])(_Tag.StyledText)(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n"])),function(_ref2){var _ref2$theme$yoga=_ref2.theme.yoga,text=_ref2$theme$yoga.colors.text,tag=_ref2$theme$yoga.components.tag;return"\n    color: "+text.primary+";\n\n    font-size: "+tag.font.size+"px;\n    line-height: "+tag.font.lineHeight+"px;\n    font-weight: "+tag.font.weight+";\n  ";});var TagInformative=function TagInformative(_ref3){var children=_ref3.children,icon=_ref3.icon,_ref3$theme$yoga=_ref3.theme.yoga,text=_ref3$theme$yoga.colors.text,tag=_ref3$theme$yoga.components.tag,small=_ref3.small,props=(0,_objectWithoutProperties2["default"])(_ref3,_excluded);return _react["default"].createElement(Informative,(0,_extends2["default"])({small:small},props),_react["default"].createElement(Wrapper,null,icon&&_react["default"].createElement(_Icon["default"],{as:icon,size:small?tag.icon.size.small:tag.icon.size["default"],fill:text.primary,marginRight:tag.icon.margin.right}),_react["default"].createElement(StyledTextInformative,null,children)));};TagInformative.propTypes={variant:(0,_propTypes.oneOf)(['success','informative','attention']).isRequired,icon:_propTypes.func,children:_propTypes.node.isRequired,small:_propTypes.bool};TagInformative.defaultProps={icon:undefined,small:false};TagInformative.displayName='Tag.Informative';var _default=(0,_styledComponents.withTheme)(TagInformative);exports["default"]=_default;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireDefault(require("react"));var _styledComponents=_interopRequireWildcard(require("styled-components"));var _propTypes=require("prop-types");var _yogaSystem=require("@gympass/yoga-system");var _Tag=require("./Tag");var _Icon=_interopRequireDefault(require("../../Icon"));var _excluded=["children","icon","theme","small"];var _templateObject,_templateObject2,_templateObject3;function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Informative=(0,_styledComponents["default"])(_Tag.StyledTag)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n\n  ","\n"])),function(_ref){var variant=_ref.variant,_ref$theme$yoga=_ref.theme.yoga,_ref$theme$yoga$color=_ref$theme$yoga.colors,text=_ref$theme$yoga$color.text,_ref$theme$yoga$color2=_ref$theme$yoga$color.feedback[variant],color=_ref$theme$yoga$color2===void 0?{light:text.secondary}:_ref$theme$yoga$color2,tag=_ref$theme$yoga.components.tag;return"\n    background-color: "+color.light+";\n    border-color: "+color.light+";\n    border-radius: "+tag.border.radius+"px;\n  ";},_yogaSystem.margins);var Wrapper=_styledComponents["default"].View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n"])));var StyledTextInformative=(0,_styledComponents["default"])(_Tag.StyledText)(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n"])),function(_ref2){var _ref2$theme$yoga=_ref2.theme.yoga,text=_ref2$theme$yoga.colors.text,tag=_ref2$theme$yoga.components.tag;return"\n    color: "+text.primary+";\n\n    font-size: "+tag.font.size+"px;\n    line-height: "+tag.font.lineHeight+"px;\n    font-weight: "+tag.font.weight+";\n  ";});var TagInformative=function TagInformative(_ref3){var children=_ref3.children,icon=_ref3.icon,_ref3$theme$yoga=_ref3.theme.yoga,text=_ref3$theme$yoga.colors.text,tag=_ref3$theme$yoga.components.tag,small=_ref3.small,props=(0,_objectWithoutProperties2["default"])(_ref3,_excluded);return _react["default"].createElement(Informative,(0,_extends2["default"])({small:small},props),_react["default"].createElement(Wrapper,null,icon&&_react["default"].createElement(_Icon["default"],{as:icon,size:small?tag.icon.size.small:tag.icon.size["default"],fill:text.primary,marginRight:tag.icon.margin.right}),_react["default"].createElement(StyledTextInformative,null,children)));};TagInformative.propTypes={variant:(0,_propTypes.oneOf)(['neutral','success','informative','attention']),icon:_propTypes.func,children:_propTypes.node.isRequired,small:_propTypes.bool};TagInformative.defaultProps={variant:'neutral',icon:undefined,small:false};TagInformative.displayName='Tag.Informative';var _default=(0,_styledComponents.withTheme)(TagInformative);exports["default"]=_default;

package/cjs/Tag/native/Tag.test.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _react=_interopRequireDefault(require("react"));var _reactNative=require("@testing-library/react-native");var _yogaIcons=require("@gympass/yoga-icons");var _=require("../..");describe('<Tag />',function(){it('should match snapshot',function(){var _render=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Tag,null,"default"))),toJSON=_render.toJSON;expect(toJSON()).toMatchSnapshot();});it('should match snapshot with custom icon and informative type',function(){var _render2=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Tag.Informative,{variant:"success",icon:_yogaIcons.Building},"success with custom icon"),_react["default"].createElement(_.Tag.Informative,{variant:"success",icon:_yogaIcons.Building,small:true},"success with custom icon"))),toJSON=_render2.toJSON;expect(toJSON()).toMatchSnapshot();});it('should match snapshot with without icon and informative type',function(){var _render3=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Tag.Informative,{variant:"success"},"success without icon"),_react["default"].createElement(_.Tag.Informative,{variant:"success",small:true},"success without icon"))),toJSON=_render3.toJSON;expect(toJSON()).toMatchSnapshot();});it('should match snapshot with variant prop',function(){var _render4=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Tag,{variant:"success"},"success"),_react["default"].createElement(_.Tag,{variant:"informative"},"informative"),_react["default"].createElement(_.Tag,{variant:"attention"},"attention"),_react["default"].createElement(_.Tag,{variant:"attention",small:true},"attention small"))),toJSON=_render4.toJSON;expect(toJSON()).toMatchSnapshot();});it('should match snapshot with variant prop and informative type',function(){var _render5=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Tag.Informative,{variant:"success"},"success"),_react["default"].createElement(_.Tag.Informative,{variant:"informative"},"informative"),_react["default"].createElement(_.Tag.Informative,{variant:"attention"},"attention"),_react["default"].createElement(_.Tag.Informative,{variant:"attention",small:true},"attention small"))),toJSON=_render5.toJSON;expect(toJSON()).toMatchSnapshot();});it('should match snapshot with variant and margin prop ',function(){var _render6=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Tag,{variant:"success"},"success"),_react["default"].createElement(_.Tag,{mv:"medium",variant:"informative"},"informative"),_react["default"].createElement(_.Tag,{variant:"attention"},"attention"))),toJSON=_render6.toJSON;expect(toJSON()).toMatchSnapshot();});it('should match snapshot with variant prop and informative type with margin prop',function(){var _render7=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Tag.Informative,{variant:"success"},"success"),_react["default"].createElement(_.Tag.Informative,{mv:"medium",variant:"informative"},"informative"),_react["default"].createElement(_.Tag.Informative,{variant:"attention"},"attention"))),toJSON=_render7.toJSON;expect(toJSON()).toMatchSnapshot();});});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _react=_interopRequireDefault(require("react"));var _reactNative=require("@testing-library/react-native");var _yogaIcons=require("@gympass/yoga-icons");var _=require("../..");describe('<Tag />',function(){it('should match snapshot',function(){var _render=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Tag,null,"default"))),toJSON=_render.toJSON;expect(toJSON()).toMatchSnapshot();});it('should match snapshot with custom icon and informative type',function(){var _render2=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Tag.Informative,{variant:"success",icon:_yogaIcons.Building},"success with custom icon"),_react["default"].createElement(_.Tag.Informative,{variant:"success",icon:_yogaIcons.Building,small:true},"success with custom icon"))),toJSON=_render2.toJSON;expect(toJSON()).toMatchSnapshot();});it('should match snapshot with without icon and informative type',function(){var _render3=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Tag.Informative,{variant:"success"},"success without icon"),_react["default"].createElement(_.Tag.Informative,{variant:"success",small:true},"success without icon"))),toJSON=_render3.toJSON;expect(toJSON()).toMatchSnapshot();});it('should match snapshot with variant prop',function(){var _render4=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Tag,{variant:"success"},"success"),_react["default"].createElement(_.Tag,{variant:"informative"},"informative"),_react["default"].createElement(_.Tag,{variant:"attention"},"attention"),_react["default"].createElement(_.Tag,{variant:"attention",small:true},"attention small"))),toJSON=_render4.toJSON;expect(toJSON()).toMatchSnapshot();});it('should match snapshot with variant prop and informative type',function(){var _render5=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Tag.Informative,{variant:"neutral"},"neutral"),_react["default"].createElement(_.Tag.Informative,{variant:"success"},"success"),_react["default"].createElement(_.Tag.Informative,{variant:"informative"},"informative"),_react["default"].createElement(_.Tag.Informative,{variant:"attention"},"attention"),_react["default"].createElement(_.Tag.Informative,{variant:"attention",small:true},"attention small"))),toJSON=_render5.toJSON;expect(toJSON()).toMatchSnapshot();});it('should match snapshot with variant and margin prop ',function(){var _render6=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Tag,{variant:"success"},"success"),_react["default"].createElement(_.Tag,{mv:"medium",variant:"informative"},"informative"),_react["default"].createElement(_.Tag,{variant:"attention"},"attention"))),toJSON=_render6.toJSON;expect(toJSON()).toMatchSnapshot();});it('should match snapshot with variant prop and informative type with margin prop',function(){var _render7=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Tag.Informative,{variant:"success"},"success"),_react["default"].createElement(_.Tag.Informative,{mv:"medium",variant:"informative"},"informative"),_react["default"].createElement(_.Tag.Informative,{variant:"attention"},"attention"))),toJSON=_render7.toJSON;expect(toJSON()).toMatchSnapshot();});});

package/esm/Datepicker/web/Calendar.js

@@ -78,7 +78,7 @@ var DayField = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplat
       radii = _ref4$theme$yoga.radii,
       spacing = _ref4$theme$yoga.spacing,
       datepicker = _ref4$theme$yoga.components.datepicker;
-  return "\n    p {\n        color: " + getDayFieldColor(selected, disabled, colors, aux) + ";\n        z-index: 1;\n    }\n    width: " + datepicker.width.day + "px;\n    height: " + datepicker.width.day + "px;\n    padding: " + spacing.zero + "px 21.3px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: " + (inRange ? colors.clear : colors.white) + ";\n    position: relative;\n    cursor: pointer;\n    " + (selected && inRange ? "border-radius: " + getDayFieldRadius(aux, radii) : "") + "\n    " + (selected && !disabled ? "&:before {\n            content: '';\n            position: absolute;\n            background: " + colors.vibin + ";\n            width: " + datepicker.width.day + "px;\n            height: " + datepicker.width.day + "px;\n            border-radius: " + radii.circle + "px;\n        }" : "") + "\n    " + (!disabled ? "&:hover {\n            &:before {\n              content: '';\n              position: absolute;\n              border: 1px solid " + colors.secondary + ";\n              width: " + datepicker.width.day + "px;\n              height: " + datepicker.width.day + "px;\n              border-radius: " + radii.circle + "px;\n            }\n          }" : "") + "\n";
+  return "\n    p {\n        color: " + getDayFieldColor(selected, disabled, colors, aux) + ";\n        z-index: 1;\n    }\n    width: " + datepicker.width.day + "px;\n    height: " + datepicker.width.day + "px;\n    padding: " + spacing.zero + "px 21.3px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: " + (inRange ? colors.clear : colors.white) + ";\n    position: relative;\n    cursor: pointer;\n    " + (selected && inRange ? "border-radius: " + getDayFieldRadius(aux, radii) + ";" : "") + "\n    " + (selected && !disabled ? "&:before {\n            content: '';\n            position: absolute;\n            background: " + colors.vibin + ";\n            width: " + datepicker.width.day + "px;\n            height: " + datepicker.width.day + "px;\n            border-radius: " + radii.circle + "px;\n        };" : "") + "\n    " + (!disabled ? "&:hover {\n            &:before {\n              content: '';\n              position: absolute;\n              border: 1px solid " + colors.secondary + ";\n              width: " + datepicker.width.day + "px;\n              height: " + datepicker.width.day + "px;\n              border-radius: " + radii.circle + "px;\n            }\n          };" : "") + "\n";
 });
 var Row = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref5) {
   var _ref5$theme$yoga = _ref5.theme.yoga,
@@ -94,7 +94,9 @@ function Calendar(_ref6) {
       onSelectSingle = _ref6.onSelectSingle,
       onSelectRange = _ref6.onSelectRange,
       disablePastDates = _ref6.disablePastDates,
-      disableFutureDates = _ref6.disableFutureDates;
+      disableFutureDates = _ref6.disableFutureDates,
+      disablePastFrom = _ref6.disablePastFrom,
+      disableFutureFrom = _ref6.disableFutureFrom;
 
   var _useState = useState(new Date().getUTCMonth()),
       month = _useState[0],
@@ -105,11 +107,14 @@ function Calendar(_ref6) {
       setYear = _useState2[1];
 
   useEffect(function () {
-    if (startDate) {
+    if (endDate) {
+      setMonth(endDate.getUTCMonth());
+      setYear(endDate.getUTCFullYear());
+    } else if (startDate) {
       setMonth(startDate.getUTCMonth());
       setYear(startDate.getUTCFullYear());
     }
-  }, [startDate]);
+  }, [startDate, endDate]);
 
   var getDayOfWeek = function getDayOfWeek(day) {
     return new Date(Date.UTC(year, month, day)).getUTCDay();
@@ -139,8 +144,8 @@ function Calendar(_ref6) {
     var local = new Date(Date.UTC(year, month, day));
     var now = new Date();
     var nowUTC = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate());
-    var pastDatesDisabled = disablePastDates && local.getTime() < nowUTC;
-    var futureDateDisabled = disableFutureDates && local.getTime() > nowUTC;
+    var pastDatesDisabled = disablePastDates && local.getTime() < nowUTC || disablePastFrom && local.getTime() < new Date(Date.UTC(disablePastFrom.getFullYear(), disablePastFrom.getMonth(), disablePastFrom.getDate()));
+    var futureDateDisabled = disableFutureDates && local.getTime() > nowUTC || disableFutureFrom && local.getTime() > new Date(Date.UTC(disableFutureFrom.getFullYear(), disableFutureFrom.getMonth(), disableFutureFrom.getDate()));
     return pastDatesDisabled || futureDateDisabled;
   };
 
@@ -321,7 +326,9 @@ Calendar.propTypes = {
   onSelectSingle: func,
   onSelectRange: func,
   disablePastDates: bool,
-  disableFutureDates: bool
+  disableFutureDates: bool,
+  disablePastFrom: instanceOf(Date),
+  disableFutureFrom: instanceOf(Date)
 };
 Calendar.defaultProps = {
   startDate: undefined,
@@ -329,6 +336,8 @@ Calendar.defaultProps = {
   onSelectSingle: null,
   onSelectRange: null,
   disablePastDates: false,
-  disableFutureDates: false
+  disableFutureDates: false,
+  disablePastFrom: undefined,
+  disableFutureFrom: undefined
 };
 export default Calendar;

package/esm/Datepicker/web/Datepicker.js

@@ -21,7 +21,7 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
   return props.fullWidth ? '100%' : css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n          ", "px\n        "])), theme.components.input.width);
 });
 
-var getSelectorBorderColor = function getSelectorBorderColor(open, error, disabled, colors, input) {
+var getSelectorBorderColor = function getSelectorBorderColor(open, error, disabled, inputFilled, colors) {
   if (error) {
     return colors.feedback.attention[1];
   }
@@ -30,22 +30,23 @@ var getSelectorBorderColor = function getSelectorBorderColor(open, error, disabl
     return colors.elements.backgroundAndDisabled;
   }
 
-  if (open) {
-    return colors.deep;
+  if (open || inputFilled) {
+    return colors.secondary;
   }
 
-  return input.border.color["default"];
+  return colors.elements.lineAndBorders;
 };
 
 var Selector = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var open = _ref.open,
       error = _ref.error,
       disabled = _ref.disabled,
+      inputFilled = _ref.inputFilled,
       _ref$theme$yoga = _ref.theme.yoga,
       components = _ref$theme$yoga.components,
       colors = _ref$theme$yoga.colors,
       spacing = _ref$theme$yoga.spacing;
-  return "\n    position: relative;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    box-sizing: border-box;\n    height: " + components.input.height + "px;\n    width: 100%;\n    padding: " + spacing.small + "px;\n    background-color: " + colors.white + ";\n    border-radius: " + components.input.border.radius + "px;\n    border-width: " + components.input.border.width + "px;\n    border-style: solid;\n    border-color: " + getSelectorBorderColor(open, error, disabled, colors, components.input) + "\n    color: " + components.input.font.color.focus + ";\n  ";
+  return "\n    position: relative;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    box-sizing: border-box;\n    height: " + components.input.height + "px;\n    width: 100%;\n    padding: " + spacing.small + "px;\n    background-color: " + colors.white + ";\n    border-radius: " + components.input.border.radius + "px;\n    border-width: " + components.input.border.width + "px;\n    border-style: solid;\n    border-color: " + getSelectorBorderColor(open, error, disabled, inputFilled, colors) + ";\n    &:hover {\n      border-color: " + colors.secondary + ";\n    }\n  ";
 });
 var Input = styled(Text.Small)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
   var disabled = _ref2.disabled,
@@ -100,27 +101,31 @@ function Datepicker(_ref8) {
   var fullWidth = _ref8.fullWidth,
       type = _ref8.type,
       placeholder = _ref8.placeholder,
-      initialDate = _ref8.startDate,
-      finishDate = _ref8.endDate,
+      startDate = _ref8.startDate,
+      endDate = _ref8.endDate,
       onSelectSingle = _ref8.onSelectSingle,
       disabled = _ref8.disabled,
       onSelectRange = _ref8.onSelectRange,
+      customOnSelectRange = _ref8.customOnSelectRange,
       disablePastDates = _ref8.disablePastDates,
       disableFutureDates = _ref8.disableFutureDates,
+      disablePastFrom = _ref8.disablePastFrom,
+      disableFutureFrom = _ref8.disableFutureFrom,
       error = _ref8.error,
-      onOpen = _ref8.onOpen;
+      onOpen = _ref8.onOpen,
+      displayEndDateOnly = _ref8.displayEndDateOnly;
 
   var _useState = useState(),
       open = _useState[0],
       setOpen = _useState[1];
 
-  var _useState2 = useState(initialDate),
-      startDate = _useState2[0],
-      setStartDate = _useState2[1];
+  var _useState2 = useState(startDate),
+      startDateLocal = _useState2[0],
+      setStartDateLocal = _useState2[1];
 
-  var _useState3 = useState(finishDate),
-      endDate = _useState3[0],
-      setEndDate = _useState3[1];
+  var _useState3 = useState(endDate),
+      endDateLocal = _useState3[0],
+      setEndDateLocal = _useState3[1];
 
   var ref = useRef(null);
 
@@ -138,18 +143,23 @@ function Datepicker(_ref8) {
   };
 
   useEffect(function () {
-    if (type === 'single' && onSelectSingle) {
-      onSelectSingle(startDate);
+    setInputFilled(startDate || endDate);
+  }, [startDate, endDate]);
+  useEffect(function () {
+    setInputFilled(startDate || endDate);
+    setStartDateLocal(startDate);
+    setEndDateLocal(endDate);
+
+    if (type === 'single' && startDate) {
       setOpen(false.toString());
-    } else if (type === 'range' && onSelectRange) {
-      onSelectRange(startDate, endDate);
     }
 
-    setInputFilled(!!startDate);
-  }, [startDate, endDate]);
+    if ((startDate || endDate) && onSelectRange) onSelectRange(startDate, endDate);
+    if (displayEndDateOnly && !endDate) setInputFilled(false);
+  }, [startDate, endDate, type]);
 
   var onDateSingleSelect = function onDateSingleSelect(startLocal) {
-    setStartDate(startLocal);
+    onSelectSingle(startLocal);
   };
 
   useEffect(function () {
@@ -157,27 +167,38 @@ function Datepicker(_ref8) {
   }, [open]);
 
   var onDateRangeSelect = function onDateRangeSelect(selectedDate) {
-    if (!endDate) {
-      if (!startDate) {
-        setStartDate(selectedDate);
-      } else if (selectedDate < startDate) {
-        setStartDate(selectedDate);
-        setEndDate(undefined);
-      } else setEndDate(selectedDate);
+    if (customOnSelectRange) {
+      customOnSelectRange(selectedDate);
+      return;
+    }
+
+    var onSelectRangeCallback = function onSelectRangeCallback(start, end) {
+      if (onSelectRange) {
+        onSelectRange(start, end);
+      }
+    };
+
+    if (!startDateLocal || startDateLocal > selectedDate && !endDateLocal || endDateLocal) {
+      setStartDateLocal(selectedDate);
+      if (endDateLocal) setEndDateLocal(undefined);
+      onSelectRangeCallback(selectedDate, undefined);
     } else {
-      setStartDate(selectedDate);
-      setEndDate(undefined);
+      setEndDateLocal(selectedDate);
+      onSelectRangeCallback(startDateLocal, selectedDate);
     }
   };
 
   var renderInput = function renderInput() {
-    if (!startDate && !endDate) {
+    if (!startDate && !endDate || displayEndDateOnly && !endDate) {
       return /*#__PURE__*/React.createElement(InputPlaceholder, {
         disabled: disabled
       }, placeholder != null ? placeholder : "Select Date");
     }
 
     var dateFormat = 'MMM d, yyyy';
+    if (displayEndDateOnly) return /*#__PURE__*/React.createElement(Input, {
+      disabled: disabled
+    }, endDate && format(endDate, dateFormat));
     return startDate && /*#__PURE__*/React.createElement(Input, {
       disabled: disabled
     }, format(startDate, dateFormat), endDate && " - " + format(endDate, dateFormat));
@@ -189,7 +210,8 @@ function Datepicker(_ref8) {
   }, /*#__PURE__*/React.createElement(Selector, {
     open: open === 'true',
     disabled: disabled,
-    error: error
+    error: error,
+    inputFilled: inputFilled
   }, renderInput(), /*#__PURE__*/React.createElement(TButton, {
     onClick: function onClick() {
       if (!disabled) {
@@ -207,12 +229,14 @@ function Datepicker(_ref8) {
     onBlur: onBlur
   }, /*#__PURE__*/React.createElement(Calendar, {
     type: type,
-    startDate: startDate,
-    endDate: endDate,
+    startDate: startDateLocal,
+    endDate: endDateLocal,
     onSelectSingle: onDateSingleSelect,
     onSelectRange: onDateRangeSelect,
     disablePastDates: disablePastDates,
-    disableFutureDates: disableFutureDates
+    disableFutureDates: disableFutureDates,
+    disablePastFrom: disablePastFrom,
+    disableFutureFrom: disableFutureFrom
   })));
 }
 
@@ -225,10 +249,14 @@ Datepicker.propTypes = {
   disabled: bool,
   onSelectSingle: func,
   onSelectRange: func,
+  customOnSelectRange: func,
   disablePastDates: bool,
   disableFutureDates: bool,
+  disablePastFrom: instanceOf(Date),
+  disableFutureFrom: instanceOf(Date),
   error: string,
-  onOpen: func
+  onOpen: func,
+  displayEndDateOnly: bool
 };
 Datepicker.defaultProps = {
   fullWidth: false,
@@ -238,9 +266,13 @@ Datepicker.defaultProps = {
   disabled: false,
   onSelectSingle: undefined,
   onSelectRange: undefined,
+  customOnSelectRange: undefined,
   disablePastDates: false,
   disableFutureDates: false,
+  disablePastFrom: undefined,
+  disableFutureFrom: undefined,
   error: undefined,
-  onOpen: undefined
+  onOpen: undefined,
+  displayEndDateOnly: false
 };
 export default Datepicker;

package/esm/Datepicker/web/Datepicker.test.js

@@ -22,8 +22,7 @@ describe('<Datepicker />', function () {
       expect(container).toMatchSnapshot();
     });
     it('should match with default selected date single Datepicker', function () {
-      var mockedDate = new Date(2022, 7, 3);
-      jest.useFakeTimers('modern').setSystemTime(mockedDate);
+      jest.useFakeTimers('modern').setSystemTime(testDate);
 
       var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
         type: "single",
@@ -34,8 +33,7 @@ describe('<Datepicker />', function () {
       expect(container).toMatchSnapshot();
     });
     it('should match with default selected dates range Datepicker', function () {
-      var mockedDate = new Date(2022, 7, 3);
-      jest.useFakeTimers('modern').setSystemTime(mockedDate);
+      jest.useFakeTimers('modern').setSystemTime(testDate);
       var endDate = new Date();
       endDate.setDate(testDate.getDate() + 15);
 
@@ -102,11 +100,11 @@ describe('<Datepicker />', function () {
         type: "single",
         onSelectSingle: onSelectSingle
       })));
-      expect(onSelectSingle).toHaveBeenCalledTimes(1);
+      expect(onSelectSingle).not.toHaveBeenCalled();
       fireEvent.click(screen.getByRole('button'));
       var day10 = screen.queryAllByText('10')[0];
       fireEvent.click(day10);
-      expect(onSelectSingle).toHaveBeenCalledTimes(2);
+      expect(onSelectSingle).toHaveBeenCalledTimes(1);
     });
     it('should call onSelectRange function on range Datepicker', function () {
       var onSelectRange = jest.fn();
@@ -114,14 +112,29 @@ describe('<Datepicker />', function () {
         type: "range",
         onSelectRange: onSelectRange
       })));
-      expect(onSelectRange).toHaveBeenCalledTimes(1);
+      expect(onSelectRange).not.toHaveBeenCalled();
       fireEvent.click(screen.getByRole('button'));
       var day10 = screen.queryAllByText('10')[0];
       var day20 = screen.queryAllByText('20')[0];
       fireEvent.click(day10);
+      expect(onSelectRange).toHaveBeenCalledTimes(1);
+      fireEvent.click(day20);
       expect(onSelectRange).toHaveBeenCalledTimes(2);
+    });
+    it('should call onCustomSelectRange function on range Datepicker', function () {
+      var onCustomSelectRange = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "range",
+        onSelectRange: onCustomSelectRange
+      })));
+      expect(onCustomSelectRange).not.toHaveBeenCalled();
+      fireEvent.click(screen.getByRole('button'));
+      var day10 = screen.queryAllByText('10')[0];
+      var day20 = screen.queryAllByText('20')[0];
+      fireEvent.click(day10);
+      expect(onCustomSelectRange).toHaveBeenCalledTimes(1);
       fireEvent.click(day20);
-      expect(onSelectRange).toHaveBeenCalledTimes(3);
+      expect(onCustomSelectRange).toHaveBeenCalledTimes(2);
     });
     it('should display default date on single Datepicker', function () {
       var currentDate = new Date();
@@ -183,6 +196,34 @@ describe('<Datepicker />', function () {
         return expect(screen.getAllByText("" + (i + 1))[0].closest('div')).toHaveAttribute('disabled');
       });
     });
+    it('should disable past dates from specific date', function () {
+      jest.useFakeTimers('modern').setSystemTime(testDate);
+      var date = new Date();
+      date.setDate(testDate.getDate() + 15);
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        disablePastFrom: date
+      })));
+      fireEvent.click(screen.getByRole('button'));
+
+      for (var i = 1; i <= 17; i++) {
+        expect(screen.getAllByText("" + i)[0].closest('div')).toHaveAttribute('disabled');
+      }
+    });
+    it('should disable future dates from specific date', function () {
+      jest.useFakeTimers('modern').setSystemTime(testDate);
+      var date = new Date();
+      date.setDate(testDate.getDate() + 15);
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        disableFutureFrom: date
+      })));
+      fireEvent.click(screen.getByRole('button'));
+
+      for (var i = 19; i <= 31; i++) {
+        expect(screen.getAllByText("" + i)[0].closest('div')).toHaveAttribute('disabled');
+      }
+    });
     it('should be disabled', function () {
       render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
         type: "single",

package/esm/Tag/native/Informative.js

@@ -55,8 +55,8 @@ var TagInformative = function TagInformative(_ref3) {
 };
 
 TagInformative.propTypes = {
-  /** style the tag following the theme (success, informative, attention) */
-  variant: oneOf(['success', 'informative', 'attention']).isRequired,
+  /** style the tag following the theme (neutral, success, informative, attention) */
+  variant: oneOf(['neutral', 'success', 'informative', 'attention']),
   icon: func,
   children: node.isRequired,
 
@@ -64,6 +64,7 @@ TagInformative.propTypes = {
   small: bool
 };
 TagInformative.defaultProps = {
+  variant: 'neutral',
   icon: undefined,
   small: false
 };

package/esm/Tag/native/Tag.test.js

@@ -50,6 +50,8 @@ describe('<Tag />', function () {
   });
   it('should match snapshot with variant prop and informative type', function () {
     var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Tag.Informative, {
+      variant: "neutral"
+    }, "neutral"), /*#__PURE__*/React.createElement(Tag.Informative, {
       variant: "success"
     }, "success"), /*#__PURE__*/React.createElement(Tag.Informative, {
       variant: "informative"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.53.8",
+  "version": "7.54.1",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -52,7 +52,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "364b71b2503f465e8194514a03e8d6724f77ec42",
+  "gitHead": "926e58932991130c8d609193762dff01fe11c2b8",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"